Express 框架入門教程

1. 簡介

Express 是一個基于 Node.js 的輕量級、靈活的 Web 應用框架。它提供了豐富的 HTTP 工具和中間件支持，非常適合快速開發 Web 應用程序和 RESTful API。

2. 安裝環境

在開始之前，請確保你已經安裝了以下工具：

• Node.js（建議版本 >= 14）
• npm（Node.js 包管理器）

可以通過以下命令檢查是否已安裝：

node -v
npm -v

3. 創建 Express 項目

3.1 初始化項目

在終端中執行以下命令，創建一個新的項目文件夾并初始化 npm 項目：

mkdir my-express-app
cd my-express-app
npm init -y

3.2 安裝 Express

在項目目錄下運行以下命令，安裝 Express：

npm install express

4. 創建基本的 Express 應用

在項目根目錄下創建一個名為 app.js 的文件，并添加以下代碼：

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

// 定義路由
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// 啟動服務器
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

4.1 啟動應用

在終端中運行以下命令啟動應用：

node app.js

打開瀏覽器訪問 http://localhost:3000，你應該會看到頁面顯示 "Hello World!"。

5. 中間件

中間件是 Express 的核心功能之一，它可以處理請求和響應之間的邏輯。以下是一些常見的中間件使用示例。

5.1 使用內置中間件

Express 提供了一些內置中間件，例如 express.json() 和 express.urlencoded()，用于解析請求體。

在 app.js 中添加以下代碼：

app.use(express.json()); // 用于解析 JSON 格式的請求體
app.use(express.urlencoded({ extended: true })); // 用于解析 URL 編碼的請求體

5.2 自定義中間件

你可以創建自己的中間件來處理特定的邏輯。例如，創建一個簡單的日志中間件：

app.use((req, res, next) => {
  console.log(`Request URL: ${req.url}, Method: ${req.method}`);
  next(); // 調用 next() 將請求傳遞到下一個中間件或路由
});

5.3 第三方中間件

Express 社區提供了大量的第三方中間件。例如，使用 morgan 來記錄 HTTP 請求：

npm install morgan

在 app.js 中使用：

const morgan = require('morgan');
app.use(morgan('dev'));

6. 路由

Express 提供了強大的路由功能，可以方便地定義不同路徑的處理邏輯。

6.1 基本路由

在 app.js 中定義多個路由：

app.get('/about', (req, res) => {
  res.send('This is the about page');
});

app.post('/submit', (req, res) => {
  res.send('Form submitted');
});

6.2 路由參數

可以通過路由參數動態獲取 URL 中的值：

app.get('/user/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`User ID: ${userId}`);
});

6.3 查詢參數

可以通過查詢參數獲取 URL 中的查詢字符串：

app.get('/search', (req, res) => {
  const query = req.query.q;
  res.send(`Search query: ${query}`);
});

6.4 路由分組

對于復雜的項目，可以將路由分組到不同的文件中。例如，創建一個 routes/user.js 文件：

const express = require('express');
const router = express.Router();

router.get('/:id', (req, res) => {
  res.send(`User ID: ${req.params.id}`);
});

module.exports = router;

在 app.js 中引入并使用：

const userRouter = require('./routes/user');
app.use('/user', userRouter);

7. 靜態文件服務

Express 可以輕松地提供靜態文件服務。例如，創建一個 public 文件夾，并在其中放置一些靜態文件（如 index.html 和 style.css）。

在 app.js 中添加以下代碼：

app.use(express.static('public'));

現在，訪問 http://localhost:3000/index.html 將會返回 public/index.html 文件的內容。

8. 錯誤處理

Express 提供了錯誤處理中間件，用于捕獲和處理錯誤。

在 app.js 中添加以下代碼：

// 定義一個錯誤處理中間件
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

9. 連接數據庫

Express 可以與各種數據庫集成。以下是一個使用 MongoDB 的示例。

9.1 安裝 MongoDB 驅動

npm install mongoose

9.2 連接數據庫

在 app.js 中添加以下代碼：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => {
  console.log('Connected to MongoDB');
}).catch(err => {
  console.error('Failed to connect to MongoDB', err);
});

9.3 定義模型

