# Express.js ## 1. 什麼是 Express.js? Express.js 是一個基於 Node.js 的輕量級 Web 應用框架。 它簡化了 Web 伺服器的搭建過程,讓開發者可以更快速地構建 Web 應用或 API。 ### Express.js 的特點包括: - 極簡的 API,適合構建輕量級應用。 - 支援中介軟體(Middleware),方便處理請求和回應。 - 可擴展性強,與其他 Node.js 模組兼容良好。 ## 2. 安裝 Express.js 首先,確保你已經安裝了 Node.js 和 npm(Node.js 的包管理器)。 接著,在一個新的專案資料夾中執行以下命令來安裝 Express.js: ```bash= npm init -y # 初始化 npm 專案 npm install express --save # 安裝 Express.js ``` ## 3. 基本應用結構 使用 Express.js,創建一個基本的 Web 伺服器非常簡單。 以下是最小化的 Express 應用: ```javascript= const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Hello, Express.js!'); }); app.listen(port, () => { console.log(`伺服器正在運行於 http://localhost:${port}`); }); ``` 這個範例程式: * 建立一個 Express 應用程式 `app`。 * 使用 `app.get()` 定義一個路由來處理根目錄 `/` 的 HTTP GET 請求,並回應文字 "Hello, Express.js!"。 * 使用 `app.listen()` 開啟伺服器,並監聽端口 `3000`。 ## 4. 路由(Routing) Express.js 提供了靈活的路由機制,可以針對不同的 URL 路徑處理不同的請求。 範例: ```javascript= app.get('/about', (req, res) => { res.send('這是關於頁面'); }); app.post('/submit', (req, res) => { res.send('表單已提交'); }); ``` * `GET` 請求:用於讀取資源,如顯示頁面內容。 * `POST` 請求:用於提交數據,如表單。 ## 5. 中介軟體(Middleware) 中介軟體是 Express.js 中處理請求和回應的一部分,可以用來實現如身份驗證、錯誤處理等功能。 範例: ```javascript= app.use((req, res, next) => { console.log('收到一個請求'); next(); // 繼續處理 }); ``` * `next`:當middleware完成時呼叫的程式 ### Express 中的常見中介軟體 * `express.json()`: 解析傳入的 JSON 請求體,並將其放入 req.body 中。 * `express.urlencoded()`: 解析 URL 編碼的表單數據。 * `express.static()`: 提供靜態文件,如 HTML、CSS、JavaScript 檔案。 * 自定義中介軟體: 開發者可以根據需求編寫自己的中介軟體。 ## 6. 處理 JSON 和表單數據 Express.js 可以輕鬆處理 JSON 和表單數據,必須使用內建的中介軟體: ```javascript= app.use(express.json()); // 處理 JSON 數據 app.use(express.urlencoded({ extended: true })); // 處理表單數據 app.post('/submit', (req, res) => { console.log(req.body); // 讀取提交的數據 res.send('數據已接收'); }); ``` ## 7. 錯誤處理 Express.js 中可以使用中介軟體來處理錯誤: ```javascript= app.use((err, req, res, next) => { console.error(err.stack); res.status(500).send('伺服器錯誤!'); }); ``` ## 8. 靜態檔案服務 可以使用 Express 來提供靜態檔案,如 HTML、CSS、圖片等: ```javascript= app.use(express.static('public')); // 提供 public 資料夾中的靜態檔案 ``` ## 9. 路由參數 Express 可以使用路由參數來動態處理不同的請求: ```javascript= app.get('/user/:id', (req, res) => { const userId = req.params.id; res.send(`使用者 ID: ${userId}`); }); ``` ## 10. 結合 MongoDB(選用) Express.js 經常與 MongoDB 一起使用來實現數據庫操作。可以透過 mongoose 來連接 MongoDB: ```bash= npm install mongoose --save # 安裝 mongoose ``` 以下是連接 MongoDB 的範例: ```javascript= const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true }).then(() => { console.log('成功連接到 MongoDB'); }).catch(err => { console.error('連接 MongoDB 失敗', err); }); ```