2012年10月3日 星期三

Nginx 反向代理與Rewite

以下為筆記 :p
延續上次的設定

反向代理 

利用proxy_pass來設定欲導向的服務
修改/etc/nginx/conf.d 底下的設定檔
我在此新增一個localnginx.conf的設定檔
server {
    listen       80;
    server_name  localnginx1;
    
    charset utf-8;
    
    location / {
        proxy_pass http://127.0.0.1:3000;
    }
}

listen跟server_name請看上篇
重點在於 location / 的部份
 / 代表根目錄
也就是在網址輸入 http://localnginx1/ 的時候
要處理的動作
這裡我使用 proxy_pass 把 client 端發出的 Request
轉發到 3000 port 的 service

Url Rewrite 
rewrite 可以接兩個參數
第一個參數設下條件
第二個參數則設定目標
server {
    listen       80;
    server_name  localnginx2;
    
    charset utf-8;

    location / {
        rewrite  ^(.*) http://127.0.0.1:3000;
    }
    
    location /google {
        rewrite ^ http://www.google.com.tw;
    }
}

按照上面的方式設定
輸入 http://localnginx2/ 時
會導向 http://127.0.0.1:3000; 並改變網址

輸入 http://localnginx2/google 時
會導向 google 台灣首頁


Nginx Virtual Host 設定

最近開始碰Nginx 紀錄一下設定的部份 環境為FC17 kernel: 3.5.3-1.fc17.i686.PAE 安裝好Nginx後 先設定為開機啟動 在Terminal上輸入
systemctl enable nginx.service
成功之後 輸入啟動指令
systemctl start nginx.service

完成後輸入在瀏覽器網址列上輸入localhost應該就能看到Nginx的歡迎頁面了


接下來為了測試方便 我們使用修改 hostname 的方式來模擬 sub domain 的部份 先編輯 /etc/hosts

如上圖所示, 在127.0.0.1那行加上 localnginx ~ localnginx2 三個name來測試 設定完畢就開始進入Nginx的設定了 Nginx的conf檔置於 /etc/nginx/conf.d/底下 只要在此目錄下的.conf檔案都會在Nginx啟動時載入 新增一個設定檔
vim /etc/conf.d/localnginx.conf

server {
    listen       80;
    server_name  localnginx;

    charset utf-8;

    location / {
        root   /home/sean/nginx/;
        index  index.html index.htm;
    }
}
此設定檔設定偵聽 80 port 並在遇到server name為localnginx時 使用此設定檔 粗體的部份就是設定此server的初始目錄在哪 存檔完畢後輸入重新啟動nginx
systemctl reload nginx.service
在對應的目錄底下放入index.html後 如此一來在瀏覽器上就能看到結果囉



2012年8月22日 星期三

正規表示法筆記

此區純粹筆記用 :p

只能輸入中英文與數字:
rule ='^[0-9a-zA-Z\u4e00-\u9fa5]+$'
str = '只能輸入中文與English123345';
var regexp = new RegExp(rule);   
console.log(regexp.test( str ));

2012年8月15日 星期三

MongoDB 指令筆記

開啟Mongo: mongod

顯示所有DB: show dbs

切換DB: use 資料庫名稱

顯示所有collection(資料表): show collections

顯示collection內容: db.collection名稱.find()




2012年8月13日 星期一

用 JavaScript 做中文驗證

利用正規輸入法來判斷


  function isChinese ( str ) {
      var regx = /[^\u4e00-\u9fa5]/;
      if ( regx.test( str ) ){
        return false;
      } else {
        return true;
      }
  }
  alert(isChinese("中文"));

範例網址: http://jsfiddle.net/dNVDV/5/

2012年8月8日 星期三

改善Google Blog 顯示程式碼的簡單方案 Google Code Prettify + CSS


今天明明是巴巴節,
我卻很不孝的跑去參加Node.js Taiwan Party 13
沒想到現場來的還是不少人呀XDD

