2026-03-21Node.js

Web 開發架構與 HTTP 基礎#

在學習 Node.js 之前，先了解整個 Web 開發的架構以及瀏覽器與伺服器溝通的方式，有助於理解後面每一個概念的定位。

1. Web 開發的三個層次#

前端 (Frontend)
  └ 使用者看到的介面
  └ 技術：HTML、CSS、JavaScript
  └ 執行環境：瀏覽器

後端 (Backend)          ← Node.js 在這裡
  └ 處理商業邏輯、回應請求、存取資料庫
  └ 技術：Node.js、Express、Python、Go...
  └ 執行環境：伺服器

資料庫 (Database)
  └ 儲存與查詢資料
  └ 技術：PostgreSQL、MongoDB、MySQL...

這三個層次合稱 Web 開發（Web Development）。Node.js 屬於 後端開發（Backend Development），負責接收前端的請求並回傳資料。

2. 瀏覽器與伺服器如何溝通#

瀏覽器與伺服器之間透過 HTTP（HyperText Transfer Protocol） 協議溝通。每次溝通都由一個 請求（Request） 和一個 回應（Response） 組成。

使用者操作瀏覽器
     ↓
瀏覽器發出 HTTP 請求（Request）
     ↓  （透過網路）
伺服器收到請求、處理
     ↓
伺服器回傳 HTTP 回應（Response）
     ↓
瀏覽器顯示結果

3. HTTP 方法（Methods）#

HTTP 定義了不同的 方法（Method） 來表示不同意圖的操作，對應到資料的 CRUD：

使用者做什麼	HTTP 方法	對應操作
在網址列輸入網址、點連結	GET	讀取（Read）
送出新增表單	POST	新增（Create）
送出編輯表單（完整更新）	PUT	更新（Update）
局部欄位更新	PATCH	部分更新（Update）
點刪除按鈕	DELETE	刪除（Delete）

4. HTTP 請求的組成#

一個 HTTP 請求包含：

方法（Method）：GET、POST、PUT…
URL：請求的目標路徑，例如 /users/1
標頭（Headers）：附加資訊，例如 Content-Type: application/json
主體（Body）：（選填）攜帶的資料，常用於 POST / PUT

一個 HTTP 回應包含：

狀態碼（Status Code）：表示結果，例如 200 OK、404 Not Found
標頭（Headers）：附加資訊
主體（Body）：回傳的資料，例如 HTML 頁面或 JSON

5. Express API 與瀏覽器行為的對應#

在 Express 中，每個 API 方法對應一種 HTTP 方法和 URL 的組合：

1
2
3
4
5
6
app.listen(3000)        // 伺服器啟動，開始等待請求

app.get("/users", ...)    // 使用者瀏覽 /users 頁面
app.post("/users", ...)   // 使用者送出新增表單
app.put("/users/1", ...)  // 使用者送出編輯表單（更新 id=1）
app.delete("/users/1", ...)// 使用者點擊刪除 id=1

app.use() 則是所有請求都會先經過的 中介軟體（Middleware），用來做共用處理（如解析 JSON、驗證身份、記錄 log）：

任何請求進來
     ↓
app.use()  →  app.use()  →  app.use()  （依序執行所有中介軟體）
     ↓
app.get() / app.post() / ...  （比對對應的路由）
     ↓
回應給瀏覽器

6. 小結#

概念	說明
HTTP	瀏覽器與伺服器溝通的協議
Request / Response	每次溝通的一問一答
HTTP 方法	表示操作意圖（GET 讀、POST 寫…）
URL	表示操作對象（哪個資源）
狀態碼	表示操作結果（200 成功、404 找不到…）
Express	Node.js 的 Web 框架，讓你用簡潔的 API 處理上述所有事情

理解這些基礎後，後面的 HTTP 伺服器和 Express 章節會更容易掌握。

CH01: Web 開發架構與 HTTP 基礎