【Node.js】express框架

1初識express框架

官方給出的概念：Express 是基于Node.js 平臺，快速、開放、極簡的Web 開發框架

通俗的理解：Express 的作用和Node.js 內置的http 模塊類似，是專門用來創建Web 服務器的

Express 的本質：就是一個npm 上的第三方包，提供了快速創建Web 服務器的便捷方法

思考：不使用Express 能否創建Web 服務器？

答案：能，使用Node.js 提供的原生http 模塊即可

思考：既生瑜何生亮（有了http 內置模塊，為什么還有用Express）？

答案：http 內置模塊用起來很復雜，開發效率低；Express 是基于內置的http 模塊進一步封裝出來的，能夠極大的提高開發效率

思考：http 內置模塊與Express 是什么關系？

答案：類似于瀏覽器中Web API 和jQuery 的關系。后者是基于前者進一步封裝出來的

Express 能做什么？

對于前端程序員來說，最常見的兩種服務器，分別是：

Web 網站服務器：專門對外提供Web 網頁資源的服務器
?API 接口服務器：專門對外提供API 接口的服務器

使用Express，我們可以方便、快速的創建Web 網站的服務器或API 接口的服務器

2 初步使用

2.1 安裝?

本章使用4.17.1版本

npm i express@4.17.1

2.2 創建基本的Web服務器

//導入express
const express = require("express")//創建web服務器
const app = express()//...預留位置//啟動服務器，分配端口
app.listen(80, () => {//啟動成功后執行的回調函數
})

2.3 監聽方法

2.3.1 監聽get請求

?req：請求對象（包含了與請求相關的屬性與方法）

?res：響應對象（包含了與響應相關的屬性與方法）

app.get("請求url", (req, res) => {//處理函數
})

2.3.2 監聽post請求

app.post("請求url", (req, res) => {//處理函數
})

2.4 響應客戶端

res對象的send方法?

res.send(響應內容)

2.5 獲取url中的參數(get)

2.5.1 獲取查詢參數

查詢參數（如：?name=user&age=18）可以通過req對象下的query屬性查詢

如：

req.query.name

req.query.age

2.5.2 獲取動態參數

動態參數（url地址中 :參數名對應的值）可以通過req對象的params屬性查詢

req.params默認是一個空對象

里面存放通過：參數名匹配到的參數值

