本篇文章帶大家了解一下node中的express路由，介紹一下基本使用方法，希望對大家有所幫助！

1. 路由的概念

1.1 什么是路由

廣義上來講，路由就是映射關(guān)系。

現(xiàn)實生活中

按鍵 1  ->  業(yè)務(wù)查詢 按鍵 2  ->  手機(jī)充值 按鍵 3  ->  業(yè)務(wù)辦理 按鍵 4  ->  密碼服務(wù)與停復(fù)機(jī) 按鍵 5  ->  家庭寬帶 按鍵 6  ->  話費流量 按鍵 8  ->  集團(tuán)業(yè)務(wù) 按鍵 0  ->  人工服務(wù)  在這里，路由是按鍵與服務(wù)之間的映射關(guān)系

1.2 nodejs中的路由

nodejs中的路由其實就是url地址和響應(yīng)函數(shù)之間的映射關(guān)系，一個url地址響應(yīng)一個html頁面。

就是將一個路徑匹配關(guān)系的業(yè)務(wù)提取到一個單獨的js文件當(dāng)中.

2. Express

2.1 Express 簡介

基于 Node.js 平臺，快速、開放、極簡的 web 開發(fā)框架

• express 官網(wǎng)（http://expressjs.com/）
• express 中文網(wǎng)（http://expressjs.com.cn/）

1. Express 的作用和 Node.js 內(nèi)置的 http 模塊類似，是專門用來創(chuàng)建 Web 服務(wù)器的。
2. Express 的本質(zhì)：就是一個 npm 上的第三方包，提供了快速創(chuàng)建 Web 服務(wù)器的便捷方法。

進(jìn)一步了解express

思考：不使用 Express 能否創(chuàng)建 Web 服務(wù)器？
答案：能，使用 Node.js 提供的原生 http 模塊即可。

思考：既生瑜何生亮（有了 http 內(nèi)置模塊，為什么還有用 Express）？
答案：http 內(nèi)置模塊用起來很復(fù)雜，開發(fā)效率低；Express 是基于內(nèi)置的 http 模塊進(jìn)一步封裝出來的，能夠極大的提高開發(fā)效率。

思考：http 內(nèi)置模塊與 Express 是什么關(guān)系？
答案：類似于瀏覽器中 Web API 和 jQuery 的關(guān)系。后者是基于前者進(jìn)一步封裝出來的。

2.2 基本使用步驟

• 安裝：npm i express

// 導(dǎo)入 express var express = require('express'); // 創(chuàng)建 express實例，也就是創(chuàng)建 express服務(wù)器 var app = express();   // 啟動服務(wù)器 app.listen(3000, function () {   console.log('服務(wù)器已啟動') })

監(jiān)聽get請求

通過 app.get() 方法，可以監(jiān)聽客戶端的 GET 請求，具體的語法格式如下：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-wu5WkyIV-1639963661922)(images3/image-20200529231606651.png)]

監(jiān)聽post請求

通過 app.post() 方法，可以監(jiān)聽客戶端的 POST 請求，具體的語法格式如下：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-wzB8FFER-1639963661923)(images3/image-20200529231710830.png)]

響應(yīng)內(nèi)容給客戶端

通過 res.send() 方法，可以把處理好的內(nèi)容，發(fā)送給客戶端：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Iiifw7XV-1639963661924)(images3/image-20200529231837638.png)]

2.3 req屬性詳解

獲取get請求的參數(shù)

通過 req.query 對象，可以獲取到客戶端通過GET方式，發(fā)送到服務(wù)器的參數(shù)：

比如：http://127.0.0.1:3000/index?id=10&name=tom&age=20

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-WUoF7b2h-1639963661925)(images3/image-20200529231928577.png)]

獲取post請求的參數(shù)

通過req.body可以獲取post請求的參數(shù)，但是需要配合body-parser中間件

不再需要使用req.on(‘data’,chunk=>{}) req.on(‘end’,()=>{})

如果沒有這個中間件的話，則默認(rèn)獲取的是undefined.

// 最新的express版本，不再需要body-parse的下載支持了，直接按如下的方式來書寫即可  app.use(express.urlencoded({ extended: true })) app.post('/index',(req,res)=>{   console.log(req.body); })

