Node.js TODO Web应用：如何将HBS页面删除任务数据传回Server.js

我来帮你搞定这个删除功能的问题，其实你离成功只差几步啦！针对你遇到的“如何把用户选中的任务传回server.js”的问题，我给你两种可行的解决方案，适配你现有的代码结构：

1. 用表单提交实现删除（最直接的方案） #

你现在的表单已经有雏形，但缺少关键的属性让服务器能拿到数据，修改起来很简单：

修改HBS页面的表单代码 #

<form id="delete" method="POST" action="/deleteTask">
  <select id="chooseDelete" name="taskId" form="delete">
    <option> Choose task to delete</option>
    {{#each todos}}
    <!-- 这里把value设为任务的唯一标识，推荐用数据库的_id，比自增的missionNumber更可靠 -->
    <option value="{{element._id}}">{{missionNumber}} - {{text}}</option>
    {{/each}}
  </select>
  <input value="Delete" type="submit">
</form>

关键修改点：

• 给<select>加了name="taskId"：这是服务器获取提交值的“钥匙”，没有它表单提交时不会传递选中值
• 给<option>的value设为数据库的_id：你之前用的missionNumber是遍历数组生成的，删除任务后编号会混乱，用数据库原生的唯一ID更稳妥
• 指定表单的method="POST"和action="/deleteTask"：告诉浏览器把数据提交到服务器的这个路由

在server.js中添加处理删除的路由 #

首先要先配置Express的表单解析中间件（不然拿不到POST请求的表单数据），在app = express()之后加上：

// 解析表单提交的数据
app.use(express.urlencoded({ extended: true }));

然后添加处理删除请求的POST路由：

app.post('/deleteTask', (req, res) => {
  // 获取用户选中的任务ID
  const taskId = req.body.taskId;
  
  // 用你的Todo模型执行删除操作
  Todo.findByIdAndDelete(taskId)
    .then(() => {
      // 删除成功后重定向回任务列表页面
      res.redirect('/allTasks');
    })
    .catch(err => {
      console.error('删除任务失败:', err);
      res.redirect('/allTasks');
    });
});

2. 用AJAX实现无刷新删除（对应你尝试的按钮点击方式） #

如果不想刷新页面就完成删除，可以用Fetch API发送异步请求，修改你的前端代码如下：

<p id="demo"></p>
<select id="chooseDelete">
  <option> Choose task to delete</option>
  {{#each todos}}
  <option value="{{element._id}}">{{missionNumber}} - {{text}}</option>
  {{/each}}
</select>
<button id="deleteButton">Delete</button>

<script>
const deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener("click", function(){
  const selectedTaskId = document.getElementById("chooseDelete").value;
  
  // 先判断用户有没有选任务
  if (!selectedTaskId || selectedTaskId === "Choose task to delete") {
    document.getElementById("demo").innerHTML = "请先选择要删除的任务！";
    return;
  }

  // 发送异步请求到服务器
  fetch('/deleteTask', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `taskId=${selectedTaskId}`
  })
  .then(response => {
    if (response.ok) {
      document.getElementById("demo").innerHTML = "任务删除成功！";
      // 可选：这里可以不刷新页面，直接移除页面上对应的任务元素
      // 简单方式：刷新页面更新任务列表
      setTimeout(() => window.location.reload(), 1000);
    } else {
      document.getElementById("demo").innerHTML = "删除失败，请重试！";
    }
  })
  .catch(err => {
    console.error('请求出错:', err);
    document.getElementById("demo").innerHTML = "请求出错了！";
  });
});
</script>

服务器端的/deleteTask路由和上面的完全一样，不需要额外修改，这样就能实现无刷新删除了。

你可以根据自己的需求选其中一种方式，测试的时候记得看服务器控制台，确认能拿到正确的任务ID哦！

内容的提问来源于stack exchange，提问作者Sagiv Asraf