app.get("/user/:id", (req, res) => {//例如訪問：http://域名/user/28//則req對象中的params對象里會被添加一個id屬性，且值為28（屬性名由：后的參數名決定）})

2.6 托管靜態資源

express 提供了一個非常好用的函數，叫做express.static()，通過它，我們可以非常方便地創建一個靜態資源服務器

例如，通過如下代碼就可以將public 目錄下的圖片、CSS 文件、JavaScript 文件對外開放訪問了：

app.use(express.static("public"))

現在，你就可以訪問public 目錄中的所有文件了：

http://localhost:3000/images/bg.jpg

http://localhost:3000/css/style.css

http://localhost:3000/js/login.js

注意：Express 在指定的靜態目錄中查找文件，并對外提供資源的訪問路徑，因此，存放靜態文件的目錄名不會出現在URL 中，那么如何添加目錄名呢？見下文：

2.6.1 掛載路徑前綴

app.use("/public", express.static("public"))

現在，你就可以通過帶有/public 前綴地址來訪問public 目錄中的文件了：

http://localhost:3000/public/images/kitten.jpg

http://localhost:3000/public/css/style.css

http://localhost:3000/public/js/app.js

還可以通過多次使用express.static()來托管多個靜態資源。如下：

2.6.2 托管多個靜態資源

app.use("/public", express.static("public"))
app.use("/files", express.static("files"))

如果沒有掛載路徑前綴，則會按照托管順序顯示，誰先托管顯示誰

3 express路由

在Express 中，路由指的是客戶端的請求與服務器處理函數之間的映射關系。

Express 中的路由分3 部分組成，分別是請求的類型、請求的URL 地址、處理函數，格式如下：

app.METHOD(PATH, HANDLER)

上文中的監聽get/post請求即是一種路由

路由匹配過程：

每當一個請求到達服務器之后，需要先經過路由的匹配，在匹配時，會按照路由的順序進行匹配，如果請求類型和請求的URL 同時匹配成功，則Express 會將這次請求，轉交給對應的function 函數進行處理

路由匹配的注意點：

① 按照定義的先后順序進行匹配

② 請求類型和請求的URL同時匹配成功，才會調用對應的處理函數

3.1 最簡單的用法

把路由掛載到app 上，如上文中的監聽get/post請求

3.2 模塊化路由

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

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

① 創建路由模塊對應的.js 文件

② 調用express.Router() 函數創建路由對象

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

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

//路由模塊.js文件//導入express
const express = require("express")
//創建路由對象
const router = express.Router()//掛載路由
router.get("user/list", (req, res) => {})//導出路由對象
module.exports = router

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

//...
//導入路由模塊
const userRouter = require("路由模塊路徑")//使用app.use注冊路由模塊
app.use(userRouter)

3.3?掛載前綴

路由模塊也可以掛載前綴，原理與托管靜態資源同理，本質上都是使用app.user()?

在注冊路由模塊時，前面加上前綴即可

app.use("/api", userRouter)

4 中間件

中間件，特指業務流程的中間處理環節

Express 的中間件，本質上就是一個function 處理函數，Express 中間件的格式如下：

4.1 next函數?

next 函數是實現多個中間件連續調用的關鍵，它表示把流轉關系轉交給下一個中間件或路由

4.2 中間件的特性

多個中間件之間，共享同一份req和res

基于這樣的特性，我們可以在上游的中間件中，統一為req 或res 對象添加自定義的屬性或方法，供下游的中間件或路由進行使用

4.3 創建中間件

4.3.1 全局中間件

客戶端發起的任何請求，到達服務器之后，都會觸發的中間件，叫做全局生效的中間件

通過調用app.use(中間件函數)，即可定義一個全局生效的中間件，示例代碼如下：

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

簡化寫法：


app.use(function(req, res, next) {//...next()
})

4.3.2 創建多個全局中間件

可以使用app.use() 連續定義多個全局中間件。客戶端請求到達服務器之后，會按照中間件定義的先后順序依次進行調用

4.3.3 創建局部中間件

不使用app.use() 定義的中間件，叫做局部生效的中間件，局部中間件只有在綁定了該中間件的路由匹配成功時才會執行

示例代碼如下：

const mw = function(req, res, next) {//...next()
}app.get("/", mw, function(req, res) {//
})

4.3.4 創建多個局部中間件

可以在路由中，通過如下兩種等價的方式，使用多個局部中間件：

app.get("/", mw1, mw2, (req, res) => {    //...    })app.get("/", [mw1, mw2], (req, res) => {    //...    })

4.4 中間件注意事項

① 一定要在路由之前注冊中間件

② 客戶端發送過來的請求，可以連續調用多個中間件進行處理

③ 執行完中間件的業務代碼之后，不要忘記調用next() 函數

④ 為了防止代碼邏輯混亂，調用next() 函數后不要再寫額外的代碼

⑤ 連續調用多個中間件時，多個中間件之間，共享req 和res 對象

4.5 中間件的分類

為了方便大家理解和記憶中間件的使用，Express 官方把常見的中間件用法，分成了5 大類，分別是：

① 應用級別的中間件

② 路由級別的中間件

③ 錯誤級別的中間件

④ Express 內置的中間件

⑤ 第三方的中間件

4.5.1 應用級別的中間件

綁定到 app 實例上的中間件，叫做應用級別的中間件

4.5.2 路由級別的中間件

綁定到express.Router() 實例上的中間件，叫做路由級別的中間件

它的用法和應用級別中間件沒有任何區別

只不過，應用級別中間件是綁定到app 實例上，路由級別中間件綁定到router 實例上

4.5.3 錯誤級別的中間件

錯誤級別中間件的作用：專門用來捕獲整個項目中發生的異常錯誤，從而防止項目異常崩潰的問題

格式：錯誤級別中間件的function 處理函數中，必須有4 個形參，形參順序從前到后，分別是(err, req, res, next)

注意：錯誤級別的中間件，必須注冊在所有路由之后！

app.get("/", (req, res) => {throw new Error("error")res.send("index")    //不會執行該行
})app.use(function(err, req, res, next) {console.log("發生了錯誤")res.send("error")
})

4.5.4?Express內置的中間件

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

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

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

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

用法：直接通過app.use()使用即可

注意：經常用于解析通過post方法傳來的數據，獲取的數據在req.body中?

app.use(express.json())app.use(express.urlencoded({ extended: flase }))

4.5.5 第三方中間件

非Express 官方內置的，而是由第三方開發出來的中間件，叫做第三方中間件。在項目中，大家可以按需下載并配置第三方中間件，從而提高項目的開發效率

例如：在express@4.16.0 之前的版本中，經常使用body-parser 這個第三方中間件，來解析請求體數據。使用步驟如下：

① 運行npm install body-parser安裝中間件

② 使用require導入中間件

③ 調用app.use() 注冊并使用中間件

4.6 自定義中間件

自己手動模擬一個類似于express.urlencoded這樣的中間件，來解析POST 提交到服務器的表單數據。實現步驟：

① 定義中間件

② 監聽req 的data 事件

③ 監聽req 的end 事件

④ 使用querystring模塊解析請求體數據

⑤ 將解析出來的數據對象掛載為req.body

⑥ 將自定義中間件封裝為模塊?

?4.6.1 監聽事件

當客戶端向服務器發送數據時（data事件），響應

如果數據量比較大，無法一次性發送完畢，則客戶端會把數據切割后，分批發送到服務器

所以data 事件可能會觸發多次，每一次觸發data 事件時，獲取到數據只是完整數據的一部分，需要手動對接收到的數據進行拼接。

let str = ""req.on("data", (chunk) => {str += chunk})

當請求數據接收完畢之后自動觸發end事件

因此，我們可以在req 的end 事件中，拿到并處理完整的請求體數據示例代碼如下：

req.on("end", () => {})

4.6.2?使用 querystring 模塊解析請求體數據

Node.js 內置了一個querystring 模塊，專門用來處理查詢字符串。通過這個模塊提供的parse() 函數，可以輕松把查詢字符串，解析成對象的格式。示例代碼如下：

const qs = require("querystring")const body = qs.parse(str)

4.6.3?將解析出來的數據對象掛載為req.body

上游的中間件和下游的中間件及路由之間，共享同一份req 和res。因此，我們可以將解析出來的數據，掛載為req 的自定義屬性，命名為req.body，供下游使用。示例代碼如下：

req.on("end", () => {const body = qs.parse(str)req.body = body
})

4.6.4?將自定義中間件封裝為模塊

為了優化代碼的結構，我們可以把自定義的中間件函數，封裝為獨立的模塊，示例代碼如下：

5 跨域問題?

在網絡開發中，跨域問題是指在進行 HTTP 請求時，由于瀏覽器的同源策略限制，導致從一個源（origin）發起的 GET 或 POST 請求無法正常訪問另一個不同源的資源的情況

5.1 同源策略

同源策略是瀏覽器的一個安全機制，它規定了來自不同源的腳本、樣式表、圖片等資源在相互訪問時的限制

這里的 “源” 由協議、域名和端口號組成，只有當這三個部分都相同時，才被認為是同源

例如，http://example.com:80和http://example.com:81就屬于不同源，因為端口號不同

5.2 CORS 方案

cors 是 Express 的一個第三方中間件，通過安裝和配置cors中間件，可以很方便地解決跨域問題

5.2.1 使用?

使用步驟分為如下3 步：

① 運行npm install cors 安裝中間件

② 使用const cors = require('cors') 導入中間件

③ 在路由之前調用app.use(cors()) 配置中間件

?5.2.2 響應頭設置

可以通過設置響應頭（res對象）的參數來解決跨域問題

res.setHeader("參數名", "值")

5.2.2.1 請求源（必須）

請求源參數是必須要設置的

網站可替換為網站鏈接或通配符*（表示所有源）?

res.setHeader("Access-Control-Allow-Origin", "網站")

?但是不能一次性傳入多個網站，如下

//這樣寫是錯誤的
res.setHeader("Access-Control-Allow-Origin", "網站1", "網站2")

可以參考下面方法設置多個請求源

使用includes()方法來判斷

const express = require('express');
const app = express();// 允許的源列表
const allowedOrigins = ['http://example1.com', 'http://example2.com'];app.use((req, res, next) => {const origin = req.headers.origin;if (allowedOrigins.includes(origin)) {res.setHeader('Access-Control-Allow-Origin', origin);}next();
});app.get('/data', (req, res) => {//
});app.listen(3000, () => {//
});

5.2.2.2 請求頭（可選）

默認情況下，CORS 僅支持客戶端向服務器發送如下的9 個請求頭：

Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、 Content-Type （值僅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一）

如果客戶端向服務器發送了額外的請求頭信息，則需要在服務器端，通過Access-Control-Allow-Headers 對額外的請求頭進行聲明，否則這次請求會失敗！

如果請求頭在上述請求頭中，該參數就不用配置！！！

res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

多個請求頭之間用英文逗號隔開！！！

5.2.2.3 請求方法（可選）

默認情況下，CORS 僅支持客戶端發起GET、POST、HEAD 請求

如果客戶端希望通過PUT、DELETE等方式請求服務器的資源，則需要在服務器端，通過Access-Control-Alow-Methods 來指明實際請求所允許使用的HTTP 方法

res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');

可以使用通配符允許所有請求

5.2.3 請求類型

客戶端在請求CORS 接口時，根據請求方式和請求頭的不同，可以將CORS 的請求分為兩大類：

① 簡單請求：客戶端與服務器之間只會發生一次請求

② 預檢請求：：客戶端與服務器之間會發生兩次請求，OPTION 預檢請求成功之后，才會發起真正的請求

5.2.3.1 簡單請求

同時滿足以下兩大條件的請求，就屬于簡單請求：

① 請求方式：GET、POST、HEAD 三者之一

② HTTP 頭部信息不超過以下幾種字段：無自定義頭部字段、Accept、Accept-Language、Content-Language、DPR、 Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三個值application/x-www-form urlencoded、multipart/form-data、text/plain）

5.2.3.2 預檢請求

只要符合以下任何一個條件的請求，都需要進行預檢請求：

① 請求方式為GET、POST、HEAD 之外的請求Method 類型

② 請求頭中包含自定義頭部字段

③ 向服務器發送了application/json 格式的數據

在瀏覽器與服務器正式通信之前，瀏覽器會先發送OPTION 請求進行預檢，以獲知服務器是否允許該實際請求，所以這一次的OPTION 請求稱為“預檢請求”

服務器成功響應預檢請求后，才會發送真正的請求，并且攜帶真實數據

5.3 JSOP方案

瀏覽器端通過<script>標簽的src 屬性，請求服務器上的數據，同時，服務器返回一個函數的調用,這種請求數據的方式叫做JSONP

5.3.1 特點

① JSONP 不屬于真正的Ajax 請求，因為它沒有使用XMLHttpRequest這個對象

② JSONP 僅支持GET 請求，不支持POST、PUT、DELETE 等請求

注意事項：

如果項目中已經配置了CORS跨域資源共享，為了防止沖突，必須在配置CORS 中間件之前聲明JSONP的接口，否則 JSONP 接口會被處理成開啟了CORS 的接口

5.3.2 使用

步驟：?

① 獲取客戶端發送過來的回調函數的名字

② 得到要通過JSONP 形式發送給客戶端的數據

③ 根據前兩步得到的數據，拼接出一個函數調用的字符串

④ 把上一步拼接得到的字符串，響應給客戶端的

瀏覽器會在執行js腳本時，自動調用服務器返回的函數

html：

你將?script?標簽添加到 HTML 文檔中并為其?src?屬性設置了有效的 URL 后，瀏覽器會自動下載該 URL 指向的資源，并執行其中的 JavaScript 代碼

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSONP Example</title>
</head><body><script>// 定義回調函數function handleResponse(data) {console.log('Received data:', data);}// 創建 script 標簽const script = document.createElement('script');// 構建請求 URL，添加回調函數名作為參數script.src = 'http://example.com/api/data?callback=handleResponse';// 將 script 標簽添加到頁面中document.body.appendChild(script);</script>
</body></html>

js：

const express = require('express');
const app = express();app.get('/api/data', (req, res) => {// 獲取客戶端傳遞的回調函數名const callback = req.query.callback;// 準備 JSON 數據const data = { message: 'Hello, JSONP!' };// 將 JSON 數據轉換為字符串const jsonData = JSON.stringify(data);// 包裝 JSON 數據到回調函數中const response = `${callback}(${jsonData})`;// 設置響應頭res.setHeader('Content-Type', 'application/javascript');// 返回響應res.send(response);
});const port = 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});