2024-08-24|閱讀時間 ‧ 約 22 分鐘

使用 Node.js 製作日曆應用程式：完整教學

在這篇教學文章中，我們將展示如何使用 Node.js 來製作一個簡單的日曆應用程式。這個應用程式將允許用戶查看日曆、添加事件、刪除事件和更新事件。通過這個過程，我們將使用 Express 來建立伺服器，並使用 FullCalendar 來呈現前端的日曆。

AltumCode null on Unsplash

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 中處理伺服器端邏

分享至

成為作者繼續創作的動力吧！

簡單易懂的C#學習筆記

追蹤

使用 Node.js 製作日曆應用程式：完整教學

1. 初始化專案

2. 安裝所需的函式庫

3. 設定伺服器

4. 建立前端日曆頁面

5. 設置靜態文件

6. 啟動伺服器並測試

7. 完善應用程式功能

結論

程式輕鬆玩的其他內容

你可能也想看

發表回應

使用 Node.js 製作日曆應用程式：完整教學

1. 初始化專案

2. 安裝所需的函式庫

3. 設定伺服器

4. 建立前端日曆頁面

5. 設置靜態文件

6. 啟動伺服器並測試

7. 完善應用程式功能

結論

程式輕鬆玩 的其他內容

你可能也想看

發表回應

程式輕鬆玩的其他內容