Express （Routing、Middleware、託管靜態文件、view engine 等等）
1. Express 簡介
Express 是基於 Node.js 平臺，快速、開放、極簡的 web 開發框架，它提供一系列強大的特性，幫助你建立各類 Web 和移動設備應用。css
Express 不對 Node.js 已有的特性進行二次抽象，咱們只是在它之上擴展了 Web 應用所需的基本功能。html
Express 是一個自身功能極簡，徹底是由路由和中間件構成一個的 web 開發框架：從本質上來講，一個 Express 應用就是在調用各類中間件。node
API 方面：豐富的 HTTP 快捷方法和任意排列組合的 Connect 中間件，讓你建立健壯、友好的 API 變得既快速又簡單。git
特性：github
- Robust routing
- Focus on high performance
- Super-high test coverage
- HTTP helpers (redirection, caching, etc)
- View system supporting 14+ template engines
- Content negotiation
- Executable for generating applications quickly
安裝和 hello world
--save：安裝模塊時，若是指定了 --save 參數，那麼此模塊將被添加到 package.json 文件中 dependencies 依賴列表中。 而後經過 npm install 命令便可自動安裝依賴列表中所列出的全部模塊。若是隻是臨時安裝，不想將它添加到依賴列表中，只需略去 --save 參數便可web
踩坑：我在安裝的時候，建立了一個叫 express 的項目文件夾，初始化以後，安裝 express，出錯（Refusing to install express as a dependency of itself）。緣由是，項目文件夾的名字和所要安裝的項目依賴重名了，其實此時 package.json 文件中的名字也是 express，這樣會出錯，不能同名，因此要刪除一切重來。正則表達式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
工做目錄
mkdir myapp
cd myapp
#
經過 npm init 命令爲你的應用建立一個 package.json 文件
npm init
#
應用的入口文件
entry point: app.js
#
安裝 Express 並將其保存到依賴列表中
npm install express --save
|
下面的代碼啓動一個服務並監遵從 3000 端口進入的全部鏈接請求。他將對全部 (/) URL 或 路由 返回 hello world 字符串。對於其餘全部路徑所有返回 404 Not Found。express
req (request，請求) 和 res (response，響應) 與 Node 提供的對象徹底一致，所以，你能夠調用 req.pipe()、req.on('data', callback) 以及任何 Node 提供的方法。npm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const express =
require(
'express');
let app = express();
app.get(
'/',
function (req,res) {
res.send(
'hello world');
});
let server = app.listen(
3000,
function () {
let host = server.address().address;
let port = server.address().port;
console.log(
`app listening at port: ${port}`);
});
|
|
1
2
3
4
|
# 啓動此應用
$
node
app.js
http://localhost:
3000/
|
Express 應用生成器
經過應用生成器工具， express 能夠快速建立一個應用的骨架。json
經過 Express 應用生成器建立應用只是衆多方法中的一種，你能夠根據本身的需求修改它
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
安裝
npm install express-generator -g
#
列出全部可用命令
express -h
#
初始化一個 express 項目
express myapp
cd myapp
#
而後安裝全部依賴包
npm install
#
啓動此應用
npm start
http://localhost:3000/
|
2. 路由（Routing）
http://www.expressjs.com.cn/guide/routing.html
路由是指如何定義應用的端點（URIs）以及如何響應客戶端的請求。
路由（Routing）是由一個 URI（路徑）和一個特定的 HTTP 方法（get、post、put、delete 等）組成的，涉及到應用如何響應客戶端對某個網站節點的訪問。
結構
路由的定義由以下結構組成：
app是一個 express 實例method是某個 HTTP 請求方式中的一個，Express 定義了以下和 HTTP 請求對應的路由方法：get, post, put, head, delete, options, trace, copy, lock, mkcol, move, purge, propfind, proppatch, unlock, report, mkactivity, checkout, merge, m-search, notify, subscribe, unsubscribe, patch, search, connect。有些路由方法名不是合規的 JavaScript 變量名，此時使用括號記法，好比：app['m-search']('/', function ...path是服務器端的路徑handler每個路由均可以有一個或者多個處理器函數，當匹配到路由時，這些函數將被執行。
|
1
|
app.method(path, [
handler...],
handler)
|
|
1
2
3
4
|
// respond with "hello world" when a GET request is made to the homepage
app.get(
'/',
function (req, res) {
res.send(
'Hello World!');
});
|
app.all() 是一個特殊的路由方法，沒有任何 HTTP 方法與其對應，它的做用是對於一個路徑上的全部請求加載中間件。
在下面的例子中，來自 /secret 的請求，無論使用 GET、POST 或其餘任何HTTP 請求，句柄都會獲得執行。
|
1
2
3
4
5
|
app.all(
'/secret',
function (req, res, next) {
res.send(
'GET request to the secret section');
console.log(
'Accessing the secret section ...');
next();
// pass control to the next handler
});
|
路由路徑 path
路由路徑和請求方法一塊兒定義了請求的端點，它能夠是字符串、字符串模式或者正則表達式。
使用字符串的路由路徑示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 匹配根路徑的請求
app.get(
'/',
function (req, res) {
res.send(
'root');
});
// 匹配 /about 路徑的請求
app.get(
'/about',
function (req, res) {
res.send(
'about');
});
// 匹配 /random.text 路徑的請求
app.get(
'/random.text',
function (req, res) {
res.send(
'random.text');
});
|
使用字符串模式的路由路徑示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 匹配 acd 和 abcd
app.get(
'/ab?cd',
function(req, res) {
res.send(
'ab?cd');
});
// 匹配 /abe 和 /abcde
app.get(
'/ab(cd)?e',
function(req, res) {
res.send(
'ab(cd)?e');
});
// 匹配 abcd、abbcd、abbbcd等
app.get(
'/ab+cd',
function(req, res) {
res.send(
'ab+cd');
});
// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get(
'/ab*cd',
function(req, res) {
res.send(
'ab*cd');
});
|
使用正則表達式的路由路徑示例：
|
1
2
3
4
5
6
7
8
9
|
// 匹配任何路徑中含有 a 的路徑：
app.get(
/a/,
function(req, res) {
res.send(
'/a/');
});
// 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
app.get(
/.*fly$/,
function(req, res) {
res.send(
'/.*fly$/');
});
|
路由句柄 handler
Can’t set headers after they are sent.
能夠爲請求處理提供多個回調函數，其行爲相似 中間件。惟一的區別是這些回調函數有可能調用 next(‘route’) 方法而略過其餘路由回調函數。能夠利用該機制爲路由定義前提條件，若是在現有路徑上繼續執行沒有意義，則可將控制權交給剩下的路徑。
路由句柄有多種形式，能夠是一個函數、一個函數數組，或者是二者混合，以下所示.
使用一個回調函數處理路由：
|
1
2
3
|
app.get(
'/example/a',
function (req, res) {
res.send(
'Hello from A!');
});
|
使用多個回調函數處理路由（記得指定 next 對象）：
|
1
2
3
4
5
6
|
app.get(
'/example/b',
function (req, res, next) {
console.
log(
'response will be sent by the next function ...');
next();
},
function (req, res) {
res.send(
'Hello from B!');
});
|
使用回調函數數組處理路由：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var cb0 =
function (req, res, next) {
console.log(
'CB0');
next();
}
var cb1 =
function (req, res, next) {
console.log(
'CB1');
next();
}
var cb2 =
function (req, res) {
res.send(
'Hello from C!');
}
app.get(
'/example/c', [cb0, cb1, cb2]);
|
混合使用函數和函數數組處理路由：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var cb0 =
function (req, res, next) {
console.
log(
'CB0');
next();
}
var cb1 =
function (req, res, next) {
console.
log(
'CB1');
next();
}
app.get(
'/example/d', [cb0, cb1],
function (req, res, next) {
console.
log(
'response will be sent by the next function ...');
next();
},
function (req, res) {
res.send(
'Hello from D!');
});
|
響應方法 res
下表中響應對象（res）的方法向客戶端返回響應，終結請求響應的循環。若是在路由句柄中一個方法也不調用，來自客戶端的請求會一直掛起。
app.route()
可以使用 app.route() 建立路由路徑的鏈式路由句柄。因爲路徑在一個地方指定，這樣作有助於建立模塊化的路由，並且減小了代碼冗餘和拼寫錯誤。
|
1
2
3
4
5
6
7
8
9
10
|
app.route(
'/book')
.get(
function(req, res) {
res.send(
'Get a random book');
})
.post(
function(req, res) {
res.send(
'Add a book');
})
.put(
function(req, res) {
res.send(
'Update the book');
});
|
express.Router
可以使用 express.Router 類建立模塊化、可掛載的路由句柄。
下面的實例程序建立了一個路由模塊，並加載了一箇中間件，定義了一些路由，而且將它們掛載至應用的路徑上。
在 app 目錄下建立名爲 birds.js 的文件，內容以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var express =
require(
'express');
var router = express.Router();
// 該路由使用的中間件
router.use(
function timeLog(req, res, next) {
console.log(
'Time: ',
Date.now());
next();
});
// 定義網站主頁的路由
router.get(
'/',
function(req, res) {
res.send(
'Birds home page');
});
// 定義 about 頁面的路由
router.get(
'/about',
function(req, res) {
res.send(
'About birds');
});
module.exports = router;
|
而後在應用中加載路由模塊，應用便可處理髮自 /birds 和 /birds/about 的請求，而且調用爲該路由指定的 timeLog 中間件。
|
1
2
3
|
var birds =
require(
'./birds');
...
app.
use(
'/birds', birds);
|
3. 中間件（Middleware）
http://www.expressjs.com.cn/guide/using-middleware.html
中間件列表：https://github.com/senchalabs/connect#middleware
Express 是一個自身功能極簡，徹底是由路由和中間件構成一個的 web 開發框架：從本質上來講，一個 Express 應用就是在調用各類中間件。
中間件（Middleware） 是一個函數，它能夠訪問請求對象（req），響應對象（res），和 web 應用中處於請求-響應循環流程中的中間件，通常被命名爲 next 的變量。
中間件的功能包括：
- 執行任何代碼。
- 修改請求和響應對象。
- 終結請求-響應循環。
- 調用堆棧中的下一個中間件。
注意：若是當前中間件沒有終結請求-響應循環，則必須調用 next() 方法將控制權交給下一個中間件，不然請求就會掛起。
app.use
|
1
|
app.
use([path],
function)
|
Use the given middleware function, with optional mount path, defaulting to 「/「.
一箇中間件處理器，請求來了，讓那些中間件先處理一遍
- 沒有掛載路徑的中間件，應用的每一個請求都會執行該中間件
- 掛載至 /path 的中間件，任何指向 /path 的請求都會執行它
中間件分類
Express 應用可以使用以下幾種中間件：
- 應用級中間件
- 路由級中間件
- 錯誤處理中間件
- 內置中間件
- 第三方中間件
1. 應用級中間件
應用級中間件綁定到 app 對象 使用 app.use() 和 app.METHOD()， 其中， METHOD 是須要處理的 HTTP 請求的方法，例如 GET, PUT, POST 等等，所有小寫。例如：
|
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
26
27
|
var app = express();
// 沒有掛載路徑的中間件，應用的每一個請求都會執行該中間件
app.use(
function (req, res, next) {
console.log(
'Time:',
Date.now());
next();
});
// 掛載至 /user/:id 的中間件，任何指向 /user/:id 的請求都會執行它
app.use(
'/user/:id',
function (req, res, next) {
console.log(
'Request Type:', req.method);
next();
});
// 路由和句柄函數(中間件系統)，處理指向 /user/:id 的 GET 請求
app.get(
'/user/:id',
function (req, res, next) {
res.send(
'USER');
});
// 一箇中間件棧，對任何指向 /user/:id 的 HTTP 請求打印出相關信息
app.use(
'/user/:id',
function(req, res, next) {
console.log(
'Request URL:', req.originalUrl);
next();
},
function (req, res, next) {
console.log(
'Request Type:', req.method);
next();
});
|
2. 路由級中間件
路由級中間件和應用級中間件同樣，只是它綁定的對象爲 express.Router()。路由級使用 router.use() 或 router.VERB() 加載。
上述在應用級建立的中間件系統，可經過以下代碼改寫爲路由級：
|
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
26
27
28
29
30
31
32
33
34
35
36
37
|
var app = express();
var router = express.Router();
// 沒有掛載路徑的中間件，經過該路由的每一個請求都會執行該中間件
router.use(
function (req, res, next) {
console.log(
'Time:',
Date.now());
next();
});
// 一箇中間件棧，顯示任何指向 /user/:id 的 HTTP 請求的信息
router.use(
'/user/:id',
function(req, res, next) {
console.log(
'Request URL:', req.originalUrl);
next();
},
function (req, res, next) {
console.log(
'Request Type:', req.method);
next();
});
// 一箇中間件棧，處理指向 /user/:id 的 GET 請求
router.get(
'/user/:id',
function (req, res, next) {
// 若是 user id 爲 0, 跳到下一個路由
if (req.params.id ==
0) next(
'route');
// 負責將控制權交給棧中下一個中間件
else next();
//
},
function (req, res, next) {
// 渲染常規頁面
res.render(
'regular');
});
// 處理 /user/:id， 渲染一個特殊頁面
router.get(
'/user/:id',
function (req, res, next) {
console.log(req.params.id);
res.render(
'special');
});
// 將路由掛載至應用
app.use(
'/', router);
|
3. 錯誤處理中間件
http://www.expressjs.com.cn/guide/error-handling.html
錯誤處理中間件和其餘中間件定義相似，只是必需要使用 4 個參數(err, req, res, next)。即便不須要 next 對象，也必須在簽名中聲明它，不然中間件會被識別爲一個常規中間件，不能處理錯誤。
錯誤處理中間件應當在在其餘 app.use() 和路由調用以後才能加載，好比：
|
1
2
3
4
5
6
7
8
9
10
|
var bodyParser =
require(
'body-parser');
var methodOverride =
require(
'method-override');
app.
use(bodyParser());
app.
use(methodOverride());
app.
use(
function(err, req, res, next) {
// 業務邏輯
console.error(err.stack);
res.status(
500).send(
'Something broke!');
});
|
中間件返回的響應是隨意的，能夠響應一個 HTML 錯誤頁面、一句簡單的話、一個 JSON 字符串，或者其餘任何您想要的東西。
爲了便於組織（更高級的框架），您可能會像定義常規中間件同樣，定義多個錯誤處理中間件。好比您想爲使用 XHR 的請求定義一個，還想爲沒有使用的定義一個，那麼：
|
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
26
27
28
29
|
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
app.
use(bodyParser());
app.
use(methodOverride());
app.
use(logErrors);
app.
use(clientErrorHandler);
app.
use(errorHandler);
// logErrors 將請求和錯誤信息寫入標準錯誤輸出、日誌或相似服務：
function logErrors(
err, req, res, next) {
console.
error(
err.
stack);
next(
err);
}
// clientErrorHandler 的定義以下（注意這裏將錯誤直接傳給了 next）：
function clientErrorHandler(
err, req, res, next) {
if (req.xhr) {
res.status(500).send({
error: 'Something blew up!' });
}
else {
next(
err);
}
}
// errorHandler 能捕獲全部錯誤，其定義以下：
function errorHandler(
err, req, res, next) {
res.status(500);
res.render('
error', {
error:
err });
}
|
4. 內置中間件
Express 之前內置的中間件如今已經所有單獨做爲模塊安裝使用了
express.static 是 Express 惟一內置的中間件，它基於 serve-static，負責在 Express 應用中提託管靜態資源。
5. 第三方中間件
第三方中間件列表：http://www.expressjs.com.cn/resources/middleware.html
下面的例子安裝並加載了一個解析 cookie 的中間件： cookie-parser
|
1
|
npm install cookie-parser
|
|
1
2
3
4
5
6
|
var express =
require(
'express');
var app = express();
var cookieParser =
require(
'cookie-parser');
// 加載用於解析 cookie 的中間件
app.
use(cookieParser());
|
4. 託管靜態文件
經過 Express 內置的 express.static 能夠方便地託管靜態文件，例如圖片、CSS、JavaScript 文件等。
將靜態資源文件所在的目錄做爲參數傳遞給 express.static 中間件就能夠提供靜態資源文件的訪問了。
使用
全部文件的路徑都是相對於存放目錄的，所以，存放靜態文件的目錄名不會出如今 URL 中。
假設在 public 目錄放置了圖片、CSS 和 JavaScript 文件，你就能夠：
|
1
|
app.
use(express.
static(
'public'));
|
如今，public 目錄下面的文件就能夠訪問了。
- http://localhost:3000/images/kitten.jpg
- http://localhost:3000/css/style.css
- http://localhost:3000/js/app.js
- http://localhost:3000/hello.html
若是你的靜態資源存放在多個目錄下面，你能夠屢次調用 express.static 中間件：
訪問靜態資源文件時，express.static 中間件會根據目錄添加的順序查找所需的文件。
|
1
2
|
app.
use(express.
static(
'public'));
app.
use(express.
static(
'files'));
|
若是你但願全部經過 express.static 訪問的文件都存放在一個虛擬目錄中（即目錄根本不存在），能夠經過爲靜態資源目錄指定一個掛載路徑的方式來實現，以下所示：
|
1
|
app.
use(
'/static', express.
static(
'public'));
|
如今，你就愛能夠經過帶有 /static 前綴的地址來訪問 public 目錄下面的文件了。
- http://localhost:3000/static/images/kitten.jpg
- http://localhost:3000/static/css/style.css
- http://localhost:3000/static/js/app.js
- http://localhost:3000/static/images/bg.png
- http://localhost:3000/static/hello.html
__dirname
在任何模塊文件內部，可使用__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑。
|
1
|
console.
log(
__dirname);
|
path.join()
Arguments to path.join must be strings
將多個參數組合成一個 path，句法：
|
1
|
path
.join(
[path1],
[path2],
[...])
|
因爲該方法屬於path模塊，使用前須要引入path 模塊
|
1
2
3
4
5
6
7
8
|
const express =
require(
'express');
const path =
require(
'path');
var app = express();
app.set(
'views', path.join(__dirname,
'views'));
app.
use(express.
static(path.join(__dirname,
'public')));
|
5. 在 Express 中使用模板引擎
安裝相應的模板引擎 npm 軟件包，不須要在頁面 require('pug');
|
1
|
npm install pug --save
|
編寫模板文件
|
1
2
3
4
5
|
html
head
title!= title
body
h1!= message
|
而後建立一個路由，來渲染模板文件，模板文件會被渲染爲 HTML。若是沒有設置 view engine，您須要指明視圖文件的後綴，不然就會遺漏它。
views存放模板文件的目錄view engine註冊模板引擎
|
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
26
27
|
const express =
require(
'express');
let app = express();
// view engine setup
app.set(
'views', [
'./v']);
app.set(
'view engine',
'pug');
// http://localhost:3000/index
app.get(
'/index',
function(req, res) {
res.render(
'index', {
title:
'Hey',
message:
'view engine, Hello there!'
});
});
// 首頁路由
app.get(
'/',
function (req,res) {
res.send(
'index routing, hello world');
});
let server = app.listen(
3000,
function() {
let host = server.address().address;
let port = server.address().port;
console.log(
`app listening at port: ${port}`);
});
|
6. Express 4 遷移
http://www.expressjs.com.cn/guide/migrating-4.html
Express 4 是對 Express 3 的一個顛覆性改變，也就是說若是您更新了 Express， Express 3 應用會沒法工做。
1. 對 Express 內核和中間件系統的改進
Express 4 再也不依賴 Connect，並且從內核中移除了除 express.static 外的全部內置中間件。
也就是說如今的 Express 是一個獨立的路由和中間件 Web 框架，Express 的版本升級再也不受中間件更新的影響。
移除了內置的中間件後，您必須顯式地添加全部運行應用須要的中間件。請遵循以下步驟：
- 安裝模塊：
npm install --save <module-name> - 在應用中引入模塊：
require('module-name') - 按照文檔的描述使用模塊：
app.use( ... )
下表列出了 Express 3 和 Express 4 中對應的中間件：
2. 路由系統
應用如今隱式地加載路由中間件，所以不須要擔憂涉及到 router 中間件對路由中間件加載順序的問題了。
定義路由的方式依然未變，可是新的路由系統有兩個新功能能幫助您組織路由：
- 添加了一個新類
express.Router，能夠建立可掛載的模塊化路由句柄。 - 添加了一個新方法
app.route()，能夠爲路由路徑建立鏈式路由句柄。
3. 其餘變化
運行
|
1
|
node
.
|
遷移
卸載 Express 3 應用生成器：
|
1
|
npm uninstall -g express
|
而後安裝新的生成器：
|
1
|
npm install -g express-generator
|
- 1. express託管同目錄靜態文件
- 2. 【NodeJS】---express配置ejs mongoose route等
- 3. NodeJS express訪問html,css,JS等靜態資源文件
- 4. NodeJS + express訪問html、css、JS等靜態資源文件
- 5. Express 文檔（靜態文件）
- 6. Node實戰（三）靜態文件的託管
- 7. DJango配置css等靜態文件
- 8. django加載css等靜態文件
- 9. django 添加 css 等靜態文件
- 10. S3靜態託管
- 更多相關文章...
- • IP地址分配（靜態分配+動態分配+零配置） - TCP/IP教程
- • R CSV 文件 - R 語言教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 委託模式
-
每一个你不满意的现在，都有一个你没有努力的曾经。