離題了...
話說今天很害羞的被看到年久失修的網誌
實在忙到寫一堆草稿都沒發
後來Louis 問了我怎麼讓程式碼在blog裡顯示出來的時候
小弟真是慚愧
其實之前很刻苦的用區塊在自己加上css在美化的 囧!

今晚一回家趕快找估狗大神幫忙
好在找到一篇
在 Blogger 文章中利用 CSS Block 及 Google Code Prettify 顯示程式碼

文章使用了Google Code Prettify 這個語法上色工具
並利用css來修改美化整個區塊

咱們就來嘗試看看

首先要在網誌的範本區塊修改HTML

並在head標籤內貼上下方語法


<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript">
</script>

這邊是載入google code prettify的svn來使用
為了要使它運作
必須要body標籤內插入


onload='prettyPrint();'


最後在需要顯示為程式碼的地方用 pre 標籤包起來並賦予class

<pre class="prettyprint code">
   輸入想顯示的程式碼
</pre>

就能夠讓程式碼變顏色囉
最後我們可以利用修改css來增加框線及背景色
以下是我自己在用的css

.post .code { 
  display: block; 
  font-family: Courier New; 
  font-size: 10pt; 
  overflow:auto; 
  background: #f3f3f3;
  border: 1px solid #ddd;
  padding: 10px 10px 10px 21px;
  line-height: 1.2;
  border-radius:3px;
}

2012年6月14日 星期四

Android SDK on Windows 7 x64 安裝疑難雜症

最近入手了One-X 就是為了著手進行開發的娛樂XD


既然手機來了, 電腦也該裝上開發工具了!
不過怎麼開始還是個大問題
以下純屬個人筆記


- 建置開發環境 - 


需安裝三樣套件
  1. JDK( Java SE Development Kit)    (筆記時使用的版本為 Java SE 7u5)
  2. Eclipse Classic  (筆記時使用的版本為 3.7.2 )
  3. Andorid SDK  ( 筆記時使用的版本為 installer_r18-windows.exe)
安裝 JDK應該不會有什麼大問題

不過在Eclipse的部分
會因為找不到JDK的javaw.exe而出錯
A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. No Java virtual machine was found after searching the following locations:C:\eclipse\jre\bin\javaw.exejavaw.exe in your current PATH
(此處將eclipse解壓至 C槽底下)

這時候需到系統內容來設定環境變數


將安裝路徑補在變數值後方
;C:\Program Files\Java\jdk1.7.0_05\bin
(上述路徑為Java SE 7u5預設的路徑)
注意前方須加上分號以作為區隔

這樣就能解決找不到SDK的問題

而在Andorid SDK的部分
如果出現以下訊息

則一樣需到系統內容去設定環境變數
設定如下

如此一來就不會發生安裝程式傻傻找不到java的問題囉




2012年4月18日 星期三

JavaScript 進位轉換方式

剛好朋友問起
在JS裡怎麼讓 原本為2進位的字串變成16進位呢?


這裡紀錄一下小小的教學


JS提供了很方便的工具可以讓我們將傳統的數值轉為各種進位的字串


例如:
var origin = 100;
var result = origin.toString(2);
這時候 origin 還是10進位的數值型態
要將他轉為2進位則利用toString並傳入需要的進位方式


但是如果要將2進位轉為16進位呢?


由於JS沒有辦法直接將2進位變成16進位


所以我們需要轉個方向
將2進位先轉回10進位就好啦! :p


好在JS也提供了轉回10進位的方式
parseInt()
parseInt除了將傳入的字串解析成數值以外
也可以加入進位的參數唷


例如:
parseInt( '1100',  2 );

這樣就會將1100當2進位處理
回傳 12這個數值
而不是直接回傳1100唷


所以2進位轉數值及數值轉回2進位都有了
這時候就可以來嘗試2轉16的部份
程式碼非常非常簡單 :)


範例:
var origin '10000110'// 2進位數字
var temp parseInt(origin2)// 先將字串以2進位方式解析為數值
var result temp.toString(16)// 將數值轉為16進位

