使用Node.js实现一个日历应用，用户可以添加、删除和修改日程事件

JJCTO袁龙

于 2024-08-22 16:27:43 发布

阅读量459

点赞数 8

分类专栏： Node.js 文章标签： node.js

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141431556

版权

Node.js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

使用Node.js实现一个日历应用：添加、删除和修改日程事件

在这个数字化时代，日历应用几乎是我们生活中不可或缺的一部分。无论是个人事务、工作安排还是社交活动，能够方便地管理日程是非常重要的。在本篇文章中，我们将使用Node.js来实现一个简单的日历应用，用户可以通过它添加、删除和修改日程事件。

项目结构

在开始之前，我们先来看一下项目的基本结构：

calendar-app/
│
├── index.js           // 主入口文件
├── package.json       // 项目配置文件
├── public/            // 存放静态文件
│   ├── index.html     // 前端页面
│   └── styles.css     // 样式文件
└── events.json        // 存放日程事件的文件

环境安装

确保你已经安装了Node.js和npm。你可以使用以下命令检查：

node -v
npm -v

接下来，在项目目录下初始化一个新的Node.js项目：

mkdir calendar-app
cd calendar-app
npm init -y

我们需要安装几个依赖库，包括express和body-parser：

npm install express body-parser

主入口文件 - index.js

在index.js中，我们将创建一个简单的Express服务器，并定义处理日程事件的API。

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const app = express();
const port = 3000;

// 使用body-parser中间件
app.use(bodyParser.json());
app.use(express.static('public'));

// 读取存储事件的JSON文件
const readEvents = () => {
    const data = fs.readFileSync('events.json', 'utf8');
    return JSON.parse(data);
}

// 保存事件到JSON文件
const saveEvents = (events) => {
    fs.writeFileSync('events.json', JSON.stringify(events, null, 2));
}

// 获取所有日程事件
app.get('/api/events', (req, res) => {
    const events = readEvents();
    res.json(events);
});

// 添加新的日程事件
app.post('/api/events', (req, res) => {
    const events = readEvents();
    const newEvent = req.body;
    events.push(newEvent);
    saveEvents(events);
    res.status(201).json(newEvent);
});

// 删除日程事件
app.delete('/api/events/:id', (req, res) => {
    const events = readEvents();
    const eventId = req.id;
    const updatedEvents = events.filter(event => event.id !== eventId);
    saveEvents(updatedEvents);
    res.status(204).send();
});

// 修改日程事件
app.put('/api/events/:id', (req, res) => {
    const events = readEvents();
    const eventId = req.params.id;
    const updatedEvent = req.body;
    const index = events.findIndex(event => event.id === eventId);
    if (index !== -1) {
        events[index] = { ...events[index], ...updatedEvent };
        saveEvents(events);
        res.json(events[index]);
    } else {
        res.status(404).send('Event not found');
    }
});

// 启动服务器
app.listen(port, () => {
    console.log(`Calendar app listening at http://localhost:${port}`);
});

存储事件的文件 - events.json

创建一个名为events.json的文件，初始内容为空的数组：

[]

前端页面 - index.html

在public目录下创建index.html文件，用于显示和操作日程事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>日历应用</title>
</head>
<body>
    <h1>日历应用</h1>
    <form id="eventForm">
        <input type="hidden" id="eventId" />
        <input type="text" id="eventTitle" placeholder="事件标题" required />
        <input type="date" id="eventDate" required />
        <button type="submit">添加/更新事件</button>
    </form>
    <ul id="eventList"></ul>

    <script>
        document.getElementById('eventForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const title = document.getElementById('eventTitle').value;
            const date document.getElementById('eventDate').value;
            const id = document.getElementById('eventId').value;

            if (id) {
                // 更新事件
                await fetch(`/api/events/${id}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ title, date })
                });
            } else {
                // 添加事件
                await fetch('/api/events', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id: new Date().getTime().toString(), title, date })
                });
            }
            document.getElementById('eventForm').reset();
            loadEvents();
        });

        async function loadEvents() {
            const res = await fetch('/api/events');
            const events = await res.json();
            const eventList = document.getElementById('eventList');
            eventList.innerHTML = '';

            events.forEach(event => {
                const li = document.createElement('li');
                li.innerHTML = `${event.title} - ${event.date} <button οnclick="deleteEvent('${event.id}')">删除</button> <button οnclick="editEvent('${event.id}', '${event.title}', '${event.date}')">编辑</button>`;
                eventList.appendChild(li);
            });
        }

        async function deleteEvent(id) {
            await fetch(`/api/events/${id}`, { method: 'DELETE' });
            loadEvents();
        }

        function editEvent(id, title, date) {
            document.getElementById('eventId').value = id;
            document.getElementById('eventTitle').value = title;
            document.getElementById('eventDate').value = date;
        }

        loadEvents();
    </script>
</body>
</html>

样式文件 - styles.css

虽然功能优先，但我们依然可以为应用添加一些基本样式。在public/styles.css中添加以下内容：

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

form {
    margin-bottom: 20px;
}

input {
    margin-right: 10px;
}

button {
    padding: 5px 10px;
    cursor: pointer;
}

运行应用

现在，一切都设置好了。进入终端，运行以下命令启动服务器：

node index.js

在浏览器中打开http://localhost:3000，您应该能够看到我们的日历应用界面。您可以添加、修改和删除日程事件。

总结

在本篇博客中，我们使用Node.js创建了一个简单的日历应用，构建了添加、删除和修改日程事件的功能。这个项目不仅仅展示了Node.js的基本用法，也为进一步的功能扩展，例如为事件添加提醒或集成到第三方API，提供了良好的基础。

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情

在这里插入图片描述

JJCTO袁龙

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Node.js实现一个日历应用，用户可以添加、删除和修改日程事件

在本篇博客中，我们使用Node.js创建了一个简单的日历应用，构建了添加、删除和修改日程事件的功能。这个项目不仅仅展示了Node.js的基本用法，也为进一步的功能扩展，例如为事件添加提醒或集成到第三方API，提供了良好的基础。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。
复制链接

扫一扫