使用 Vue 3 和 Express 實作內容管理系統(四):實作後端路由

前言

本文是前端工作坊的教學文件,介紹如何使用 Vue 3 和 Express 實作內容管理系統,並搭配 Firebase 實現持久化和認證。

開啟專案

開啟後端專案。

1
2
cd simple-cms-api
code .

添加熱重載功能

安裝 nodemon 套件,每當程式碼有更新,就能透過 nodemon 自動重啟應用程式,實現熱重載功能。

1
npm install nodemon -D

修改 package.json 檔。

1
2
3
4
5
6
7
8
{
// ...
"scripts": {
// ...
"dev": "nodemon index.js"
}
// ...
}

啟動伺服器。

1
npm run dev

提交修改。

1
2
3
git add .
git commit -m "Add nodemon"
git push

實作路由

修改 index.js 檔,建立一個測試端點。

1
2
3
4
5
6
7
8
9
10
11
12
13
const express = require('express');
const app = express();
const port = 3000;

// 測試端點
app.get('/api', (req, res) => {
res.json({ message: 'Hello, World!' });
});

// 啟動伺服器
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});

使用瀏覽器查看:http://localhost:3000/api

定義 RESTful API

Ref: https://aws.amazon.com/tw/what-is/restful-api/

修改 index.js 檔,定義 RESTful API 端點,以客戶管理為例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const express = require('express');
const app = express();
const port = 3000;

// 測試端點
app.get('/api', (req, res) => {
res.json({ message: 'Hello, World!' });
});

// 取得所有客戶
app.get('/api/customers', (req, res) => {
// TODO
});

// 取得單個客戶
app.get('/api/customers/:id', (req, res) => {
// TODO
});

// 建立客戶
app.post('/api/customers', (req, res) => {
// TODO
});

// 更新客戶
app.put('/api/customers/:id', (req, res) => {
// TODO
});

// 刪除客戶
app.delete('/api/customers/:id', (req, res) => {
// TODO
});

// 啟動伺服器
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});

提交修改。

1
2
3
git add .
git commit -m "Add todo api endpoints"
git push

實作 RESTful API

修改 index.js 檔,實作 RESTful API 端點,使用假資料模擬。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
const express = require('express');
const app = express();
const port = 3000;

// 啟用 JSON 解析
app.use(express.json());

// 假資料
const customers = [
{ id: 1, name: 'Customer 1' },
{ id: 2, name: 'Customer 2' },
];

// 測試端點
app.get('/api', (req, res) => {
res.json({ message: 'Hello, World!' });
});

// 取得所有客戶端點
app.get('/api/customers', (req, res) => {
res.json(customers);
});

// 取得單個客戶端點
app.get('/api/customers/:id', (req, res) => {
const id = parseInt(req.params.id);
const customer = customers.find(customer => customer.id === id);
if (!customer) {
return res.status(404).json({
message: 'Customer not found',
});
}

res.json(customer);
});

// 建立客戶端點
app.post('/api/customers', (req, res) => {
const customer = {
id: customers.length + 1,
name: req.body.name,
};

customers.push(customer);

res.status(201).json(customer);
});

// 更新客戶端點
app.put('/api/customers/:id', (req, res) => {
const id = parseInt(req.params.id);
const customer = customers.find(customer => customer.id === id);
if (!customer) {
return res.status(404).json({
message: 'Customer not found',
});
}

customer.name = req.body.name;

res.json(customer);
});

// 刪除客戶端點
app.delete('/api/customers/:id', (req, res) => {
const id = parseInt(req.params.id);
const index = customers.findIndex(customer => customer.id === id);
if (index === -1) {
return res.status(404).json({
message: 'Customer not found',
});
}

customers.splice(index, 1);

res.status(204).send();
});

// 啟動伺服器
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});

啟動伺服器。

1
npm run dev

提交修改。

1
2
3
git add .
git commit -m "Implement api endpoints"
git push

使用 Postman 測試 API。

轉換為 ES 模組

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

認識 ES 模組

ES 模組(ECMAScript Modules,ESM)是 JavaScript 的官方標準模組系統,與 CommonJS 不同,ES 模組提供更清晰、靈活的語法來管理模組。隨著 Node 和瀏覽器對 ES 模組支援度的提升,轉換為 ES 模組有助於保持程式碼的現代性和兼容性。除此之外,ES 模組使用 importexport 語法,比 CommonJS 的 requiremodule.exports 更加簡潔明了。

重構

修改 package.json 檔。

1
2
3
{
"type": "module",
}

eslint.config.mjs 檔重新命名為 eslint.config.js 檔。

1
mv eslint.config.mjs eslint.config.js

修改 index.js 檔,使用 import 語法引入依賴。

1
import express from 'express';

提交修改。

1
2
3
git add .
git commit -m "Use es modules instead of commonjs"
git push

程式碼