Node.js 程式札記 : Express 路由與請求處理

本文將介紹 Express 如何設置基本路由、處理不同的 HTTP 方法、利用路由參數和查詢字串，以及如何使用請求和回應物件。

基本路由設置

路由決定了應用程式如何回應客戶端對特定 url 的請求，讓我們從最基本的路由設置開始。

創建簡單路由

首先，我們需要安裝 Express 並創建一個基本的應用程式：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send(`歡迎來到首頁！`);
});

app.listen(port, () => {
  console.log(`應用程式正在監聽 ${port} 端口`);
});

在這個範例中，我們創建了一個最簡單的路由，它回應根路徑 (/) 的 GET 請求。當用戶訪問首頁時，他們會看到 "歡迎來到首頁！" 的消息。

路由順序的重要性

Express 按照路由定義的順序來匹配請求。因此，更具體的路由應該放在更通用的路由之前：

app.get('/users/admin', (req, res) => {
  res.send(`管理員頁面`);
});

app.get('/users/:id', (req, res) => {
  res.send(`用戶 ID: ${req.params.id}`);
});

在這個範例中，如果我們將 /users/:id 路由放在 /users/admin 之前，那麼 /users/admin 請求會被 /users/:id 路由處理，這可能不是我們想要的結果。

HTTP 方法（GET, POST, PUT, DELETE）

Express 支持所有標準的 HTTP 方法，讓我們來看看如何使用它們。

GET 請求

GET 請求用於獲取資料：

app.get('/users', (req, res) => {
  const users = [{ id: 1, name: '張三' }, { id: 2, name: '李四' }];
  res.json(users);
});

POST 請求

POST 請求用於創建新資料：

app.use(express.json()); // 用於解析 JSON 請求體

app.post('/users', (req, res) => {
  const newUser = req.body;
  console.log('新增用戶:', newUser);
  res.status(201).json({ message: '用戶創建成功', user: newUser });
});

PUT 請求

PUT 請求用於更新現有資料：

app.put('/users/:id', (req, res) => {
  const userId = req.params.id;
  const updatedUser = req.body;
  console.log(`更新用戶 ${userId}:`, updatedUser);
  res.json({ message: '用戶更新成功', user: updatedUser });
});

DELETE 請求

DELETE 請求用於刪除資料：

app.delete('/users/:id', (req, res) => {
  const userId = req.params.id;
  console.log(`刪除用戶 ${userId}`);
  res.json({ message: '用戶刪除成功' });
});

路由參數和查詢字串

Express 提供了便捷的方式來處理路由參數和查詢字串。

路由參數

路由參數是 URL 路徑的一部分，用冒號 (:) 來定義：

app.get('/products/:category/:id', (req, res) => {
  const category = req.params.category;
  const productId = req.params.id;
  res.send(`你正在查看 ${category} 類別中 ID 為 ${productId} 的產品`);
});

在這個範例中，/products/electronics/123 的請求會匹配這個路由，並且 category 將是 'electronics'，productId 將是 '123'。

查詢字串

查詢字串是 URL 中問號 (?) 後面的部分，Express 會自動解析這些參數：

app.get('/search', (req, res) => {
  const query = req.query.q;
  const page = req.query.page || 1;
  res.send(`搜索關鍵字: ${query}, 頁碼: ${page}`);
});

對於 /search?q=express&page=2 的請求，query 將是 'express'，page 將是 '2'。

請求（Request）和回應（Response）物件詳解

理解 Request 和 Response 物件是有效處理 HTTP 請求和回應的關鍵。

Request 物件

Request 物件包含了關於 HTTP 請求的所有信息：

app.get('/example', (req, res) => {
  console.log('請求方法:', req.method);
  console.log('請求路徑:', req.path);
  console.log('請求頭:', req.headers);
  console.log('查詢參數:', req.query);
  console.log('請求體:', req.body);

  res.send('請求信息已記錄');
});

Response 物件

Response 物件用於向客戶端發送回應：

app.get('/response-example', (req, res) => {
  // 設置狀態碼
  res.status(200);

  // 設置響應頭
  res.set('Content-Type', 'application/json');

  // 發送 JSON 回應
  res.json({ message: '這是一個 JSON 回應' });

  // 或者，你可以使用 res.send() 發送其他類型的回應
  // res.send('Hello, World!');

  // 重定向
  // res.redirect('/new-page');

  // 渲染模板（需要設置模板引擎）
  // res.render('index', { title: '首頁' });
});

總結

Express 的路由和請求處理，是為了讓開發者構建複雜的 Web 應用程式時變得更加簡單，通過掌握這些基本概念和技術，你就能夠創建可靈活擴展的後端服務。