使用 Node.js 製作日曆應用程式：完整教學
在這篇教學文章中，我們將展示如何使用 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 中處理伺服器端邏
69會員
134內容數
這裡將以輕鬆風格，深入探討程式設計的基礎和高級概念。從程式語言到演算法，我們將以易懂的方式解釋每個主題，讓你輕鬆掌握。無論你是初學者或有經驗者，都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識，我們都會陪伴你一同成長！
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
嗨，你有沒有想過用 ChatGPT 來減少 DevOps 工作？
今天我將向您展示如何使用 ChatGPT 減少 NodeJS 網絡應用程式的鏡像大小。
您會驚訝於 ChatGPT 如何能夠在短短幾分鐘內輕鬆生成一個無錯誤的 Docker 文件，來優化 Node.js docker 映像的大小。
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。
Cluster的原理很簡單，由於每個Process都只能用單核心的CPU來運行，那麼就多開幾個來幫忙處理吧！ 而這個Clust
會選擇方格子作為書寫文章的分享平台，是一場意外。但人生就是充滿意外!
一直以來都有閱讀跟書寫的習慣，更要不得的是那個"分享"與"記錄"的慾望!!
其實，也不是真正要去經營什麼或靠咬筆桿生活(我可能真的只能吃筆桿過活)
只是純粹想把自己當下的心情、感受與所感、所悟記錄下來送給當下的自己:P
Potato Media雖然和方格子及Matters同樣歸類為寫作平台，同樣強調將內容變現，前者卻與後面兩者完全不同，當然，所獲得的收入報酬也不會一樣，更清楚一點來說，連獲得收益的方式也大不相同。
使用三步驟便能讓ChatGPT幫你創作小說，還能跨平台接力使用，不僅方便，又很輕鬆愉快。但對於敏感內容，或是字數太多的內容，ChatGPT便處理不來。使用ChatGPT與Midjourney時，偶爾會讓我感受到「腦子裡沒想法，工具再強也沒有用」 的挫折
身為使用Cloudways等等許多外國服務的消費者，我很常直接寫個信請客服人員解決我的問題，如果有真人對談的客服更好！過招久了，大概會抓到幾個提問的英文句型和訣竅。透過這篇，我把私藏分享給大家，看到這篇你就賺到囉。
在交友軟體上認識人快速，同時建立的關係也不像現實生活那樣有所拘束，可以說不聊就不聊也不用太有壓力，所以大家習慣的相處方式也會不太一樣，這裡給大家一些建議。
心態
雖然不少人來交友軟體就是要找對象的，不過一樣，不要把這件事時時刻刻放在心上，滑到一個新人時，請當作你是來認識人的，對方還不認識你，不是你的
嗨，你有沒有想過用 ChatGPT 來減少 DevOps 工作？
今天我將向您展示如何使用 ChatGPT 減少 NodeJS 網絡應用程式的鏡像大小。
您會驚訝於 ChatGPT 如何能夠在短短幾分鐘內輕鬆生成一個無錯誤的 Docker 文件，來優化 Node.js docker 映像的大小。
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。
Cluster的原理很簡單，由於每個Process都只能用單核心的CPU來運行，那麼就多開幾個來幫忙處理吧！ 而這個Clust
會選擇方格子作為書寫文章的分享平台，是一場意外。但人生就是充滿意外!
一直以來都有閱讀跟書寫的習慣，更要不得的是那個"分享"與"記錄"的慾望!!
其實，也不是真正要去經營什麼或靠咬筆桿生活(我可能真的只能吃筆桿過活)
只是純粹想把自己當下的心情、感受與所感、所悟記錄下來送給當下的自己:P
Potato Media雖然和方格子及Matters同樣歸類為寫作平台，同樣強調將內容變現，前者卻與後面兩者完全不同，當然，所獲得的收入報酬也不會一樣，更清楚一點來說，連獲得收益的方式也大不相同。
使用三步驟便能讓ChatGPT幫你創作小說，還能跨平台接力使用，不僅方便，又很輕鬆愉快。但對於敏感內容，或是字數太多的內容，ChatGPT便處理不來。使用ChatGPT與Midjourney時，偶爾會讓我感受到「腦子裡沒想法，工具再強也沒有用」 的挫折
身為使用Cloudways等等許多外國服務的消費者，我很常直接寫個信請客服人員解決我的問題，如果有真人對談的客服更好！過招久了，大概會抓到幾個提問的英文句型和訣竅。透過這篇，我把私藏分享給大家，看到這篇你就賺到囉。
在交友軟體上認識人快速，同時建立的關係也不像現實生活那樣有所拘束，可以說不聊就不聊也不用太有壓力，所以大家習慣的相處方式也會不太一樣，這裡給大家一些建議。
心態
雖然不少人來交友軟體就是要找對象的，不過一樣，不要把這件事時時刻刻放在心上，滑到一個新人時，請當作你是來認識人的，對方還不認識你，不是你的