使用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,提供了良好的基础。