2014年6月1日 星期日

『Node.js』介紹 Express web framework 套件

聽說學 node.js 也要學 express 這個超強大的套件,今天我就來嘗試玩看看囉

開發環境:mac

首先先用 npm 安裝 express,由於我的環境是用mac,然後我的 .npm 的預設目錄是設定在 root 權限的 home 目錄夾,因此我下的語法要用這樣:
$sudo npm install -g express-generator

 開始練習吧
將 express 套件安裝完成之後呢,我們用 express 指令建立專案,接著在你想要開發的目錄之下,輸入以下指令:
$express exptest --hogan -c less

express 後面的 exptest 是資料夾名稱,利用 express 建立完之後,就需要安裝一下裡面的 package.json 的相依套件,按照上面所指示的輸入:
$cd exptest && npm install
這樣子很快的就裝完了,馬上來執行看看,繼續照著 run the app 的指示,輸入:
$DEBUG=exptest ./bin/www

這裡的預設 port 為 3000,接下來開啟瀏覽器輸入 localhost:3000,按下 enter 後...阿哈~ 很簡單的頁面就產出了

改變點什麼

探討一下,剛剛我們輸入的 $DEBUG=exptest ./bin/www , 其中 exptest 可以換成 app.js 的,把 app.js 換成 debug 模式,打開 /bin/www 執行擋,將第二行的
var debug = require('debug')('exptest');
換成
var debug = require('debug')('app'); 

想換 port ?

在 /bin/www 檔案裡的這一行改成你想要的 port
app.set('port', process.env.PORT || 8421);

監控檔案變更套件

有沒有一個功能是可以類似下中斷點之後,還能即時告知更多訊息,來吧!可以使用 nodemon 這個超好用套件,下載指令是:
$sudo npm install -g nodemon
接著立馬使用 $nodemon bin/www 去監測這裡的目錄有沒有異動檔案
使用方法可以在任一個 js 頁面 (比如 app.js)簡單的輸入 console.log("go~ running~"); 後存檔,在命令提示視窗馬上顯示如下:

操作路由

打開 ./routes/index.js ,我們改一下資料,讓資料呈現在頁面上,我們可以看到的是,這裡利用 express.Router() 方式進行路由,來改一下第四行的 res.render('index', { title: 'Express' });
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
     res.render('index', { title: 'Express' });
});
module.exports = router;
改成:
res.render('index', { 
     title: 'NoteProgram.噗噗故我在',
     name: 'Helen',
     age: 20 
});
看看結果

很簡單吧,更多的進階操作路由,之後會在陸續介紹囉  :)

沒有留言:

張貼留言