[教學] Nodejs 學習筆記 (4) -- express framework

2012年3月1日

續前文:
  1. [教學] Nodejs 學習筆記 (1) -- 建立開發環境
  2. [教學] Nodejs 學習筆記 (2) -- 使用 npm 管理套件
  3. [教學] Nodejs 學習筆記 (3) -- 操作 DOM 物件

express - Nodejs MVC Framework

MVC 是多數開發者很容易上手的架構,Node.js 上也有許多 Model-View-Control 架構的 Framework,這裡我們介紹最為普及的 express。如果您需要別的網站來擔保的話, express 官方網站也列出了幾個使用 express 的成功案例,其中還包含小有名氣的新創網站 Storify

安裝 express 

若您已按照先前的教學準備好了 npm,安裝 express 只需要一行指令(如果要 global scope 則需加上參數 -g):
$ npm install express

建立新專案

安裝成功 express 後,建立新專案也很容易,只要使用指令 express 並指定目錄位置,express 會自動產生一個基本的網站結構(以下的目錄可以自由命名更改)。第二行指令則是安裝相依檔案:
$ express /tmp/foo && cd /tmp/foo
$ npm install -d

執行 express 新專案

回到剛剛建立的新專案目錄 /tmp/foo,在裡面有一個命名為 app.js 自動產生出來的檔案,這是 express 專案的起點。我們先讓網站跑起來,待會兒再回頭研究它裡頭的細節。與其他 Node.js 執行的命令相同,使用 node 指令執行檔案 app.js
$ node app.js
接著使用瀏覽器開啟 http://127.0.0.1:3000 ,如果一切正常的話,可以在瀏覽器裡看到新專案的長相(附註:3000 是 express 預設的 port)。為了一探 express 究竟產生了哪些內容,我們使用瀏覽器內建的開發者工具檢查 HTML 原始碼,並一步步找出 express 中對應的程式碼。

express 的運作方式

截至目前為止,我們雖然讓 express 新專案成功地跑了起來,但卻不知其所以然。現在就讓我們來看看剛剛的過程中 express 究竟做了哪些事。回到專案目錄後(本例為 /tmp/foo)列出第一層檔案:


使用文字編輯器打開剛剛執行的檔案 app.jsapp.js 大致上可以拆成三個部分,首先是載入相依的模組,並建立 server:


app.js 第二個部分為設定檔,詳細的設定語法與參數可以參考官方文件。身為初學者,我們先將目光停留在兩個重點:1) Template  檔案放在 /views 目錄下,待會兒我們就要繼續追查這個目錄;2)  express 預設使用的 view engine 是一個名為 jade 的樣板引擎,如果不習慣 jade 的特殊語法,別忘了這是個"設定檔",表示我們也可以將它改成使用其他樣板引擎。


app.js 最後一個部分是 Routes,我們可以設定各種網址的 entry 並將它指定到不同的檔案。範例網站只有一頁,因此這裡就只看得到一個規則,將根目錄指到 views 目錄下的 index 檔案。



循線找到 views 目錄並列出內容檔案,這裡有 index.jade 以及 layout.jade 兩個樣版檔案:


首先開啟 index.jade 檔,若您跟我一樣第一次接觸 jade 樣板引擎的話,可能會被它的極簡風格嚇一跳。index.jade 指定 <h1> 與 <p> 兩個 html 標籤的內容,而 html 結構則定義在 layout.jade 檔案中:



經過一番抽絲剝繭,總算清楚 express 是如何幫助我們產生以下的網頁了。除了 express 強調的高效能外,當網路應用程式愈來愈龐大時,express 這樣清楚分類的 MVC framework 就更顯得出它的優勢,可以有效減輕開發者維護成本。

延伸閱讀:

  1. express  官方網站
  2. [Node.js]練習1 - express + mustache + jquery
  3. Taking Toddler Steps with Node.js – Express

0 意見 :

Related Posts Plugin for WordPress, Blogger...