题目描述：
你正在开发一个简单的待办事项应用，用户可以在网页上创建和管理自己的待办事项列表。请根据以下要求完成代码实现。
前端任务：
在HTML页面上创建一个表单，包含以下字段：
任务名称：用户输入待办事项的名称。
截止日期：用户选择待办事项的截止日期。
使用JavaScript/jQuery编写前端逻辑，实现以下功能：
在表单提交前对用户输入进行验证，验证不通过时阻止表单提交并给出相应提示信息。
验证任务名称和截止日期是否为空，以及截止日期是否在当前日期之前。
使用jQuery的Ajax方法，将表单数据以JSON格式发送到后端的"/api/tasks"路由，并在成功后刷新待办事项列表显示最新的待办事项。
后端任务：
使用Node.js和Express框架创建一个服务器应用程序。
创建一个POST路由"/api/tasks"，接收来自前端的任务数据，并进行后端处理。
将接收到的任务数据保存到一个数组中（每个任务对象包含任务名称和截止日期）。
创建一个GET路由"/api/tasks"，用于获取已创建的待办事项列表。
你需要完成以下任务：
在前端编写HTML、CSS和JavaScript/jQuery代码，实现待办事项的创建表单和验证逻辑。
在后端使用Node.js和Express框架，创建路由和处理逻辑。
将前后端代码连接起来，实现待办事项的创建和列表显示的完整功能。
注意：为了简化题目，可以将任务数据保存在服务器端的数组中，无需使用真实的数据库。
前端代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>待办事项应用</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>待办事项应用</h1>
<form id="task-form">
<label for="task-name">任务名称：</label>
<input type="text" id="task-name" name="task-name" required>
<label for="due-date">截止日期：</label>
<input type="date" id="due-date" name="due-date" required>
<button type="submit">添加任务</button>
</form>
<div id="task-list"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS代码：
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
label {
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"],
input[type="date"] {
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: 1px 1px 5px #ccc;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
#task-list {
display: flex;
flex-direction: column;
}
.task {
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 1px 1px 5px #ccc;
}
.task-name {
font-weight: bold;
margin-bottom: 5px;
}
.task-due-date {
color: #666;
}
后端代码：
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
let tasks = [];
app.post('/api/tasks', (req, res) => {
const taskName = req.body['task-name'];
const dueDate = req.body['due-date'];
const task = {
name: taskName,
dueDate: dueDate
};
tasks.push(task);
res.sendStatus(200);
});
app.get('/api/tasks', (req, res) => {
res.json(tasks);
});
const port = 3000;
app.listen(port, () => console.log(Server running on port ${port}));
JavaScript/jQuery代码：
$(function() {
$('#task-form').submit(function(event) {
event.preventDefault();
const taskName = $('#task-name').val();
const dueDate = $('#due-date').val();
const currentDate = new Date().toISOString().slice(0, 10);
if (taskName === '') {
alert('请输入任务名称');
return false;
}
if (dueDate === '') {
alert('请选择截止日期');
return false;
}
if (dueDate < currentDate) {
alert('截止日期不能早于当前日期');
return false;
}
const formData = {
'task-name': taskName,
'due-date': dueDate
};
$.ajax({
type: 'POST',
url: '/api/tasks',
data: formData,
success: function() {
$('#task-form')[0].reset();
refreshTaskList();
}
});
});
function refreshTaskList() {
$.get('/api/tasks', function(tasks) {
let taskListHtml = '';
for (let i = 0; i < tasks.length; i++) {
const task = tasks[i];
const taskHtml = `
<div class="task">
<div class="task-name">${task.name}</div>
<div class="task-due-date">截止日期：${task.dueDate}</div>
</div>
`;
taskListHtml += taskHtml;
}
$('#task-list').html(taskListHtml);
});
}
refreshTaskList();
});
前端代码
<!DOCTYPE html>
<html>
<head>
<title>待办事项应用</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>待办事项应用</h1>
<form id="taskForm">
<label for="taskName">任务名称:</label>
<input type="text" id="taskName" required>
<br>
<label for="dueDate">截止日期:</label>
<input type="date" id="dueDate" required>
<br>
<button type="submit">添加任务</button>
</form>
<div id="taskList"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS代码
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
text-align: center;
}
form {
margin-bottom: 20px;
}
#taskList {
margin-top: 20px;
}
.taskItem {
margin-bottom: 10px;
}
前端JavaScript/jQuery代码
$(document).ready(function() {
$('#taskForm').submit(function(event) {
event.preventDefault();
var taskName = $('#taskName').val();
var dueDate = $('#dueDate').val();
if (taskName.trim() === '') {
alert('请填写任务名称');
return;
}
var today = new Date();
var selectedDate = new Date(dueDate);
if (selectedDate < today) {
alert('截止日期不能早于今天');
return;
}
var taskData = {
taskName: taskName,
dueDate: dueDate
};
$.ajax({
type: 'POST',
url: '/api/tasks',
data: JSON.stringify(taskData),
contentType: 'application/json',
success: function() {
$('#taskName').val('');
$('#dueDate').val('');
loadTaskList();
},
error: function() {
alert('无法添加任务');
}
});
});
function loadTaskList() {
$.ajax({
type: 'GET',
url: '/api/tasks',
success: function(tasks) {
$('#taskList').empty();
tasks.forEach(function(task) {
var taskItem = $('<div>').addClass('taskItem');
var taskName = $('<h3>').text(task.taskName);
var dueDate = $('<p>').text('截止日期: ' + task.dueDate);
taskItem.append(taskName);
taskItem.append(dueDate);
$('#taskList').append(taskItem);
});
},
error: function() {
alert('无法获取任务列表');
}
});
}
loadTaskList();
});
后端代码
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
let tasks = [];
app.post('/api/tasks', function(req, res) {
const task = req.body;
tasks.push(task);
res.sendStatus(200);
});
app.get('/api/tasks', function(req, res) {
res.json(tasks);
});
app.listen(3000, function() {
console.log('服务器已启动，监听端口 3000');
});