教案：CRUD 應用 App（班級留言板與聊天室）
這個教案將基於 Node.js 作為後端，搭配 Express.js 作為 Web 框架，並使用 MongoDB（Mongoose） 作為資料庫，因為它易於使用，適合 CRUD 應用，且與 JavaScript 兼容性高。前端則使用 HTML、CSS、JavaScript（Fetch API 或簡單的 Vue.js） 來實作班級留言板與聊天室。
課程目標
- 了解 CRUD（Create, Read, Update, Delete） 的概念與實作方式。
- 學習 Node.js + Express.js 搭建後端 API。
- 熟悉 MongoDB（Mongoose） 進行資料存取。
- 前端透過 Fetch API / Vue.js 進行 API 呼叫與動態渲染。
- 透過 WebSocket（Socket.io） 實現即時聊天室功能。
適用對象
- 大學入門級學生，有基本 JavaScript、HTML、CSS 基礎。
課程時間規劃（9 週）
每個議題約 3 週，共 9 週 完成專案。
| 週次 | 內容 | 主要技術 |
|---|---|---|
| 1-3 | CRUD API 開發（留言板） | Node.js, Express.js, MongoDB (Mongoose) |
| 4-6 | 前端介面開發與 API 串接 | HTML, CSS, JavaScript（Fetch API / Vue.js） |
| 7-9 | 即時聊天室功能（WebSocket） | Socket.io, WebSocket |
第一部分：留言板 CRUD
1.1 後端 API 開發
安裝與專案初始化
mkdir class-board cd class-board npm init -y npm install express mongoose cors body-parser dotenv
- Express.js：處理 API 路由
- Mongoose：操作 MongoDB
- CORS：解決跨域請求
- body-parser：解析 JSON
建立 server.js
require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect(process.env.MONGO_URL, {
useNewUrlParser: true,
useUnifiedTopology: true,
}).then(() => console.log("MongoDB Connected"));
const messageSchema = new mongoose.Schema({
user: String,
message: String,
createdAt: { type: Date, default: Date.now }
});
const Message = mongoose.model('Message', messageSchema);
// 建立留言
app.post('/messages', async (req, res) => {
const newMessage = new Message(req.body);
await newMessage.save();
res.json(newMessage);
});
// 讀取留言
app.get('/messages', async (req, res) => {
const messages = await Message.find().sort({ createdAt: -1 });
res.json(messages);
});
// 更新留言
app.put('/messages/:id', async (req, res) => {
const updatedMessage = await Message.findByIdAndUpdate(req.params.id, req.body, { new: true });
res.json(updatedMessage);
});
// 刪除留言
app.delete('/messages/:id', async (req, res) => {
await Message.findByIdAndDelete(req.params.id);
res.json({ message: "Deleted" });
});
app.listen(3000, () => console.log('Server running on port 3000'));
環境變數 .env
MONGO_URL=mongodb+srv://your_user:your_password@cluster0.mongodb.net/myDatabase
第二部分：前端留言板介面
2.1 前端 HTML
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>班級留言板</title>
<script defer src="app.js"></script>
</head>
<body>
<h1>班級留言板</h1>
<input id="username" type="text" placeholder="輸入你的名字">
<textarea id="message" placeholder="輸入留言"></textarea>
<button onclick="sendMessage()">送出</button>
<div id="messages"></div>
</body>
</html>
2.2 JavaScript (app.js)
const apiUrl = "http://localhost:3000/messages";
async function loadMessages() {
const res = await fetch(apiUrl);
const messages = await res.json();
document.getElementById("messages").innerHTML = messages.map(msg =>
`<p><strong>${msg.user}:</strong> ${msg.message} <button onclick="deleteMessage('${msg._id}')">刪除</button></p>`
).join("");
}
async function sendMessage() {
const user = document.getElementById("username").value;
const message = document.getElementById("message").value;
await fetch(apiUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ user, message })
});
loadMessages();
}
async function deleteMessage(id) {
await fetch(`${apiUrl}/${id}`, { method: "DELETE" });
loadMessages();
}
loadMessages();
第三部分：即時聊天室
3.1 安裝 WebSocket
npm install socket.io
3.2 伺服器端 WebSocket
const http = require('http');
const { Server } = require("socket.io");
const server = http.createServer(app);
const io = new Server(server, { cors: { origin: "*" } });
io.on('connection', (socket) => {
console.log("User connected");
socket.on('chatMessage', (msg) => {
io.emit('chatMessage', msg);
});
});
server.listen(3000, () => console.log('Server running on port 3000'));
3.3 前端 WebSocket (chat.js)
const socket = io("http://localhost:3000");
document.getElementById("send").addEventListener("click", () => {
const user = document.getElementById("username").value;
const message = document.getElementById("message").value;
socket.emit("chatMessage", `${user}: ${message}`);
});
socket.on("chatMessage", (msg) => {
const div = document.createElement("div");
div.innerText = msg;
document.getElementById("chat").appendChild(div);
});
總結
- 第一階段：完成基本的 CRUD 留言板，熟悉 API 開發與 MongoDB 操作。
- 第二階段：前端串接 API，建立留言板 UI。
- 第三階段：加入 WebSocket，即時聊天室功能。
這個教案完整涵蓋 Node.js 後端、MongoDB 資料庫、前端 API 串接、即時 WebSocket 應用，適合作為入門實作專案！🚀
You may also like
將Google Sheets做為自製線上表單的資料儲存
2025 年 3 月 30 日
🚀 GitHub 版本管控實戰教學
2025 年 3 月 14 日
MongoDB安裝
2025 年 3 月 14 日