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