Express.js 中的中間件概念簡(jiǎn)單有趣的介紹
如果你已經(jīng)在 Node.js 周圍呆了足夠長(zhǎng)的時(shí)間，你可能已經(jīng)聽說(shuō)過(guò)中間件，我不會(huì)撒謊，當(dāng)我第一次遇到 WORD ITSELF 時(shí)我很困惑所以更不用說(shuō)中間件的實(shí)現(xiàn)了，但是你’必須動(dòng)手學(xué)習(xí)所以請(qǐng)?jiān)试S我輕輕地教你關(guān)于中間件需要了解的知識(shí) 盡可能簡(jiǎn)單
建立我們的開發(fā)環(huán)境
如果您使用的是 Linux 或 Mac，請(qǐng)打開您的終端，如果您使用的是 Windows，請(qǐng)打開命令提示符
mkdir 中間件 && cd 中間件創(chuàng)建一個(gè)新目錄并導(dǎo)航到它
npm init –y 使用默認(rèn)設(shè)置初始化一個(gè)新的 npm 項(xiàng)目（稍后你可以使用 package.json，我將向你展示）
npm i express && npm i –save-dev nodemon 這將首先安裝 express，因?yàn)槲覀冃枰鼇?lái)構(gòu)建我們的后端，然后我們將安裝 nodemon 并將其保存為 dev 依賴項(xiàng)，因?yàn)槲覀儗?shí)際上并不需要它生產(chǎn)環(huán)境
向 package.json 添加腳本
如果你打開你的 package.json 文件，你會(huì)發(fā)現(xiàn)一個(gè)名為 scripts 的部分，這個(gè)部分包含在終端中運(yùn)行命令的“快捷方式”，它非常有用，所以讓我們添加一個(gè)小腳本來(lái)運(yùn)行 nodemon，看起來(lái)就像我們?cè)谔崃?/p>
“dev”: “nodemon index.js” 在“test”腳本之后添加這個(gè)
要觸發(fā)這些腳本，我們只需在終端輸入 npm run 后跟腳本部分中定義的腳本名稱，因此在我們的例子中，我們輸入 npm run dev 但讓我們稍后再使用它:)
無(wú)論如何，什么是中間件
中間件基本上是在路由處理函數(shù)之前執(zhí)行的函數(shù)……。 ik 這不是那么簡(jiǎn)單所以讓我們來(lái)看看一個(gè)非?；镜目爝f服務(wù)器
const express = require(“express”);const app = express();app.get(“”, (req, res) => res.send(“you’ve reached the home page”));app.get(“/users”, (req, res) => res.send(“this is the users page”));app.get(“/articles”, (req, res) => res.send(“this is the articles page”));app.get(“*”, (req, res) => res.status(404).send(“Page not found”));app.listen(3000, () => console.log(“up and running”));
好的，那里沒(méi)有什么太花哨的吧？我們有三個(gè)路由 / ， /users ， /articles 并且我們?yōu)檫@些路由中的每一個(gè)都有路由處理函數(shù)
運(yùn)行 npm run dev ，您應(yīng)該會(huì)看到“啟動(dòng)并運(yùn)行”的小消息
我們的中間件將在對(duì)這些路由的每個(gè)請(qǐng)求之前或在特定路由之前執(zhí)行，因?yàn)槲覀兛梢赃x擇指定
中間件基本上是一個(gè)可以訪問(wèn)請(qǐng)求和響應(yīng)對(duì)象的功能，就像路由處理程序一樣，它可以用來(lái)記錄對(duì)我們服務(wù)器的每個(gè)請(qǐng)求或檢查用戶是否登錄，驗(yàn)證和授權(quán)用戶保護(hù)某些資源和許多其他目的
中間件 VS。路由處理程序
中間件和路由處理程序的最大區(qū)別是 next() 函數(shù)
next() 函數(shù)是中間件的第三個(gè)參數(shù)，它基本上告訴后端“繼續(xù)下一個(gè)中間件”，或者換句話說(shuō)“給它綠燈繼續(xù)下一個(gè)例程”，所以我們的頁(yè)面不只是凍結(jié)并且永遠(yuǎn)不會(huì)完成加載，因此如果我們忘記放置它，程序?qū)o(wú)法繼續(xù)，因?yàn)樗ㄔ谥虚g件中
中間件的類型
如上所述，我們有兩種類型的中間件，一種在應(yīng)用程序的頂層運(yùn)行，因此它像中間件一樣應(yīng)用于所有路由處理程序，以檢查用戶是否登錄，我們可以將其應(yīng)用于所有帖子路由我們正在編寫的一些社交媒體應(yīng)用程序
默認(rèn) express 中間件的示例是 express.json() 中間件，我們一直在頂部使用它來(lái)啟用接受和解析 json
另一種類型是在特定路由之前運(yùn)行的中間件，也許您需要保護(hù)某些可以訪問(wèn)僅管理員文章或某些 VIP 內(nèi)容訪問(wèn)權(quán)限的應(yīng)用程序的路由
編寫我們的第一個(gè)中間件
說(shuō)了這么多，讓我們看看如何編寫我們自己的中間件，它會(huì)給我們一個(gè)美味的餅干
在我們的導(dǎo)入之后添加這個(gè)代碼片段
const say_hi = (req, res, next) => { console.log(“have a yummy cookie “); next();}
為了在應(yīng)用級(jí)別“啟用”中間件，我們使用 express.use(say_hi); 并注意我們沒(méi)有添加括號(hào)，因?yàn)槲覀儧](méi)有調(diào)用函數(shù)
現(xiàn)在前往任何路線并檢查您的終端是否有
你的 index.js 現(xiàn)在應(yīng)該是這樣的
const express = require(“express”); const app = express(); const say_hi = (req, res, next) => { console.log(“have a yummy cookie “); next();};app.use(say_hi); app.get(“”, (req, res) => res.send(“you’ve reached the home page”)); app.get(“/users”, (req, res) => res.send(“this is the users page”)); app.get(“/articles”, (req, res) => res.send(“this is the articles page”)); app.get(“*”, (req, res) => res.status(404).send(“Page not found”)); app.listen(3000, () => console.log(“up and running”));
為特定路線編寫中間件
現(xiàn)在我們已經(jīng)了解了如何編寫一個(gè)在應(yīng)用程序級(jí)別運(yùn)行的中間件，也就是在每條路由之前運(yùn)行，讓我們?cè)倬帉憙蓚€(gè)中間件，一個(gè)在用戶路由之前運(yùn)行，告訴我們“我愛我的用戶”，另一個(gè)用于文章 上面寫著“哇，看看所有這些文章”所以leggoooooo
const users_middleware = (req, res, next) => { console.log(“i love my users “); next();};const articles_middleware = (req, res, next) => { console.log(“wow look at all those articles “);};
現(xiàn)在，為了讓我們專門為我們的路由使用這些路由，我們需要分別將每個(gè)路由作為路由處理函數(shù)的參數(shù)傳遞，所以它現(xiàn)在看起來(lái)像這樣
const express = require(“express”);const app = express();const say_hi = (req, res, next) => { console.log(“have a yummy cookie “); next();};app.use(say_hi);const users_middleware = (req, res, next) => { console.log(“i love my users “); next();};const articles_middleware = (req, res, next) => { console.log(“wow look at all those articles “); next();};app.get(“”, (req, res) => res.send(“you’ve reached the home page”));app.get(“/users”, users_middleware, (req, res) => res.send(“this is the users page”));app.get(“/articles”, articles_middleware, (req, res) => res.send(“this is the articles page”));app.get(“*”, (req, res) => res.status(404).send(“Page not found”));app.listen(3000, () => console.log(“up and running”));
速記
- 中間件只是一個(gè)函數(shù)，在服務(wù)器接收到請(qǐng)求之后，在路由句柄響應(yīng)之前執(zhí)行
- 他們可以訪問(wèn)三個(gè)參數(shù)，req res 和第三個(gè)參數(shù)，這是一個(gè)方便地調(diào)用 next() 以允許下一個(gè)中間件運(yùn)行的函數(shù)
- 它們可以在應(yīng)用程序級(jí)別，因此它們?cè)趯?duì)每個(gè)端點(diǎn)的每個(gè)請(qǐng)求之前運(yùn)行，或者可以指定到某個(gè)路由
結(jié)論
中間件一開始對(duì)于那些剛開始表達(dá)的人來(lái)說(shuō)可能是一個(gè)復(fù)雜的概念，但是一旦你發(fā)現(xiàn)它們的真正需求，它們就很容易實(shí)現(xiàn)，它們是一個(gè)強(qiáng)大的工具來(lái)調(diào)節(jié)你的服務(wù)器資源和訪問(wèn)控制 許多其他需求，因?yàn)槟私馑鼈儽澈蟮幕舅枷?/p>
非常感謝你能做到這一點(diǎn)我感謝你的時(shí)間和對(duì)我博客的興趣，我希望你喜歡你的白天/黑夜
關(guān)注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！
