前言
本文是前端工作坊的教學文件,介紹如何使用 Vue 3 和 Express 實作內容管理系統,並搭配 Firebase 實現持久化和認證。
開啟專案
開啟後端專案。
1 2
| cd simple-cms-api code .
|
添加熱重載功能
安裝 nodemon
套件,每當程式碼有更新,就能透過 nodemon
自動重啟應用程式,實現熱重載功能。
修改 package.json
檔。
1 2 3 4 5 6 7 8
| { "scripts": { "dev": "nodemon index.js" } }
|
啟動伺服器。
提交修改。
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) => { });
app.get('/api/customers/:id', (req, res) => { });
app.post('/api/customers', (req, res) => { });
app.put('/api/customers/:id', (req, res) => { });
app.delete('/api/customers/:id', (req, res) => { });
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;
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 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 模組使用 import
和 export
語法,比 CommonJS 的 require
和 module.exports
更加簡潔明了。
重構
修改 package.json
檔。
將 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
|
程式碼