Node.js 後端入門首選:Express 框架,從「Hello World」到實踐

By

On

還記得第一次用 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(),請求就會卡住。

Categories:

Tags: