Express實用技巧和設計模式
1.Express介紹
Express是一個簡介、靈活的node.js web應用開發框架，是目前最流行的基于node.js的web開發框架，提供了一系列強大的功能，比如：
- 路由控制
- 中間件
- 靜態文件服務
- 模板解析
本文主要介紹這些功能的使用和它的設計理念
2.Express如何使用
本地安裝
$ npm install express
獲取、引用通過變量app（app其實在內部是application返回的一個handle函數，所有express的方法都在app上的原型方法） 我們可以調用express的方法
var express = require('express)
var app = express()
app.liten(3000)
3.路由控制
express通過匹配請求路徑，在做request、response操作，具體看下面get、post方法
-
Express的get方法
第一個參數path為請求路徑，第二個參數為處理請求的回調函數
app.get(path, function(req, res))get方法使用
const express = require('express'); const app = express(); //匹配htp://localhost:3000/hello做相關req，res的操作 app.get('/hello',function(req,res){ res.end('hello'); }); //匹配htp://localhost:3000/world做相關req，res的操作 app.get('/world',function(req,res){ res.end('world'); }); //匹配所有，主要用作not found app.get('*',function(req,res){ res.setHeader('Content-Type','text/plain;charset=utf8'); res.end('Not Found'); }); app.listen(3000); -
Express的post方法
第一個參數path為請求路徑，第二個參數為處理請求的回調函數和get一樣
app.post(path,function(req,res))post方法使用
var express = require('./express'); var app = express(); //匹配htp://localhost:3000/hello做相關req，res的操作 app.post('/hello', function (req,res) { res.end('hello'); }); //匹配所有，主要用作not found app.post('*', function (req,res) { res.end('post沒找到'); }); app.listen(3000);通過linux命令發送post請求
$ curl -X POST http://localhost:3000/hello -
Express的all方法
監聽所有的請求方法，可以匹配所有的HTTP動詞。根據請求路徑來處理客戶端發出的所有請求，參數同上
app.all(path,function(req, res))all方法使用
const express = require('express'); const app = express(); app.all('/world',function(req,res){ res.end('all world'); }); app.listen(3000); -
Express Router的設計理念
先看如下代碼
const express = require('express'); const app = express(); app.get('/user',function(req,res,next){ console.log(1); next(); },function(req,res,next){ console.log(11); next(); }).get('/world',function(req,res,next){ console.log(2); next(); }).get('/hello',function(req,res,next){ console.log(3); res.end('ok'); }); app.listen(3000);如上代碼，體現出express router的一個概念，就是二維數組的二維數據形式，這個概念的主要意義是：在router路由容器中存放一層層route實例，并且每層route實例中存放一層層callback，當匹配上一個route的時候，執行它里面的callback
如下圖所示
再router和route中分別用stack存儲，不同的是Router中的stack存放的是Route，并且根據相同路由匹配，遍歷Stack中相關Route，其中handle方法是掛載到layer上面的Route，并且觸發Route從而遍歷Route中的Stack，在Route中的Stack存放的是一層層的callback，所以最終調用所有callback在同一個匹配路徑上，其中核心原理就是這個二維數組的二維數據形式
4.中間件
中間件就是處理HTTP請求的函數，用來完成各種特定的任務，比如檢查用戶是否登錄、檢測用戶是否有權限訪問等，它的特點是：
一個中間件處理完請求和響應可以把相應數據再傳遞給下一個中間件
回調函數的next參數,表示接受其他中間件的調用，函數體中的next(),表示將請求數據繼續傳遞
可以根據路徑來區分返回執行不同的中間件
-
1.中間件的使用
主要通過use方法
var express = require('express'); var app = express(); app.use(function (req,res,next) { console.log('全部匹配'); next(); }); app.use('/water', function (req,res,next) { console.log('只匹配/water'); next(); }); app.get('/water', function (req,res) { res.end('water'); }); app.listen(3000);2.中間件原理
通過Application原型上的use方法，將Router變函數，抽象出Router方法復用，Router處理中間件，其實就是上面所講述的路由控制原理，看如下代碼，可以用app下面的use方法調取中間件，也可以創建一個express.router，在通過app下面use調用這個中間件，形成一個父子級別的中間件路由，下面user.use就是當訪問/user/或者/user/2的子路由
const express = require('../'); const app = express(); app.use(function(req,res,next){ console.log('Ware1:',Date.now()); next('wrong'); }); app.get('/',function(req,res,next){ res.end('1'); }); const user = express.Router(); user.use(function(req,res,next){ console.log('Ware2',Date.now()); next(); }); user.use('/2',function(req,res,next){ res.end('2'); }); app.use('/user',user); app.use(function(err,req,res,next){ res.end('catch '+err); }); app.listen(3000,function(){ console.log('server started at port 3000'); });3.中間件設計模式
主要思想就是Application有一個router屬性指向了Router函數，在Router中返回一個router函數，將get/handle等方法掛載到返回的router上面，其實express.Router()方法就是Router函數。并且中間件和普通的路由都是在Router的stack中，如圖所示
5.靜態服務文件
如果要在網頁中加載靜態文件（css、js、img），就需要另外指定一個存放靜態文件的目錄，當瀏覽器發出非HTML文件請求時，服務器端就會到這個目錄下去尋找相關文件
var express = require('express');
var app = express();
var path = require('path');
app.use(express.static(path.join(__dirname,'public')));
app.listen(3000);
-
靜態文件服務器實現
static屬于express內置中間件，其中原理主要是調用了serve-static庫，具體實現是原生node.js API，可以查看我寫的一篇如何搭建靜態服務器 static-server
6.模板解析
這里主要說的是ejs模板，具體API請查閱 EJS官網
-
安裝ejs
$ npm install ejs -
設置模板
var express = require('express'); var path = require('path'); var app = express(); app.set('view engine','ejs'); app.set('views',path.join(__dirname,'views')); app.listen(3000); -
渲染html
app.set('view engine','html') app.set('views',path.join(__dirname,'views')); app.engine('html',require('ejs').__express); -
渲染視圖
- 第一個參數 要渲染的模板
- 第二個參數 渲染所需要的數據
app.get('/', function (req,res) { res.render('hello',{title:'hello'},function(err,data){}); }); -
模板的實現
res.render = function (name, data) { var viewEngine = engine.viewEngineList[engine.viewType]; if (viewEngine) { viewEngine(path.join(engine.viewsPath, name + '.' + engine.viewType), data, function (err, data) { if (err) { res.status(500).sendHeader().send('view engine failure' + err); } else { res.status(200).contentType('text/html').sendHeader().send(data); } }); } else { res.status(500).sendHeader().send('view engine failure'); } }
7.結語
本篇文章主要介紹核心功能和核心代碼思想，其余的方法如：redirect(重定向)、body-parser(請求體解析)、send方法等等不做介紹，具體請查閱下方給出的相關教程
8.博客
有任何問題可留言或者發送本人郵箱ngaiwe@126.com
