问题描述
“我正在使用 Node 作为后端创建 Todo 列表。添加每个新项目后,还会在它们前面生成一个复选框,因此我可以应用“CSS 行通过”让用户知道该项目已完成或未完成使用。但是当我添加另一个项目时,页面刷新并且该复选框未选中,因为我没有将该值存储在任何地方。您能告诉我如何在后端存储该复选框的值吗?
HTML -
<div class="Box" >
<% for (var i=0; i<newListItems.length; i++) { %>
<div class="item">
<input type="checkBox" id="checkBox">
<p> <%= newListItems[i] %> </p>
</div>
<% } %>
<form action="/" method="post" class="item">
<input class="inputBox" type="text" name="newItem" placeholder="New item" autocomplete="off" required="required">
<button type="submit" name="list" value=<%= listTitle%>> +</button>
</form>
</div>
节点JS -
const items = [];
app.post("/",function(req,res){
let item = req.body.newItem;
items.push(item);
res.redirect("/");
});
解决方法
答案涉及大量代码,因此我将提供一组可以帮助您解决问题的步骤。
-
您需要更改数据方案。目前看起来您只是将字符串存储在一组项目中。您需要将其更改为对象数组。每个对象都应具有字段
task
和done
。这样你就可以知道哪个任务完成了。app.post("/",function(req,res) { let item = req.body.newItem; items.push({ name: item,done: false }); res.redirect("/"); });
-
下一步将添加一个端点,该端点将数组项的
done
字段更改为true
。 -
然后在前端,您需要编写一些 JS 代码,这些代码将向端点发送 HTTP 请求,将任务标记为完成。您需要为此使用 AJAX 调用,例如 NPM 包
axios
。 -
更改模板以反映对数据的更改。例如而不是
<%= newListItems[i] %>
做<%= newListItems[i].name %>
并添加逻辑以根据done
属性呈现选中的复选框。
值得一提的是,您不应该将数据存储在内存中,因为一旦该过程完成,您将丢失数据。用于学习目的是可以的,但在生产中,您应该使用数据库。