node.js中的express路由是什么

本篇內(nèi)容介紹了“node.js中的express路由是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1. 路由的概念

1.1 什么是路由

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

現(xiàn)實(shí)生活中

按鍵 1  ->  業(yè)務(wù)查詢
按鍵 2  ->  手機(jī)充值
按鍵 3  ->  業(yè)務(wù)辦理
按鍵 4  ->  密碼服務(wù)與停復(fù)機(jī)
按鍵 5  ->  家庭寬帶
按鍵 6  ->  話費(fèi)流量
按鍵 8  ->  集團(tuán)業(yè)務(wù)
按鍵 0  ->  人工服務(wù)

在這里，路由是按鍵與服務(wù)之間的映射關(guān)系

1.2 nodejs中的路由

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

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

2. Express

2.1 Express 簡介

基于 Node.js 平臺(tái)，快速、開放、極簡的 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ì)：就是一個(gè) 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實(shí)例，也就是創(chuàng)建 express服務(wù)器
var app = express();


// 啟動(dòng)服務(wù)器
app.listen(3000, function () {
  console.log('服務(wù)器已啟動(dòng)')
})

監(jiān)聽get請(qǐng)求

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

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

監(jiān)聽post請(qǐng)求

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

[外鏈圖片轉(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請(qǐng)求的參數(shù)

通過 req.query 對(duì)象，可以獲取到客戶端通過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請(qǐng)求的參數(shù)

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

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

如果沒有這個(gè)中間件的話，則默認(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ù)給客戶端，并自動(dòng)設(shè)置Content-Type
res.send()  //用于向?yàn)g覽器客戶端響應(yīng)數(shù)據(jù) 會(huì)自帶合適的響應(yīng)頭

// 發(fā)送文件給瀏覽器，并根據(jù)文件后綴名自動(dòng)設(shè)置Content-Type
// 注意：文件路徑必須是絕對(duì)路徑
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開頭的請(qǐng)求地址，都可以被use處理

• 注意：可以處理任意的請(qǐng)求類型

• 注意：path參數(shù)可省略，默認(rèn)值為：/

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

路由的匹配過程

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

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

路由匹配的注意點(diǎn)：

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

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

全局掛載路由

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

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

2.6 模塊化路由

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

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

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

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

③向路由對(duì)象上掛載具體的路由

④使用 module.exports 向外共享路由對(duì)象

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

[外鏈圖片轉(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)目錄中查找文件，并對(duì)外提供資源的訪問路徑。
因此，存放靜態(tài)文件的目錄名不會(huì)出現(xiàn)在 URL 中。

托管多個(gè)資源目錄

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

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

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

訪問靜態(tài)資源文件時(shí)，express.static() 函數(shù)會(huì)根據(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í)就是一個(gè)函數(shù)，特指業(yè)務(wù)流程的中間處理環(huán)節(jié)。

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

中間件分為兩種 一個(gè)是全局中間件 一個(gè)是路由中間件

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

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

express中的中間件

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

基本使用

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

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

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

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

中間件的作用

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

定義多個(gè)中間件

可以使用 app.use() 連續(xù)定義多個(gè)全局中間件?？蛻舳苏?qǐng)求到達(dá)服務(wù)器之后，會(huì)按照中間件定義的先后順序依次進(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 個(gè)常用的中間件，極大的提高了 Express 項(xiàng)目的開發(fā)效率和體驗(yàn)：

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

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

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

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

3.EJS模板

3.1 ejs介紹

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

簡單來說，使用ejs模板引擎就可以幫助我們快速的將數(shù)據(jù)渲染到頁面對(duì)應(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)頁面此時(shí)應(yīng)該修改后綴.ejs

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

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

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

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

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

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

“node.js中的express路由是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！