Free Code Camp 运动追踪器项目表单提交报错‘cannot POST /’及路由参数获取问题求助

首先，咱们先搞定最核心的**"cannot POST /"错误**：

1. 后端路由未匹配POST请求 #

你当前的后端代码里，针对/api/users/:_id/exercises只写了app.get()路由，但你的表单是用method="post"提交的——后端没有对应的POST处理逻辑，自然会返回404错误。

你需要把路由改成app.post()：

app.post('/api/users/:_id/exercises', (req, res, next) => {
  // 这里处理POST请求的逻辑
  let inputId = req.params._id;
  // 后续可以从req.body获取表单里的其他运动数据（比如运动类型、时长等）
  console.log('用户ID:', inputId);
  console.log('提交的运动数据:', req.body);
  res.json({
    _id: inputId,
    // 这里可以补充返回的其他字段
  })
})

2. 前端表单提交的细节优化 #

你的前端代码在submit事件里设置action后调用exerciseForm.submit()，但默认的表单提交行为没有被阻止，可能会导致冲突。建议修改事件处理函数：

exerciseForm.addEventListener("submit", (e) => {
  // 先阻止默认的表单提交行为，避免提前发送请求
  e.preventDefault();
  const userId = document.getElementById("uid").value;
  exerciseForm.action = `/api/users/${userId}/exercises`;
  // 再手动触发提交
  exerciseForm.submit();
});

这能确保action设置完成后再提交，避免默认提交时action还是空字符串（这也是导致"cannot POST /"的常见原因：action为空时，浏览器会向当前页面根路径发送POST请求）。

关于ID获取的疑问：req.params._id vs req.body._id #

这完全取决于你把ID放在哪里：

• 你现在的逻辑是把用户ID拼到URL路径里（/api/users/${userId}/exercises），所以ID会作为URL参数存在，从req.params._id获取是正确的。
• 如果是把ID作为表单字段（比如你的input的name是_id）提交，那才需要从req.body._id获取，但你已经把ID放到URL里了，甚至可以把input的name改成userId，避免和URL参数混淆。

后续数据库查询的小提示 #

当你要根据ID查询数据库时，直接用req.params._id去匹配用户的_id字段即可，比如用MongoDB的话：

User.findById(req.params._id)
  .then(user => {
    // 处理用户数据，添加新的运动记录等
  })
  .catch(err => {
    // 处理查询错误，比如用户不存在的情况
    res.status(400).json({ error: 'User not found' });
  })

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