Express 入門簡介

Express 是一個小巧且靈活的 Node.js Web應用框架，它有一套健壯的特性，可用於開發單頁、多頁和混合Web應用。

安裝

package.json 中手動新增 Express 依賴

{
   "name": "demo1",
   "description": "First Express app",
   "version": "0.0.1",
   "dependencies": {
      "express": "3.x"
   }
}

1

2

3

4

5

6

7

8

{

"name": "demo1",

"description": "First Express app",

"version": "0.0.1",

"dependencies": {

"express": "3.x"

}

相同的目錄執行：

npm install

1	npm install

命令列安裝 Express 直接執行：

npm install -g express

1	npm install -g express

安裝完後可以用 express 在命令列生成應用。

新增 app.js 檔案，寫個最簡單的應用，建立一個 Express 例項，開始監聽特定的埠：

var express = require('express');
var app = express();

app.listen(3000);

1

2

3

4

var express = require('express');

var app = express();

app.listen(3000);

執行 node app 沒發生任何事情。

定義路由

我們給應用新增一些簡單的路由，Express 可以響應各種 HTTP 請求：

//Regular HTTP get
app.get(some url, do something);

//Some other page
app.get(some other url, do something else);

//I can respond to a form post
app.post(some url, do more stuff);

1

2

3

4

5

6

7

8

//Regular HTTP get

app.get(some url, do something);

//Some other page

app.get(some other url, do something else);

//I can respond to a form post

app.post(some url, do more stuff);

我們寫個真實的例子，給應用新增主頁：

app.get('/', function(request, response) {
   response.send("This would be some HTML");
});

1

2

3

app.get('/', function(request, response) {

response.send("This would be some HTML");

});

注意 Express 為 response 物件新增了 send() 方法，一些模板程式碼可以處理響應。重啟應用，訪問 http://localhost:3000/ 看看。

request.send() API 智慧處理不同型別的資料，假如你想為網站新增簡單的基於 JSON 的 API ，Express 可以把返回結果轉換成 JSON 並設定適當的響應頭。

app.get('/api', function(request, response) {
   response.send({name:"Raymond",age:40});
});

1

2

3

app.get('/api', function(request, response) {

response.send({name:"Raymond",age:40});

});

可想而知，新增更多的路由，並處理所需的響應，就可以構建一個應用。

通用的部落格應用

跳過 package.json 檔案，因為除了 name 屬性不一樣，其它項都一樣。來看 app.js 。

var express = require('express');
var app = express();

app.get('/', function(req, res) {
   res.sendfile('./views/index.html');
});

app.get('/about', function(req, res) {
   res.sendfile('./views/about.html');
});

app.get('/article', function(req, res) {
   res.sendfile('./views/article.html');
});

app.listen(3000);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var express = require('express');

var app = express();

app.get('/', function(req, res) {

res.sendfile('./views/index.html');

});

app.get('/about', function(req, res) {

res.sendfile('./views/about.html');

});

app.get('/article', function(req, res) {

res.sendfile('./views/article.html');

});

app.listen(3000);

我們把 send 換成了 sendfile 。與其把大段的 HTML 字串放到 app.js 檔案裡，不如增加三個路由，主頁，關於頁，文章頁。

新增 HTML

主頁：

HTML 程式碼

這裡並沒什麼特別的，Express 將返回純靜態的 HTML 。關於頁和文章頁只不過把 title 和 h1 值改了。

由靜態到動態

Express 支援各種模板引擎，express 命令列可以新增對 Jade，EJS，JSHTML 和 Hogan 的支援。根據 Express 文件，任何模版引擎只要符合特定的簽名就可以生效。推薦從 consolidate.js 庫（模版引擎集合）裡面查詢喜歡的模版引擎。

我是 Handlebars 的超級粉，我的許多客戶端應用都用它，伺服器端自然也少不了它。要用 Handlebars 還需要安裝包裝庫 hbs 。

{
   "name": "blog2",
   "description": "Blog app",
   "version": "0.0.1",
   "dependencies": {
      "express": "3.x",
      "hbs":"*"
   }
}

1

2

3

4

5

6

7

8

9

{

"name": "blog2",

"description": "Blog app",

"version": "0.0.1",

"dependencies": {

"express": "3.x",

"hbs":"*"

}

然後更新 app.js 使用此引擎：

var express = require('express');
var app = express();

var hbs = require('hbs');

app.set('view engine', 'html');
app.engine('html', hbs.__express);

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

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

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

app.listen(3000);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

var express = require('express');

var app = express();

var hbs = require('hbs');

app.set('view engine', 'html');

app.engine('html', hbs.__express);

app.get('/', function(req, res) {

res.render('index');

});

app.get('/about', function(req, res) {

res.render('about');

});

app.get('/article', function(req, res) {

res.render('article');

});

app.listen(3000);

為了使用 Handlebars ，我們通過 require 把 HBS 包裝庫引入，然後讓 Express 使用它。預設情況下，Handlebars 會解析包含了特定引擎擴充套件的檔案，這裡是 something.hbs 。但也可以使用 “view engine”指令告訴 Express 動態解析 HTML 檔案。這樣我的編輯器可以提供良好的程式碼校驗和語法高亮。通過 app.engine 真正載入引擎。

最終路由用了新的 render 方法，Express 預設使用 views 資料夾，因此我們可以省略。由於 Express 記住了我們要解析的副檔名，所以它也可以省略。res.render(‘something’) 實際等於告訴 Express 查詢 views/something.html 。Express 基於模板引擎規則解析它，並返回到瀏覽器。

主頁顯示部落格條目

我們可以連線到 MySQL 或者 Mongo，這裡我們建立一個靜態的資料集，取名 blog.js ，它提供獲取一組條目和獲取一個條目功能。

var entries = [
{"id":1, "title":"Hello World!", "body":"This is the body of my blog entry. Sooo exciting.", "published":"6/2/2013"},
{"id":2, "title":"Eggs for Breakfast", "body":"Today I had eggs for breakfast. Sooo exciting.", "published":"6/3/2013"},
{"id":3, "title":"Beer is Good", "body":"News Flash! Beer is awesome!", "published":"6/4/2013"},
{"id":4, "title":"Mean People Suck", "body":"People who are mean aren't nice or fun to hang around.", "published":"6/5/2013"},
{"id":5, "title":"I'm Leaving Technology X and You Care", "body":"Let me write some link bait about why I'm not using a particular technology anymore.", "published":"6/10/2013"},
{"id":6, "title":"Help My Kickstarter", "body":"I want a new XBox One. Please fund my Kickstarter.", "published":"6/12/2013"}];
exports.getBlogEntries = function() {
   return entries;
}

exports.getBlogEntry = function(id) {
   for(var i=0; i < entries.length; i++) {
      if(entries[i].id == id) return entries[i];
   }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var entries = [

{"id":1, "title":"Hello World!", "body":"This is the body of my blog entry. Sooo exciting.", "published":"6/2/2013"},

{"id":2, "title":"Eggs for Breakfast", "body":"Today I had eggs for breakfast. Sooo exciting.", "published":"6/3/2013"},

{"id":3, "title":"Beer is Good", "body":"News Flash! Beer is awesome!", "published":"6/4/2013"},

{"id":4, "title":"Mean People Suck", "body":"People who are mean aren't nice or fun to hang around.", "published":"6/5/2013"},

{"id":5, "title":"I'm Leaving Technology X and You Care", "body":"Let me write some link bait about why I'm not using a particular technology anymore.", "published":"6/10/2013"},

{"id":6, "title":"Help My Kickstarter", "body":"I want a new XBox One. Please fund my Kickstarter.", "published":"6/12/2013"}];

exports.getBlogEntries = function() {

return entries;

}

exports.getBlogEntry = function(id) {

for(var i=0; i < entries.length; i++) {

if(entries[i].id == id) return entries[i];

}

我們還可以提供新增，編輯和刪除，這裡到此為止。再更新下 app.js ：

var express = require('express');
var app = express();

var hbs = require('hbs');

var blogEngine = require('./blog');

app.set('view engine', 'html');
app.engine('html', hbs.__express);
app.use(express.bodyParser());

app.get('/', function(req, res) {
   res.render('index',{title:"My Blog", entries:blogEngine.getBlogEntries()});
});

app.get('/about', function(req, res) {
   res.render('about', {title:"About Me"});
});

app.get('/article/:id', function(req, res) {
   var entry = blogEngine.getBlogEntry(req.params.id);
   res.render('article',{title:entry.title, blog:entry});
});

app.listen(3000);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

var express = require('express');

var app = express();

var hbs = require('hbs');

var blogEngine = require('./blog');

app.set('view engine', 'html');

app.engine('html', hbs.__express);

app.use(express.bodyParser());

app.get('/', function(req, res) {

res.render('index',{title:"My Blog", entries:blogEngine.getBlogEntries()});

});

app.get('/about', function(req, res) {

res.render('about', {title:"About Me"});

});

app.get('/article/:id', function(req, res) {

var entry = blogEngine.getBlogEntry(req.params.id);

res.render('article',{title:entry.title, blog:entry});

});

app.listen(3000);

我們用 require 引入資料集，如此可以呼叫它得到條目。

在主頁，我們給 render API 傳兩個引數，引數是一個物件，包含 title 和 entries 屬性。title 的值時字串，但是 entries 呼叫 blogEngine API 。我們傳的任何資料將對模版生效，主頁模版需要調整。

主頁模版程式碼

即使你從沒用過 Handlebars ，仍舊能猜到這裡的含義。#each 指令將迴圈一個陣列，{{}} 表示從部落格條目列表取到的引數。

建立一個佈局

你肯定關心剩下的 HTML 怎麼改，Express 用了模版引擎會自動支援佈局。這意味著我可以建立通用的網站設計佈局，Express 將利用它構造特定的頁面。按照約定，它取名 layout.something ，“something”是你使用的特定擴充套件。我們用了 HTML ，它就是 layout.html 。

layout.html 程式碼

關於頁面沒什麼亮點，我們跳過，下面看文章路由。URL 現在包含了標記 :id ，Express 可以建立動態的 URL ，用於對應請求引數。我們定義的連結像這樣： /article/

理論上，每一個部落格條目需要一個路由，但是建立一個抽象的路由匹配這些請求效果更好。 bodyParser （這一特性來源於 Connect 框架，的確對我很有幫助，它不僅支援查詢字串，而且支援表單主體，幾乎每個 Express 應用都會用到它。）