iT邦幫忙

2026 iThome 鐵人賽

DAY 8
0

正式進入第二階段「框架武裝」!在 Day 4 我們體驗了純手工使用內建的 http 模組來打造伺服器,你應該發現了:如果要處理幾十個不同的網址路徑,寫一大堆 if...else 簡直是一場災難。

為了解決這個問題,Express.js 誕生了。它是目前 Node.js 生態系中最老牌、最穩固、市佔率最高的後端框架,幾乎可以說是 Node.js 的代名詞。它把繁瑣的底層邏輯包裝起來,讓你專注在「商業邏輯」與「路由設計」上。


1. 安裝與起步

在開始之前,我們為第二階段建立一個全新的專案資料夾。打開終端機,執行以下指令:

mkdir express-api
cd express-api
npm init -y
npm install express

(記得去 package.json 裡面補上 "type": "module",我們依然要使用現代的 ESM 語法!)
image


2. 你的第一台 Express 伺服器

在資料夾內建立 app.js,輸入以下程式碼:

import express from 'express';

// 1. 建立 Express 應用程式實例
const app = express();
const PORT = 3000;

// 2. 設定路由 (Route)
// 當使用者對根目錄 '/' 發送 GET 請求時,執行這個函式
app.get('/', (req, res) => {
    // Express 自動幫你處理了 Content-Type 和狀態碼 200
    res.send('<h1> 歡迎來到 Express.js 的世界!</h1>');
});

app.get('/api/users', (req, res) => {
    const users = [
        { id: 1, name: 'Node Master' },
        { id: 2, name: 'Express Rookie' }
    ];
    // 使用 res.json() 會自動將陣列/物件轉為 JSON 字串並回傳
    res.json(users);
});

// 3. 啟動伺服器
app.listen(PORT, () => {
    console.log(` Express 伺服器已啟動:http://localhost:${PORT}`);
});

執行 node app.js 並打開瀏覽器測試。你會發現程式碼比 Day 4 乾淨了非常多!沒有 res.writeHead,沒有 res.end(JSON.stringify(...)),Express 內建的 res.send() 和 res.json() 幫你搞定了一切。
image


3. 接收前端的資料 (Req 物件解析)

後端最重要的事情就是處理前端傳來的資料。在 Express 中,前端傳資料通常有三種方式,我們都能輕鬆透過 req 物件取得:

A. 網址參數 (Query String) -> req.query

常用於搜尋、篩選或分頁。例如網址是 http://localhost:3000/search?keyword=node&page=2。

app.get('/search', (req, res) => {
    const { keyword, page } = req.query; // 取得 ? 後面的參數
    res.json({
        message: '搜尋成功',
        keyword: keyword,
        page: page
    });
});

B. 動態路由參數 -> req.params

常用於指定某個特定資源。例如網址是 http://localhost:3000/users/99。

// 在路由中使用冒號 : 代表這是一個動態參數
app.get('/users/:id', (req, res) => {
    const userId = req.params.id; // 取得網址上的 99
    res.json({
        message: `取得 ID 為 ${userId} 的使用者資料`
    });
});

C. 請求主體 (Body) -> req.body

當前端透過 POST 方法發送表單或 JSON 資料時使用。注意:Express 預設看不懂 JSON 請求體,你必須在所有路由的最上方加入一行「解析器(中介軟體)」。

請在 app.js 的 const app = express(); 下方加入這行:

// 告訴 Express:請幫我把所有傳入的 JSON 資料解析成 JavaScript 物件
app.use(express.json()); 

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    
    if (username === 'admin' && password === '1234') {
        res.json({ success: true, message: '登入成功' });
    } else {
        // 設定 HTTP 狀態碼為 401 (未授權) 並回傳錯誤訊息
        res.status(401).json({ success: false, message: '帳號或密碼錯誤' });
    }
});

4. 測試 POST API

針對 POST 請求,瀏覽器網址列是無法直接觸發的。你需要下載並使用如 Postman 或 VS Code 擴充套件 Thunder Client 來發送帶有 JSON Body 的 POST 請求到 http://localhost:3000/login。


上一篇
Day 7:第一階段總結與實作(批次檔案分析 CLI 工具)
下一篇
Day 9:路由(Routing)設計美學與模組化拆分
系列文
不要再說你不會後端!30 天 Node.js 降維打擊指南 共 16 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言