
教案: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 應用,適合作為入門實作專案!🚀