創建一個 models/User.js 文件：

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

module.exports = mongoose.model('User', userSchema);

在 app.js 中使用模型：

const User = require('./models/User');

app.post('/user', async (req, res) => {
  const user = new User(req.body);
  await user.save();
  res.send('User created');
});

10. 部署

部署 Express 應用通常需要以下步驟：

1. 打包代碼：使用 npm run build（如果使用了 TypeScript 或其他構建工具）。
2. 選擇服務器：可以選擇云服務器（如 AWS、Azure、阿里云）或使用 PaaS 平臺（如 Heroku）。
3. 配置環境變量：使用 .env 文件或環境變量管理配置。
4. 啟動應用：使用 pm2 或其他進程管理工具保持應用運行。

10.1 使用 PM2

安裝 PM2：

npm install pm2 -g

啟動應用：

pm2 start app.js

查看應用狀態：

pm2 status

ejs (后端渲染)

在 Express 中使用 EJS（Embedded JavaScript templating）是一種非常流行的方式來渲染動態 HTML 頁面。EJS 是一種簡單的模板引擎，允許你在 HTML 文件中嵌入 JavaScript 代碼，從而實現動態內容的生成。

以下是一個完整的指南，幫助你在 Express 項目中使用 EJS。

---

1. 創建 Express 項目

首先，確保你已經安裝了 Node.js 和 npm。

1.1 初始化項目

在終端中運行以下命令，創建一個新的項目文件夾并初始化 npm 項目：

mkdir my-express-ejs-app
cd my-express-ejs-app
npm init -y

1.2 安裝 Express 和 EJS

在項目目錄下運行以下命令，安裝 Express 和 EJS：

npm install express ejs

---

2. 配置 Express 使用 EJS

在項目根目錄下創建一個名為 app.js 的文件，并添加以下代碼：

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

// 設置 EJS 作為模板引擎
app.set('view engine', 'ejs');

// 設置靜態文件目錄
app.use(express.static('public'));