2.4 res屬性詳解

// send() 發(fā)送數(shù)據(jù)給客戶端，并自動設(shè)置Content-Type res.send()  //用于向瀏覽器客戶端響應(yīng)數(shù)據(jù) 會自帶合適的響應(yīng)頭  // 發(fā)送文件給瀏覽器，并根據(jù)文件后綴名自動設(shè)置Content-Type // 注意：文件路徑必須是絕對路徑 res.sendFile(path.join(__dirname, 'index.html'))  // 設(shè)置響應(yīng)頭 res.set('Content-Type', 'text/plain') res.set({   'Content-Type': 'text/plain',   'cute': 'fangfang' })  // 重定向  res.redirect('/index')

2.5 express路由處理

基本使用

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-D3rId34r-1639963661925)(images3/image-20200529233016669.png)]

• app.get(path, callback)
• app.post(path, callback)

• app.use(path, callback) 更重要的作用是處理中間件
  • 注意：只要是以path開頭的請求地址，都可以被use處理
  • 注意：可以處理任意的請求類型
  • 注意：path參數(shù)可省略，默認(rèn)值為：/

// all可以匹配任何提交方式 get和post都可以 app.all('*',(req,res)=>{  // 做一個其它比較友好界面 響應(yīng)給瀏覽器   res.send('頁面還沒完成，請等待...') })

路由的匹配過程

每當(dāng)一個請求到達(dá)服務(wù)器之后，需要先經(jīng)過路由的匹配，只有匹配成功之后，才會調(diào)用對應(yīng)的處理函數(shù)。

在匹配時，會按照路由的順序進(jìn)行匹配，如果請求類型和請求的 URL 同時匹配成功，則 Express 會將這次請求，轉(zhuǎn)交給對應(yīng)的 function 函數(shù)進(jìn)行處理。

路由匹配的注意點：

①按照定義的先后順序進(jìn)行匹配

②請求類型和請求的URL同時匹配成功，才會調(diào)用對應(yīng)的處理函數(shù)

全局掛載路由

在 Express 中使用路由最簡單的方式，就是把路由掛載到 app 上，示例代碼如下

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-pdjsILgz-1639963661927)(images3/image-20200529233254606.png)]

2.6 模塊化路由

為了方便對路由進(jìn)行模塊化的管理，Express 不建議將路由直接掛載到 app 上，而是推薦將路由抽離為單獨的模塊。

將路由抽離為單獨模塊的步驟如下：

①創(chuàng)建路由模塊對應(yīng)的 .js 文件 router.js

②調(diào)用 express.Router() 函數(shù)創(chuàng)建路由對象

③向路由對象上掛載具體的路由

④使用 module.exports 向外共享路由對象

⑤使用 app.use() 函數(shù)注冊路由模塊

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-3fEDx0H3-1639963661928)(images3/image-20200529233324503.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-QAUKjV4x-1639963661931)(images3/image-20200529233330060.png)]

2.7 靜態(tài)資源處理

基本使用

express 提供了一個非常好用的函數(shù)，叫做 express.static()，通過它，我們可以非常方便地創(chuàng)建一個靜態(tài)資源服務(wù)器，例如，通過如下代碼就可以將 public 目錄下的圖片、CSS 文件、**JavaScript **文件對外開放訪問了：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-C1BTBqzr-1639963661933)(images3/image-20200529232407154.png)]

現(xiàn)在，你就可以訪問 public 目錄中的所有文件了： http://localhost:3000/images/bg.jpg http://localhost:3000/css/style.css http://localhost:3000/js/login.js  注意：Express 在指定的靜態(tài)目錄中查找文件，并對外提供資源的訪問路徑。 因此，存放靜態(tài)文件的目錄名不會出現(xiàn)在 URL 中。

托管多個資源目錄

如果要托管多個靜態(tài)資源目錄，請多次調(diào)用 express.static() 函數(shù)：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Px6ZUuaQ-1639963661934)(images3/image-20200529232555610.png)]

上面的設(shè)置需要注意的是：在html頁面中的那些靜態(tài)資源路徑一定不要在出現(xiàn)public

