跳到主要內容

[教學] express 路由與應用,express route setting in node.js

在前面有許多篇幅解說 node.JS 基本操作概念
Express ,這個套件主要幫忙解決許多Node.JS http server 所需要的基本服務,讓開發http service 變得更為容易,不需要像之前需要透過層層模組(module)才有辦法開始編寫自己的程式。
這個套件是由TJ Holowaychuk 製作而成的套件,裡面包含基本的路由處理(route),http 資料處理(GET/POST/PUT),另外還與樣板套件(js html template engine)搭配,同時也可以處理許多複雜化的問題。

Express 安裝

安裝方式十分簡單,只要透過之前介紹的 NPM 就可以使用簡單的指令安裝,指令如下,
npm install -g express
這邊建議需要將此套件安裝成為全域模組,方便日後使用。

Express 基本操作

express 的使用也十分簡單,先來建立一個基本的hello world ,
var app = require('express').createServer(),
    port = 1337; 

app.listen(port);

app.get('/', function(req, res){
    res.send('hello world');
});

console.log('start express server\n');
可以從上面的程式碼發現,基本操作與node.js http 的建立方式沒有太大差異,主要差在當我們設定路由時,可以直接透過 app.get 方式設定回應與接受方式。

Express 路由處理

Express 對於 http 服務上有許多包裝,讓開發者使用及設定上更為方便,例如有幾個路由設定,那我們就統一藉由 app.get 來處理,
// ... Create http server

app.get('/', function(req, res){
    res.send('hello world');
});

app.get('/test', function(req, res){                                                                                                                                       
    res.send('test render');
});

app.get('/user/', function(req, res){
    res.send('user page');
});
如上面的程式碼所表示,app.get 可以帶入兩個參數,第一個是路徑名稱設定,第二個為回應函式(call back function),回應函式裡面就如同之前的 createServer 方法,裡面包含 request, response 兩個物件可供使用。使用者就可以透過瀏覽器,輸入不同的url 切換到不同的頁面,顯示不同的結果。
路由設定上也有基本的配對方式,讓使用者從瀏覽器輸入的網址可以是一個變數,只要符合型態就可以有對應的頁面產出,例如,
// ... Create http server

app.get('/user/:id', function(req, res){                                                                                                                                   
    res.send('user: ' + req.params.id);
}); 

app.get('/:number', function(req, res){
    res.send('number: ' + req.params.number);
}); 
裡面使用到:number ,從網址輸入之後就可以直接使用 req.params.number 取得所輸入的資料,變成url 參數使用,當然前面也是可以加上路徑的設定, /user/:id,在瀏覽器上路徑必須符合 /user/xxx,透過 req.params.id 就可以取到 xxx這個字串值。
另外,express 參數處理也提供了路由參數配對處理,也可以透過正規表示法作為參數設定,
var app = require('express').createServer(),
    port = 1337; 

app.listen(port);

app.get(/^\/ip?(?:\/(\d{2,3})(?:\.(\d{2,3}))(?:\.(\d{2,3}))(?:\.(\d{2,3})))?/, function(req, res){                                                                                            
    res.send(req.params);
});
上面程式碼,可以發現後面路由設定的型態是正規表示法,裡面設定格式為 /ip 之後,必須要加上ip 型態才會符合資料格式,同時取得ip資料已經由正規表示法將資料做分群,因此可以取得ip的四個數字。
此程式執行之後,可以透過瀏覽器測試,輸入網址為 localhost:3000/ip/255.255.100.10,可以從頁面獲得資料,
[
    "255",
    "255",
    "100",
    "10"
]

完整程式碼


後記

Express 在node.js 當中是一個不可或缺的套件,協助開發者省下許多事情,當然在config也有許多設定,不過預設這篇文章是介紹給完全沒有接觸過express 的朋友,在這邊就不多贅述,如果有興趣深入的朋友,可以直接到express 文件,裡面有更多詳細的使用說明及介紹。
如果各位有什麼好的使用方式,或者是在開發時遇到任何問題,歡迎在底下留言,希望能聽到大家更多的回饋。如果資料上有任何錯誤的地方歡迎指正。

工商服務

Node.JS Taiwan 社群目前著手共筆的中文教學資料,歡迎有興趣者共同關注,相關網址資訊,

留言

這個網誌中的熱門文章

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。

[教學] 快快樂樂刪除CodeIgniter index.php

預設的CI網址預設都設定為index.php同一層級,因此所有的程式都必須指定index.php導向才能開始,例如 http://localhost/ci/index.php/welcome/test http://localhost/ci/welcome/test 本文將說明如何將惱人的index.php消除,還你一個漂亮的URL。 設定開始: 接下來說明如何使用rewrite方式將惱人的index.php去除。 rewrite不清楚的人,煩請先自行google 首先要先確定Apache的 mod_rewrite 有 開啟 ,如果沒有開啟請設定好之後重新啟動apache。 接著,在根目錄底下建立一個新檔案,檔名為 .htaccess ,裡面程式碼如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 接著到 application/config/config.php ,開啟檔案修改 $config['index_page'] = ""; 注意: /index.php/$1 要根據你目錄,例如 http://localhost/index.php ,網站根目錄為 /ci/index.php 則要寫成 /ci/index.php/$1 接著至CI目錄下,尋找 config\config.php , 修改一下裡面的檔案,修改如下: $config['index_page'] = ""; 存檔後,如此一來大功告成。 參考資料 官方網站說明

[教學] Mojito 安裝與入門,install mojito for beginner.

mojito ,最近終於從 YDN 對外公開此專案,這個套件主要用於解決前端多重裝置及瀏覽器端的問題,後端服務採取 node.js ,因此使用上必定要先準備以下幾個元素 準備素材 c++ complier git Node.js > 0.4.x NPM > 1.0.x 安裝方式 git clone git://github.com/yahoo/mojito.git cd mojito/source sudo npm install -g . npm install . 以上四個簡單的步驟,就可以把 mojito module 完整安裝到服務器上,接著就可以開始進入 mojito 的世界 使用方式 mojito 提供了完整的 command line 給開發者使用,接著先建立一個基本 hello world 專案,跟著以下步驟完成第一個專案。首先建立一個 mojito application, mojito create app hello cd hello 切換到目錄之後,再接著建立自己的 mojit,這邊的 mojit 就像是一個應用(application)可能會包含許多個獨立網站體,擁有獨立架構的 MVC ,包含內部設定等,詳細資料可以參考官方的 說明 ,建立 mojit mojito create mojit HelloMojit 輸入指令後,會看到顯示結果如下, creating mojit called 'HelloMojit' (using "default" archetype) ✔ mojit: HelloMojit created! ✔ mojito done. 接著修改 application.json 這個 mojit 設定檔案,讓剛才新建立的 hellp application 指定底下有一個 mojit -> HelloMojit ,讓應用可以去執行 mojit controller ,修改如下, [ { "settings": [ "master" ], "appPort": 8666, "specs": { ...