一、 Express 簡單介紹

Express 是一個基于 Node.js 平臺，快速、開放、極簡的 web 開發(fā)框架，它提供一系 列強(qiáng)大的特性，幫助你創(chuàng)建各種 Web 和移動設(shè)備應(yīng)用。

Express 官網(wǎng)：

• 英語官網(wǎng)：http://expressjs.com/
• 中文官網(wǎng)：http://www.expressjs.com.cn/

二、 Express 安裝使用

2.1 安裝：

安裝 Express 框架，就是使用 npm 的命令。

npm install express --save

–save 參數(shù)，表示自動修改 package.json 文件，自動添加依賴項(xiàng)。

2.2 簡單使用：

//1.引入 var express = require('express'); var app = express(); //2.配置路由 app.get('/', function (req, res) { res.send('Hello World!'); }); //3.監(jiān)聽端口 app.listen(3000,'127.0.0.1');

2.3 完整 Demo

var express=require('express'); /*引入 express*/ var app=new express(); /*實(shí)例化 express 賦值給 app*/ //配置路由 匹配 URl 地址實(shí)現(xiàn)不同的功能 app.get('/',function(req,res){ res.send('首頁'); }) app.get('/search',function(req,res){ res.send('搜索'); }) app.get('/login',function(req,res){ res.send('登錄'); }) app.get('/register',function(req,res){ res.send('注冊'); }) app.listen(3000);

三、 Express 框架中的路由

路由（Routing）是由一個 URI（或者叫路徑）和一個特定的 HTTP 方法（GET、POST 等） 組成的，涉及到應(yīng)用如何響應(yīng)客戶端對某個網(wǎng)站節(jié)點(diǎn)的訪問

3.1 簡單的路由配置

當(dāng)用 get 請求訪問一個網(wǎng)址的時候，做什么事情：

app.get("網(wǎng)址",function(req,res){ });

當(dāng)用 post 訪問一個網(wǎng)址的時候，做什么事情：

app.post("網(wǎng)址",function(req,res){});

user 節(jié)點(diǎn)接受 PUT 請求

app.put('/user', function (req, res) { res.send('Got a PUT request at /user'); });

user 節(jié)點(diǎn)接受 DELETE 請求

app.delete('/user', function (req, res) { res.send('Got a DELETE request at /user'); });

動態(tài)路由配置：

app.get("/user/:id",function(req,res){ var id = req.params["id"]; res.send(id); });

路由的正則匹配：（了解）

app.get('/ab*cd', function(req, res) { res.send('ab*cd'); });

路由里面獲取 Get 傳值:

app.get('/news, function(req, res) { console.log(req.query); });

四、 Express 框架中 ejs 的安裝

使用 Express 中 ejs 的安裝： npm install ejs --save
Express 中 ejs 的使用：

4.1 指定模板位置 ，默認(rèn)模板位置在 views

app.set('views', __dirname + '/views');

4.2 Ejs 引入模板

<%- include (‘header.ejs’) %>

4.3 Ejs 綁定數(shù)據(jù)

<%=h%>

4.4 Ejs 綁定 html 數(shù)據(jù)

<%-h%>

4.5 Ejs 模板判斷語句

<% if(true){ %> <div>true</div> <%} else{ %> <div>false</div> <%} %>

4.6 Ejs 模板中循環(huán)數(shù)據(jù)

<%for(var i=0;i<list.length;i++) { %> <li><%=list[i] %></li> <%}%>

4.7 == Ejs 后綴修改為 Html ==

這是一個小技巧，看著.ejs 的后綴總覺得不爽，使用如下方法，可以將模板文件的后綴換成我們習(xí)慣的.html。

在 app.js 的頭上定義 ejs:,代碼如下:
var ejs = require(‘ejs’);

注冊 html 模板引擎代碼如下：
app.engine(‘html’,ejs.__express);

將模板引擎換成 html 代碼如下:
app.set(‘view engine’, ‘html’);

修改模板文件的后綴為.html。

五、 利用 Express. static 托管靜態(tài)文件

1、如果你的靜態(tài)資源存放在多個目錄下面，你可以多次調(diào)用 express.static 中間件：

app.use(express.static('public'));

2、如果你希望所有通過 express.static 訪問的文件都存放在一個“虛擬（virtual）”目 錄（即目錄根本不存在）下面，可以通過為靜態(tài)資源目錄指定一個掛載路徑的方式來實(shí)現(xiàn)， 如下所示：

app.use('/public', express.static('public'));

現(xiàn)在，你就愛可以通過帶有 “/public” 前綴的地址來訪問 static目錄下 面的文件了。

六、 Express 中間件

通俗的講：中間件就是匹配路由之前或者匹配路由完成做的一系列的操作。中間件中如果想往下 匹配的話，那么需要寫 next()

中間件的功能包括：

執(zhí)行任何代碼。

修改請求和響應(yīng)對象。

終結(jié)請求-響應(yīng)循環(huán)。

調(diào)用堆棧中的下一個中間件。

如果我的 get、post 回調(diào)函數(shù)中，沒有 next 參數(shù)，那么就匹配上第一個路由，就不會往下匹 配了。如果想往下匹配的話，那么需要寫 next()

Express 應(yīng)用可使用如下幾種中間件：

應(yīng)用級中間件

路由級中間件

錯誤處理中間件

內(nèi)置中間件

第三方中間件

1、應(yīng)用級中間件

app.use(function(req,res,next){ /*匹配任何路由*/ //res.send('中間件'); console.log(new Date()); next(); /*表示匹配完成這個中間件以后程序繼續(xù)向下執(zhí)行*/ }) app.get('/',function(req,res){ res.send('根'); })app.get('/index',function(req,res){ res.send('首頁'); })

2、路由中間件

app.get("/article/add", (req, res, next) => {// res.send("add添加文章")console.log("add添加文章")next() })// 動態(tài)路由 app.get("/article/:id", (req,res) => {var id = req.params["id"]res.send("動態(tài)路由" + id) })

3、錯誤處理中間件

app.get('/index',function(req,res){ res.send('首頁'); })/*中間件相應(yīng) 404*/ app.use(function(req,res){ //res.render('404',{}); res.status(404).render('404',{}); })

4、內(nèi)置中間件

//靜態(tài)服務(wù) index.html app.use('/static',express.static("./static")); /*匹配所有的路徑*/ app.use('/news',express.static("./static")); /*匹配所有的路徑*/

5、第三方中間件
body-parser 中間件 第三方的 用來獲取 post 提交的數(shù)據(jù)

cnpm install body-parser --save

var bodyParser = require(‘body-parser’)

設(shè)置中間件
//處理 form 表單的中間件
// parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false }));
form 表單提交的數(shù)據(jù)
// parse application/json
app.use(bodyParser.json()); 提交的 json 數(shù)據(jù)的數(shù)據(jù)

req.body 獲取數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的Express 路由、Ejs 、静态文件托管、中间件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。