Jac 前端攻城屍的玻璃心: 12月 2016

2016年12月9日星期五

如何在forEach中下continue跟break

這只是一篇筆記文，所以也沒什麼前言，只有一點要特別注意，forEach是ES5的語法，所以用IE舊版的朋友，祝你好運。
我們就直接開始吧。

var a = [1,2,3,4,5];

a.forEach(function(x){
if (x == 2) return; // continue
if (x == 4) return false; // break
console.log(x)
})

ouput:
1
3

以上

2016年12月8日星期四

如何只靠html&css輸出A4的畫面

目標

相信大家在做專案的時候不免會遇到一些要輸出報表，或輸出什麼單什麼單的時候。

然而通常我們用的技術越簡單，對專案開發速度的提升跟交接的難易度也越低。

而這個方法，真的是小編所能找到最簡單的方法了，過程中只有 Html 跟 CSS ，甚至一行 JS 都不需要有！(範例中那行是方便大家輸出跟觀察，直接把print指令寫好了)這對目前是前端工程師的小編來說，根本是逆天的簡單(當然對各位大大來說也是一樣啦 )，而唯一要做的前置作業，就是去查出你要輸出的紙張的size，必要時再去弄一張版型的圖片，當然圖片大小也要調得一樣，這樣可以方便做細部的調整。

廢話不多說我們就直接開始吧。

Html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="book" id="app">
<div class="page">
<div class="subpage">
page1/2
</div>
</div>
<div class="page">
<div class="subpage">
page2/2
</div>
</div>
</div>
</body>
<sciript>widnow.print()</script>
</html>

上網查了一下，A4 size = 210mm*297mm，那我們就開始寫CSS吧

CSS:

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm; /*隨著紙張大小異動*/
min-height: 297mm;/*隨著紙張大小異動*/
padding: 20mm;
margin: 10mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 257mm;/*隨著紙張大小異動*/
outline: 2cm #FFEAEA solid;
}

@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;/*隨著紙張大小異動*/
height: 297mm; /*隨著紙張大小異動*/
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}

小結

如果有需要，可以直接在page裡面加入 background-image，自行加入要列印單子的版型，這樣可以快速調整到自己想要的位置，甚至可以儲 positon 到資料庫，因應各家不同廠商的單子。光想到就內牛滿面。

小編過足了兩年都過著用 position:releative 去微調每個欄位，然後再列印出來，看到底還差多少，然後硬體不同還會跑版，一整個吐血，無形中不知道浪費了多少紙張，讓北極熊唾棄了幾次，所以後來小編終於受不了良心譴責，離開了那間公司，哈。

不過就這樣短短的程式碼，確實簡單又便利。留起來筆記，也希望可以幫助正在為報表所苦的朋友們，也歡迎大家留言或寄信給我討論

求php攻城屍在面對oracleDB時內心的陰影面積

前言

雖然小編寫php行之有年，而且最近還轉戰前端工程，但我還是沒有放棄php的~~~~(其實只是剛好專案需要)

在完全不知道要怎麼著手，大部分網路神人的教導又沒辦法完全解決問題的時候，真的很苦惱啊.......所以這邊就是我完成了連線並且成功取到資料的一篇筆記，先說小編完全不了解其運作原理，只知道怎麼做到，所以請各位鞭小力一點 = =

經過小編不怕死嘗試，就算library是12c，也一樣可以連線11g的版本

環境設定

所以直接無腦入門了，裝了appserv最新的版本，把php切換到7(appserv裡面有一支PHPVersion Switch可以做到切換，不然預設是跑php5)

(小編因為個人需求所以用appserv會簡單些，如果用習慣xampp或其他的也是可以，可以跑php就好)

切換好PHP版本後，開始修改php.ini，尋找oci，會找到

;extension = php_oci8_12c.dll

;extension = php_pdo_oci.dll

把前面的分號拿掉並儲存

instant client

只靠PHP原生的DLL是無法連線oracl的，需要而外引入dll，所以這時必須上oracle官網載instant client，因為windows的php目前只有32位元版，所以這裡也必須載32位元版，這時看你剛剛修改的php.ini檔內容可以知道你要抓哪個版本的instant client (小編這時是抓12版)。

下載完解壓縮在C:\，會有個資料夾叫 instantclient_12_1，根據網路上的說法，必須把這個資料夾設定在系統環境變數內，並重新啟動電腦。但小編試過，不知道為什麼總是出不來，模組無法讀取，出現錯誤訊息:call undefined function oci_connect()....。最後乾脆把資料夾內的東西全數複製到php\ext & apache\bin兩個資料夾中。然後apache restart就抓到oci_connect function了

(php連線測試程式碼會附在最後)

語系

可以連線後，小編又遇到一個問題，錯誤訊息:

ora-12705: cannot access nls data files or invalid environment specified

上網看資料大概是語系問題吧，這時你必須知道oracle主機上 NLS_LANG 的設定是什麼

根據網友說法，開啟 regedit.exe 找到 HKEY/SOFTWARE/ORACLE 可以看到字串 NLS_LANG值為NA，直接刪掉他就好了

不知道是不是因為作業系統的關係，小編的路徑是HKEY/SOFTWARE/Wow6432Node/ORACLE，如果都找不到，直接ctrl+F找NLS_LANG也可以，小編也是這樣找到的。另外小編的解決方式是填入跟主機樣的的設定。

設定完之後記得重新啟動apache，然後你就會看到你畫面上出現success!
(主機是linux，只要下指令: unset NLS_LANG 似乎就可以解決，或是 set NLS_LANG=xxxxxxxx)

這時你必須取得host、port(預設1521)、SID(或SERVICE NAME、SERVER)，當然還有帳號密碼。
因為要填寫connect string，詳細規格看PHP官網或oracle官網就很清楚了

程式碼如下

<?php

$db = "(DESCRIPTION=

(ADDRESS_LIST =

(ADDRESS = (PROTOCOL = TCP)(HOST = 192.168.xx.xx)(PORT = 1521))

)

(CONNECT_DATA=

(SID=xxxx)

)

)";

$conn = oci_connect("user_id","password",$db);

if(!$conn){

echo "db access error: ";

print_r(oci_error());

exit;

}

else

{

echo "success!";

}

小結

跟網路上許多人隨隨便便就弄上3、5天甚至1、2個禮拜的人來說，小編算花很短的時間了，特別在主機又不是我可以輕易操作的情況下，小編還是活過來了，所以正在為oracle所苦的各位，一定可以撐過來。藉由這次機緣才了解到oracle真的是博大精深阿，據說還有db以外的用法，不過......有機會再來研究拉= =(逃) 還有它真的很貴= =一套破百萬來著，所以各位如果接到用oracle的案子，不要怕，盡量開價吧~~小編我就是沒有做好功課，亂開價嗚嗚~ ><"

另外提個小小的意外，我在取資料時，要輸出json，卻一直無法輸出，原來是json_encode不接受big5格式......所以必須自己寫程式去轉碼。好吧，這種小事情還是自己動手寫一支吧。

<?php

function convertEncoding($data) {

return is_array($data)?

array_map(function($val){

return convertEncoding($val);

}, $data):

mb_convert_encoding($data, "UTF-8", "BIG-5");

}

2016年12月9日 星期五