Node.js 程式札記：Express 中間件 (Middleware)
更新於 2024/10/10閱讀時間約 8 分鐘
Express 中間件能夠處理請求驗證、錯誤處理、日誌記錄等問題，簡化複雜的開發流程，無論你是正在構建企業級應用還是簡單的網站，掌握中間件的使用都能顯著提升你的開發效率和應用質量。
中間件定義和作用
中間件是一個函數，它可以存取請求對象（request object，req）、回應對象（response object，res），以及應用程式的請求-回應循環中的下一個中間件函數，通常由變數 next 表示。
中間件的作用
中間件在 Express 應用中可以執行以下任務：
- 執行任何程式碼
- 修改請求和回應對象
- 結束請求-回應循環
- 呼叫順序中的下一個中間件
如果當前中間件沒有終止請求-回應循環，它必須呼叫 next() 將控制權傳遞給下一個中間件，否則請求將被掛起。
中間件的基本結構
一個典型的中間件函數看起來是這樣的：
function myMiddleware(req, res, next) {
// 執行某些操作
console.log('這是一個中間件');
// 呼叫下一個中間件
next();
}
常用的內建中間件
Express 提供了一些內建的中間件，可以直接使用來處理常見任務。以下是幾個最常用的：
1. express.json()
這個中間件用於解析 JSON 格式的請求體。當客戶端傳送 JSON 數據時，express.json() 會自動將其解析並放入 req.body 中。
const express = require('express');
const app = express();
const port = 3000;
app.post('/api/data', (req, res) => {
console.log(req.body); // 存取已解析的表單數據
res.json({ message: '數據已接收' });
});
app.listen(port, () => {
console.log(`服務器運行在 http://localhost:${port}`);
});
2. express.urlencoded()
這個中間件用於解析 URL-encoded 格式的請求體，通常用於處理 HTML 表單提交的數據。
const express = require('express');
const app = express();
const port = 3000;
app.use(express.urlencoded({ extended: true }));
app.post('/submit-form', (req, res) => {
console.log(req.body); // 存取已解析的表單數據
res.send('表單已提交');
});
app.get('/', (req, res) => {
res.send(`
<html>
<body>
<h1>表單提交示例</h1>
<form action="/submit-form" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
`);
});
app.listen(port, () => {
console.log(`服務器運行在 http://localhost:${port}`);
});
3. express.static()
express.static 中間件用於提供靜態文件，如 HTML、CSS、JavaScript、圖片等。
app.use(express.static('public'));
這行程式碼將使 public 目錄下的文件可以直接通過 URL 存取。例如，如果 public 目錄下有一個 styles.css 文件，可以通過 http://localhost:3000/styles.css 存取。
自定義中間件的使用
除了使用內建中間件，你還可以創建自定義中間件來滿足特定需求。以下是一些常見的自定義中間件示例：
1. 日誌記錄中間件
這個中間件可以用來記錄每個請求的詳細信息：
function loggerMiddleware(req, res, next) {
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
next();
}
app.use(loggerMiddleware);
2. 錯誤處理中間件
錯誤處理中間件通常定義為四個參數的函數，用於集中處理應用程式中的錯誤：
// 模擬數據庫操作
function fetchUserFromDatabase(id) {
// 假設 ID 為 0 時，模擬數據庫錯誤
if (id === '0') {
throw new Error('數據庫連接失敗');
}
return { id, name: 'User ' + id };
}
// 用戶資料路由
app.get('/user/:id', (req, res, next) => {
try {
const user = fetchUserFromDatabase(req.params.id);
res.json(user);
} catch (error) {
next(error); // 將錯誤傳遞給錯誤處理中間件
}
});
// 錯誤處理中間件
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).json({ error: '伺服器錯誤，請稍後再試' });
});
3. 身份驗證中間件
用於檢查用戶是否已登入的中間件：
function authMiddleware(req, res, next) {
if (req.session && req.session.user) {
next();
} else {
res.status(401).send('請先登入');
}
}
// 在需要驗證的路由上使用
app.get('/protected', authMiddleware, (req, res) => {
res.send('這是受保護的內容');
});
總結
通過合理使用內建中間件和自定義中間件，你可以輕鬆處理複雜的業務邏輯、提升應用程式的安全性，並實現各種功能擴展。記住，中間件的順序很重要，合理安排它們可以讓你的應用程式的可維護性提高。
60會員
91內容數
「梧笙」即「吾生」，意即我的生命，朋友都叫我「阿梧(Awu)」，高雄人。我喜歡學習新技能，從程式設計到網路工具，再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章，如果你有任何想法或問題，歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 什麼是Middleware (中介層)？
Middleware 一般翻譯作「中間件」或是「中介軟體」，其實 Express 應用程式就是由一連串的 middleware 串連而成：
從 request 進來到 response 回去會經過一系列的流程。
這個流程會按照路由清單由上而下執行。
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
本章節旨在介紹TypeScript中的函數，包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節，讀者可以學習到如何在TypeScript中使用不同的方式來定義函數，如函數聲明、函數表達式、箭頭函數和匿名函數等。
※ Express 專案步驟筆記清單
Node.js 環境建置核對
新增專案資料夾
設定 package.json
npm init -y
設定程式入口為 app.js
安裝 Express：npm install express
設定主程式 app.js
建構應用程式伺服器
設定
Request內容
package main
import (
"fmt"
"log"
"net/http"
"strings"
)
func request(w http.ResponseWriter, r *http.Request) {
//這些資訊是輸出到伺服器端的列印訊息
HTTP伺服器端
package main
import (
"net/http"
)
type Refer struct {
handler http.Handler
refer string
}
//實現中介軟體邏輯
func (this *Refer) ServeHTTP(
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 什麼是Middleware (中介層)？
Middleware 一般翻譯作「中間件」或是「中介軟體」，其實 Express 應用程式就是由一連串的 middleware 串連而成：
從 request 進來到 response 回去會經過一系列的流程。
這個流程會按照路由清單由上而下執行。
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
本章節旨在介紹TypeScript中的函數，包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節，讀者可以學習到如何在TypeScript中使用不同的方式來定義函數，如函數聲明、函數表達式、箭頭函數和匿名函數等。
※ Express 專案步驟筆記清單
Node.js 環境建置核對
新增專案資料夾
設定 package.json
npm init -y
設定程式入口為 app.js
安裝 Express：npm install express
設定主程式 app.js
建構應用程式伺服器
設定
Request內容
package main
import (
"fmt"
"log"
"net/http"
"strings"
)
func request(w http.ResponseWriter, r *http.Request) {
//這些資訊是輸出到伺服器端的列印訊息
HTTP伺服器端
package main
import (
"net/http"
)
type Refer struct {
handler http.Handler
refer string
}
//實現中介軟體邏輯
func (this *Refer) ServeHTTP(