// 定義路由
app.get('/', (req, res) => {
  const data = {
    title: 'Welcome to My Blog',
    description: 'This is a simple blog built with Express and EJS.',
    posts: [
      { title: 'Post 1', content: 'This is the content of post 1.' },
      { title: 'Post 2', content: 'This is the content of post 2.' }
    ]
  };
  res.render('index', data); // 渲染 EJS 模板
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

---

3. 創建 EJS 模板

在項目目錄下創建一個名為 views 的文件夾，Express 會默認從這個文件夾中查找 EJS 模板文件。

3.1 創建 index.ejs 文件

在 views 文件夾中創建一個名為 index.ejs 的文件，并添加以下內容：

HTML復制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <style>
    body { font-family: Arial, sans-serif; }
    .post { margin-bottom: 20px; }
  </style>
</head>
<body>
  <h1><%= title %></h1>
  <p><%= description %></p>

  <h2>Blog Posts</h2>
  <div id="posts">
    <% posts.forEach(post => { %>
      <div class="post">
        <h3><%= post.title %></h3>
        <p><%= post.content %></p>
      </div>
    <% }) %>
  </div>
</body>
</html>

3.2 EJS 語法說明

• <%= value %>：輸出變量的值，并進行 HTML 轉義，防止 XSS 攻擊。
• <%- value %>：輸出變量的值，不進行 HTML 轉義。
• <% code %>：嵌入 JavaScript 代碼，例如循環或條件語句。

---

4. 創建靜態文件目錄（可選）

如果你需要使用靜態文件（如 CSS、JavaScript 或圖片），可以在項目根目錄下創建一個名為 public 的文件夾，并將靜態文件放在其中。

例如，創建 public/style.css 文件：

css復制

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.post {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

然后在 index.ejs 中引入：

HTML復制

<link rel="stylesheet" href="/style.css">

---

5. 啟動應用

在終端中運行以下命令啟動 Express 應用：

node app.js

打開瀏覽器訪問 http://localhost:3000，你應該會看到動態渲染的頁面，其中包含標題、描述和博客文章列表。

Express創建項目

express-generator 是一個由 Express 官方提供的工具，用于快速生成 Express 項目的初始結構。它可以幫助開發者節省手動創建文件和配置的時間，快速搭建一個完整的項目框架。

如何使用 express-generator

1. 安裝 express-generator

你可以通過以下兩種方式安裝 express-generator：

• 使用 npx（推薦）：如果你的 Node.js 版本 >= 8.2.0，可以直接使用 npx 命令運行生成器，而無需安裝：

  npx express-generator
  

• 全局安裝：對于早期版本的 Node.js，可以將 express-generator 安裝為全局 npm 包：

  npm install -g express-generator
  

2. 創建項目

使用 express-generator 創建一個新項目時，可以通過命令行選項指定項目名稱、視圖引擎、CSS 引擎等。例如：

express --view=ejs myapp

這條命令會在當前目錄下創建一個名為 myapp 的文件夾，并設置 EJS 作為視圖引擎。

3. 項目結構

生成的項目具有以下目錄結構：

復制

myapp/
├── app.js
├── bin/
│   └── www
├── package.json
├── public/
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
│       └── style.css
├── routes/
│   ├── index.js
│   └── users.js
└── views/
    ├── error.ejs
    ├── index.ejs
    └── layout.ejs

4. 安裝依賴并運行

進入項目目錄并安裝依賴：

cd myapp
npm install

運行項目：

• 在 macOS 或 Linux 上：

  DEBUG=myapp:* npm start
  

• 在 Windows 命令提示符上：

  set DEBUG=myapp:* & npm start
  

• 在 Windows PowerShell 上：

  $env:DEBUG='myapp:*'; npm start
  

訪問 http://localhost:3000/ 即可查看運行中的應用程序。

操作數據庫

在 Express 中操作數據庫是構建 Web 應用程序的常見需求。以下是幾種常見的數據庫（如 MySQL、MongoDB 和 PostgreSQL）在 Express 中的集成和操作方法。

1. MySQL 數據庫

MySQL 是一種流行的關系型數據庫，常與 Express 結合使用。

安裝 MySQL 驅動

bash復制

npm install mysql2

創建數據庫連接

JavaScript復制

const mysql = require('mysql2');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydatabase'
});

connection.connect(err => {
  if (err) {
    console.error('連接數據庫失敗: ', err);
    return;
  }
  console.log('連接數據庫成功!');
});

使用連接池

為了提高效率，建議使用連接池：

JavaScript復制

const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydatabase'
});

pool.query('SELECT * FROM users', (err, results, fields) => {
  if (err) {
    console.error('查詢失敗: ', err);
    return;
  }
  console.log(results);
});

2. MongoDB 數據庫

MongoDB 是一種 NoSQL 數據庫，適合存儲大量文檔數據。

安裝 Mongoose

bash復制

npm install 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);
});

定義模型并操作數據

JavaScript復制

const UserSchema = new mongoose.Schema({
  name: String,
  email: String
});

const User = mongoose.model('User', UserSchema);

// 添加數據
const newUser = new User({ name: 'John Doe', email: 'john@example.com' });
newUser.save(err => {
  if (err) console.error(err);
  else console.log('用戶已添加');
});

3. PostgreSQL 數據庫

PostgreSQL 是一種功能強大的關系型數據庫。

安裝 PostgreSQL 驅動

bash復制

npm install pg

創建數據庫連接

JavaScript復制

const { Client } = require('pg');

const client = new Client({
  user: 'postgres',
  host: 'localhost',
  database: 'mydatabase',
  password: 'password',
  port: 5432
});

client.connect(err => {
  if (err) {
    console.error('連接失敗: ', err);
    return;
  }
  console.log('連接成功');
});

client.query('SELECT * FROM users', (err, res) => {
  if (err) {
    console.error('查詢失敗: ', err);
    return;
  }
  console.log(res.rows);
  client.end();
});

4. 通用建議

• 錯誤處理：在實際應用中，建議對數據庫操作中的錯誤進行詳細處理，避免程序崩潰。
• 環境變量：將數據庫連接信息（如用戶名、密碼）存儲在環境變量中，避免直接寫入代碼。
• ORM 工具：對于關系型數據庫，可以使用 ORM 工具（如 Sequelize）來簡化數據庫操作。