在這篇教學文章中，我們將展示如何使用 Node.js 來製作一個簡單的日曆應用程式。這個應用程式將允許用戶查看日曆、添加事件、刪除事件和更新事件。通過這個過程，我們將使用 Express 來建立伺服器，並使用 FullCalendar 來呈現前端的日曆。
1. 初始化專案
首先，我們需要在本地電腦上初始化一個 Node.js 專案。mkdir calendar-app
cd calendar-app
npm init -y
2. 安裝所需的函式庫
接著，我們需要安裝一些必要的函式庫來幫助我們構建日曆應用程式。
npm install express dayjs ejs body-parser
這些函式庫的用途如下：
- Express：一個輕量級的 Node.js 網頁應用框架，用來建立伺服器。
- dayjs：一個小巧的 JavaScript 函式庫，用於處理日期和時間（我們可以用來替代 moment）。
- ejs：一個簡單的模板引擎，允許我們在伺服器端生成 HTML。
- body-parser：用於解析 HTTP 請求的 body。
3. 設定伺服器
現在，我們來建立伺服器的基本設定。在專案目錄中建立一個名為 app.js 的檔案，然後在其中加入以下代碼：
const express = require('express');
const bodyParser = require('body-parser');
const dayjs = require('dayjs');
const app = express();
const PORT = 3000;
// 設定模板引擎
app.set('view engine', 'ejs');
// 解析 application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// 解析 application/json
app.use(bodyParser.json());
// 設定靜態檔案目錄
app.use(express.static('public'));
// 模擬事件資料（在正式應用中可以使用資料庫）
let events = [
{ id: 1, title: '會議', start: '2024-08-25', end: '2024-08-25' },
{ id: 2, title: '項目截止日', start: '2024-08-30', end: '2024-08-30' }
];
// 設定首頁路由
app.get('/', (req, res) => {
const today = dayjs();
res.render('index', { today });
});
// 獲取所有事件
app.get('/events', (req, res) => {
res.json(events);
});
// 新增事件
app.post('/events', (req, res) => {
const { title, start, end } = req.body;
const newEvent = { id: events.length + 1, title, start, end };
events.push(newEvent);
res.status(200).json({ message: '事件已新增', event: newEvent });
});
// 刪除事件
app.delete('/events/:id', (req, res) => {
const eventId = parseInt(req.params.id);
events = events.filter(event => event.id !== eventId);
res.status(200).json({ message: '事件已刪除' });
});
// 更新事件
app.put('/events/:id', (req, res) => {
const eventId = parseInt(req.params.id);
const { title, start, end } = req.body;
const eventIndex = events.findIndex(event => event.id === eventId);
if (eventIndex !== -1) {
events[eventIndex] = { id: eventId, title, start, end };
res.status(200).json({ message: '事件已更新', event: events[eventIndex] });
} else {
res.status(404).json({ message: '事件未找到' });
}
});
// 啟動伺服器
app.listen(PORT, () => {
console.log(`伺服器正在運行於 http://localhost:${PORT}`);
});
4. 建立前端日曆頁面
接下來，我們需要建立前端頁面來顯示日曆。首先，建立一個目錄名為 views，並在其中創建一個名為 index.ejs 的檔案。
在 index.ejs 中加入以下代碼：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日曆應用</title>
<!-- 引入 FullCalendar CSS 和 JS -->
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales/zh-tw.js'></script>
</head>
<body>
<div id='calendar'></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'zh-tw',
events: '/events', // 從後端獲取事件資料
editable: true, // 允許拖放事件
droppable: true // 允許從外部拖入
});
calendar.render();
});
</script>
</body>
</html>
5. 設置靜態文件
確保你的 public 目錄存在，並且可以在其中放置任何必要的靜態文件（如樣式表或客製化的 JavaScript）。
6. 啟動伺服器並測試
現在，你可以啟動伺服器並查看日曆應用程式了。返回終端並執行以下命令：
node app.js
在瀏覽器中打開 http://localhost:3000，你應該可以看到一個簡單的日曆應用程式，其中顯示了預設的事件。
7. 完善應用程式功能
到目前為止，你已經成功建立了一個基本的日曆應用程式，並能夠顯示和管理事件。你可以根據需求進一步擴展應用程式的功能，例如：
- 增加事件詳細信息：為每個事件添加更多的屬性，例如地點、描述等。
- 用戶認證和授權：確保只有授權用戶可以添加、編輯或刪除事件。
- 通知和提醒功能：允許用戶為特定事件設置提醒。
- 與資料庫整合：將事件存儲到資料庫中，例如 MongoDB 或 MySQL。
結論
通過本篇教學文章，我們學習了如何使用 Node.js 建立一個基本的日曆應用程式。雖然這個範例很簡單，但它為你提供了一個良好的起點，幫助你理解如何在 Node.js 中處理伺服器端邏