訪問靜態(tài)資源文件時，express.static() 函數(shù)會根據(jù)目錄的添加順序查找所需的文件。

掛載路徑前綴

如果希望在托管的靜態(tài)資源訪問路徑之前，掛載路徑前綴，則可以使用如下的方式：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-e13liOYs-1639963661934)(images3/image-20200529232626696.png)]

現(xiàn)在，你就可以通過帶有 /public 前綴地址來訪問 public 目錄中的文件了： http://localhost:3000/public/images/kitten.jpg http://localhost:3000/public/css/style.css http://localhost:3000/public/js/app.js

2.8 express中間件

什么是中間件

中間件（Middleware ）其實就是一個函數(shù)，特指業(yè)務(wù)流程的中間處理環(huán)節(jié)。

分為全局中間件和路由中間件。

中間件分為兩種 一個是全局中間件 一個是路由中間件

現(xiàn)實生活中的例子

處理污水的這中間處理環(huán)節(jié)，就可以叫做中間件。

express中的中間件

當(dāng)一個請求到達(dá) Express 的服務(wù)器之后，可以連續(xù)調(diào)用多個中間件，從而對這次請求進(jìn)行預(yù)處理。

基本使用

Express 的中間件，本質(zhì)上就是一個 function 處理函數(shù)，Express 中間件的格式如下：

const mw = function(req, res, next) {   next() } app.use(mw)

注意：中間件函數(shù)的形參列表中，必須包含 next 參數(shù)。而路由處理函數(shù)中只包含 req 和 res。

next函數(shù)的作用： next 函數(shù)是實現(xiàn)多個中間件連續(xù)調(diào)用的關(guān)鍵，它表示把流轉(zhuǎn)關(guān)系轉(zhuǎn)交給下一個中間件或路由。

中間件的作用

多個中間件之間，共享同一份 req 和 res?；谶@樣的特性，我們可以在上游的中間件中，統(tǒng)一為 req 或 res 對象添加自定義的屬性或方法，供下游的中間件或路由進(jìn)行使用。

定義多個中間件

可以使用 app.use() 連續(xù)定義多個全局中間件。客戶端請求到達(dá)服務(wù)器之后，會按照中間件定義的先后順序依次進(jìn)行調(diào)用，示例代碼如下：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-s5pYXD4F-1639963661937)(images3/image-20200529233901695.png)]

express內(nèi)置中間件

自 Express 4.16.0 版本開始，Express 內(nèi)置了 3 個常用的中間件，極大的提高了 Express 項目的開發(fā)效率和體驗：

① express.static 快速托管靜態(tài)資源的內(nèi)置中間件，例如： HTML 文件、圖片、CSS 樣式等（無兼容性）

② express.json 解析 JSON 格式的請求體數(shù)據(jù)（有兼容性，僅在 4.16.0+ 版本中可用）

③ express.urlencoded 解析 URL-encoded 格式的請求體數(shù)據(jù)（有兼容性，僅在 4.16.0+ 版本中可用）

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-WJaSINca-1639963661937)(images3/image-20200529234155137.png)]

3.EJS模板

3.1 ejs介紹

ejs是一個高效的javascript模板引擎，是為了使用戶頁面與業(yè)務(wù)數(shù)據(jù)(分離)而產(chǎn)生的。

簡單來說，使用ejs模板引擎就可以幫助我們快速的將數(shù)據(jù)渲染到頁面對應(yīng)的位置，和art-template模板類似.

3.2 ejs的使用

1.下載

npm i ejs

2.配置模板引擎

app.set('view engine','ejs')

3.配置模板的存放目錄

app.set('views','./views')   //默認(rèn)的是可以省略

4.在views目錄下創(chuàng)建模板文件 views文件夾中的靜態(tài)頁面此時應(yīng)該修改后綴.ejs

5.使用模板渲染數(shù)據(jù)

res.render('index',obj) //第一個參數(shù)就是要渲染的頁面，直接寫名稱不用加后綴 //第二個參數(shù)表示待渲染的對象，通常是一個對象

3.3 數(shù)據(jù)渲染

<% %> 寫業(yè)務(wù)邏輯

<%= %> 在某位置輸出數(shù)據(jù)

<%- %> 不轉(zhuǎn)義輸出