基本上，我正在尝试通过express.js和node.js创建一个Todolist应用程序，每次用户检查任务的特定复选框时，都会在数组中为该特定数据添加下划线。
但是，它不起作用，我尝试通过 post HTTP 来完成它。
也许有人可以解释我做错了什么以及我应该如何解决它？
以下片段：
index.js
let taskList = [];
let viewTaskList = ["Task 1","Task 2","Task 3","Task 4"];
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
app.get("/", (req, res) => {
res.render("index.ejs", {
views: viewTaskList
});
});
app.post("/today", (req, res) => {
let itemName = req.body.task;
let button = req.body.add;
button = true;
if (button) {
taskList.push(itemName);
}
res.render("index.ejs", {
task: taskList,
views: viewTaskList
});
let checkbox = req.body.checked;
checkbox = true;
if (checkbox) {
res.render("index.ejs", {
underlined: checkbox
});
} else {
checkbox = false;
}
});
index.ejs
<% if (locals.task) { %>
<% task.forEach(tasks => { %>
<div class="checkbox-div">
<input type="checkbox" name="checked">
<label for="checked">
<% if (locals.underlined) { %>
<u> <%= tasks %></u>
<% } else { %>
<%=tasks %>
<% } %>
</label>
</div>
<% }) %>
<% } %>
<form action="/submit" method="post">
<input type="text" name="task" placeholder="New Item">
<button type="submit" value="Add">+</button>
</form>
我认为这里有点混乱。如果您的目标只是简单地更改复选框的样式，那么您可以完全在前端使用 CSS 来完成此操作，如评论中所指出的。无需向服务器发布数据或更新任何资源。
但是，看起来您正在尝试在服务器上保留已检查的状态，例如勾选已完成的待办事项。如果是这种情况，您需要将每个待办事项的检查状态存储在服务器上，然后在客户端上使用 JS 的 fetch API 将当前任务的更新 PUT 到服务器。
这是一个示例。
服务器：
const bodyParser = require("body-parser"); // 1.20.2
const express = require("express"); // 4.18.2
const app = express();
app.set("view engine", "ejs"); // 3.1.9
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
let id = 0;
const tasks = [];
app.get("/", (req, res) => {
res.render("index.ejs", {tasks});
});
app.post("/", (req, res) => {
tasks.push({
id: ++id,
name: req.body.task,
completed: false,
});
res.render("index.ejs", {tasks});
});
app.put("/task", (req, res) => {
const {completed, name, id} = req.body;
const task = tasks.find(e => e.id === +id);
if (task) {
task.completed = completed !== undefined;
task.name = name ?? task.name;
}
res.json(task);
});
app.listen(
5000,
() => console.log("listening on port 5000")
);
客户：
<!DOCTYPE html>
<html>
<head>
<style>
.completed {
text-decoration: underline;
}
</style>
</head>
<body>
<% tasks.forEach(task => { %>
<div class="task" data-task-id="<%= task.id %>">
<label>
<input type="checkbox" <%= task.completed ? "checked" : "" %>>
<span
class="task-name <%= task.completed ? "completed" : "" %>"
>
<%= task.name %>
</span>
</label>
</div>
<% }) %>
<form action="/" method="post">
<input name="task" placeholder="New Item">
<button type="submit" value="Add">+</button>
</form>
<script>
document
.querySelectorAll('.task [type="checkbox"]')
.forEach(e => {
e.addEventListener("click", e => {
const div = e.target.closest(".task")
div.querySelector(".task-name").classList.toggle("completed");
const formData = new FormData();
const id = +div.dataset.taskId;
formData.append("id", id);
if (e.target.checked) {
formData.append("completed", "");
}
fetch("/task", {
method: "PUT",
body: new URLSearchParams(formData),
headers: {
"Content-Type": "application/x-www-form-urlencoded",
}
});
});
});
</script>
</body>
</html>
请注意，我没有进行任何错误处理，因此留给读者作为练习。