jsfiddle線上範例


雖然不知道為什麼簡單的東西
打出來又變成長篇大論OTL...

Input's HTML5 placeholder Color

input::-webkit-input-placeholder {
    color:    #FFF;
}
input:-moz-placeholder {
    color:    #FFF;
}

2012年4月11日 星期三

調整 jQuery 動畫效果的更新頻率

前陣子在開發平板應用時
由於需要仿製Ipad上的主頁面
讓螢幕上排滿App 圖示的情況下
還必須要滑動換頁
公司的裝置在降頻且使用舊版webkit核心的瀏覽器下
顯得有些許頓挫感
後來想到可以針對jQuery動畫效果的部份去調整

這時候得手動調整
jQuery.fx.interval

下面開始範例

範例DEMO on jsfiddle

我們先建立基本的HTML

<!DOCTYPE html>
<html>
<body>
  <p><input type="button" value="Run"/></p>
  <div class="box"></div>
</body>
</html>


這裡我們建了一個box及啟動按鈕

設定一下css

讓box有個顏色跟基本大小
這邊要注意的是
要做動畫效果必須要設定position為相對或是絕對定位


.box 
    width:50px
    height:30px;
    background-color:#000;
    positionrelative;        
}


再來就是重頭戲了:p
我們來建立按鈕事件
讓box每按一次移動 100px



jQuery.fx.interval = 18;

$("input").click(function(){
    $("div").animate({left:'+=100px'}, 500);
});​


jQuery.fx.interval 的型態是數字, 預設值為13毫秒 
我們為了調整更新的效率
將它改為18

雖然只是小小的5毫秒
卻還是讓原本在平板上有頓挫感的程式
變成咻咻咻的流暢動畫
不過數字不能調太大
不然因為更新頻率間隔太長
反而會造成動畫效果不佳的情形

2012年4月5日 星期四

Linux 設定 Wifi 的方法 Part1 (無加密與WEP)


將當初放在pixnet的文章轉了過來 :p

這幾天終於將Wifi管理工具開發完成
在wifi的指令上遇到不少問題
後來全部改成使用wpa_supplicant來管理就簡單多了
不過這篇先寫寫一般使用iwconfig連線的方式
(iwconfig不支援WPA加密喔!)


使用前請先將方便的NetworkManager關掉XD
/etc/init.d/NetworkManager stop

以下使用 wlan0 來作為interface
啟用&停用網路卡
ifconfig wlan0 up
原先我所寫得管理工具靠得是 iwconfig 及 wpa_supplicant 混用
iwconfig 可以對無線網卡的大部分參數進行配置
直接下 iwconfig 不帶參數會取得目前的網卡資訊

lo        no wireless extensions.
eth0      no wireless extensions.
wlan0

確定我們的 wlan0 有啟動後
我們開始要掃描有哪些基地台可供使用
iwlist wlan0 scan 
(如果這時候 NetworkManager 還在作用可能會收到錯誤訊息唷!)
這裡可以取得重要的幾個訊息如下:
  ESSID:"MyAP"
  Encryption key : On
  IE : IEEE 802.11i/WPA2 Version 1   

Encryption key 如果顯示No就是不需要密碼,顯示On 則有加密
如果是WEP則只會顯示上面Encryption key : On,而WPA 的話則IE 會顯示是使用WPA or WPA2 )

現在我們要開始連線囉!
無加密
iwconfig wlan0 essid "MyAP"
(essid指的就是剛剛iwlist所掃描到的essid)

WEP加密
以加密金鑰區分兩種寫法
十六進位  (10或者26個十六進位數字) 
iwconfig wlan0 essid "MyAP-WEP" key "0123456789"
ASCII     (5或13個英文字母)  
iwconfig wlan0 essid "MyAP-WEP" key "s:15325"

在設定完iwconfig
再使用
dhclient wlan0
就可以取得DHCP分派的IP囉

CSS3 Selectors - for a range



Example:
nth-child(n+1):nth-child(-n+6) 


My Demo in jsfiddle