還記得第一次用 Node.js 寫後端時的窘境嗎?想處理一個簡單的 GET 請求,卻翻了半天文件,湊出幾十行程式碼,還因為沒搞定請求頭而頻頻報錯。
如果你也遇過這種狀況,那前輩的一句「試試 Express」可能會讓你豁然開朗。
Express,這個在 Node.js 生態中活躍了十幾年的「老伙計」,至今仍是數百萬開發者的入門首選。它不追求新潮,而是專注於將複雜的 Web 開發邏輯,變得像手搖飲裡的珍珠一樣,清晰好懂。
Express 到底是什麼?
如果把 Node.js 比喻成一輛能跑的汽車,那 Express 就是一套為你準備好的操控系統。
它是一個基於 Node.js 的輕量級 Web 框架,沒有更換汽車引擎,而是把方向盤、油門、煞車都設計得極度順手。有了它,你不再需要從零開始搭建 HTTP 伺服器,也不用手動解析請求參數,這些重複又繁瑣的工作,Express 都幫你封裝成了簡單好用的 API。
有人說它是「Node.js 的事實標準框架」,這話一點也不誇張。
- GitHub 星標:超過 43k
- NPM 週下載量:超過 1000 萬次
- StackOverflow 相關問題:上百萬條
從 Postman 的早期原型,到無數小程式的後端,都有 Express 的身影。它就像程式界的「百搭白襯衫」,看似普通卻極其實用,無論是小型專案還是中型系統都能輕鬆駕馭。
當然,它並非完美。v4 版本從 2014 年沿用至今,更新緩慢;面對 Fastify 等後起之秀,效能也略顯吃力。但它穩定、學習資源豐富、入門門檻低的優勢,依然是新手繞不開的最佳選擇。
上手實操:5 分鐘搞定你的第一個 Express 應用
別被「框架」兩個字嚇到,用 Express 寫出第一個 “Hello World”,比泡一杯即溶咖啡還簡單。只要你已經安裝了 Node.js,跟著以下步驟,馬上就能看到成果。
第一步:搭建專案環境
首先,在你的電腦上建立一個新資料夾(例如 my-first-express),然後打開終端機,進入該資料夾,並依序輸入這兩行指令:
# 初始化專案,自動生成 package.json 檔案
npm init -y
# 安裝 Express 框架
npm install express
第一行指令會快速建立專案設定檔,第二行指令則是將 Express 下載到你的專案中,就像為手機安裝 App 一樣簡單。
第二步:撰寫核心程式碼
在資料夾中建立一個 app.js 檔案,並貼上以下程式碼:
// 1. 引入 Express 框架
const express = require('express');
// 2. 建立一個 Express 應用程式實例
const app = express();
// 3. 設定伺服器要監聽的 Port,3000 是開發時的常用選擇
const port = 3000;
// 4. 定義路由:當使用者訪問根目錄 "/" 時,回傳 "Hello World!"
app.get('/', (req, res) => {
res.send('Hello World! 這是我的第一個 Express 應用');
});
// 5. 啟動伺服器,並開始監聽指定的 Port
app.listen(port, () => {
console.log(`伺服器已啟動!請訪問 http://localhost:${port}`);
});
這裡的關鍵是「路由(Routing)」。它就像餐廳的點餐系統,客人點了「宮保雞丁」(訪問 / 路徑),廚房就依照菜單製作對應的菜(回傳指定內容)。req 代表客人的請求,res 則是伺服器的回應。
第三步:啟動服務,見證成果
回到終端機,輸入以下指令:
node app.js
當你看到「伺服器已啟動!」的提示,就代表成功了!現在打開瀏覽器,輸入 http://localhost:3000,頁面上就會顯示我們寫好的那句話。是不是比純粹用 Node.js 簡單太多了?
小提示:想修改回傳內容,直接改 res.send() 裡的文字即可。想停止服務,在終端機按下 Ctrl + C。
核心技能:掌握路由與中介軟體
“Hello World” 只是起點,Express 的靈魂在於路由(Router)與中介軟體(Middleware)。掌握這兩項,你就能打造真正實用的後端服務。
1. 路由:為不同請求指派任務
一個網站不可能只有一個首頁。例如一個部落格,需要文章列表、文章詳情、提交評論等功能,這就需要定義多個路由。
在 app.js 中繼續加入以下程式碼:
// GET 請求:取得文章列表
app.get('/articles', (req, res) => {
res.send('這是文章列表,總共有 10 篇文章');
});
// GET 請求:取得單篇文章(:id 是動態參數)
app.get('/articles/:id', (req, res) => {
const articleId = req.params.id; // 透過 req.params 取得動態參數
res.send(`你正在閱讀第 ${articleId} 篇文章的詳細內容`);
});
// POST 請求:提交新評論
app.post('/comments', (req, res) => {
res.send('你的評論已成功提交!');
});
現在,訪問 http://localhost:3000/articles/5,頁面會顯示「你正在閱讀第 5 篇文章的詳細內容」。路由匹配是有順序的,記得將動態路由(如 /articles/:id)放在靜態路由(如 /articles/new)之後,避免匹配錯誤。
當路由變多時,可以使用 express.Router() 將它們模組化,拆分到不同檔案中,讓專案結構更清晰。
2. 中介軟體:請求的「加工處理站」
中介軟體是 Express 最精妙的設計,你可以把它想像成請求在抵達最終目的地前的「加工廠」。它能在請求到達路由前,預先處理一些任務,例如:
- 驗證使用者是否登入
- 記錄每次請求的日誌
- 解析傳入的 JSON 資料
舉個例子,我們來建立一個簡單的日誌中介軟體:
// 定義一個日誌中介軟體
const logger = (req, res, next) => {
const time = new Date().toLocaleString();
console.log(`[${time}] 有人訪問了:${req.path}`);
next(); // 將請求交給下一個中介軟體或路由
};
// 註冊為全域中介軟體,所有請求都會經過它
app.use(logger);
將這段程式碼放在所有路由定義之前。next() 是關鍵,它就像接力賽的交棒,負責將請求傳遞下去。如果忘了呼叫 next(),請求就會卡住。
