如何使用Express.js、Node.js、MongoDB和EJS提交表单更新MongoDB数据

原有代码问题梳理 #

• EJS表单的action路径与后端路由不匹配，不必要的将用户字段拼接在URL中，也未正确传递用户ID到后端
• 后端findOneAndUpdate方法参数错误，仅传入了查询条件，未传入需要更新的字段内容
• 重复多次调用数据库更新接口，性能差
• 变量名不匹配（定义updatedlastname却打印updatedApellido）
• 无法获取用户ID作为更新条件，req.body.id不存在，表单未提交该字段
• 未配置Express的请求解析中间件的话，也无法正常获取req.body参数

1. 修正EJS模板代码 #

<form action="/save-profile/<%= user.id %>" method="POST">
  <div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon1">Name</span><%= user.username %>
    <input type="text" class="form-control" placeholder="'John'" aria-label="Username" name="username" value="<%= user.username %>">
    <span class="input-group-text">lastName</span><%= user.lastname %>
    <input type="text" class="form-control" placeholder="" aria-label="Server" name="lastname" value="<%= user.lastname %>">
  </div>
  <div class="input-group">
    <span class="input-group-text">Description:</span>
    <textarea class="form-control" aria-label="With textarea" placeholder="" name="description"><%= user.description %></textarea>
  </div>
  <br>
  <button class="btn btn-primary mb-10 btn-lg" type="submit">Save</button>
</form>

调整说明：去掉了URL中多余的用户字段，仅将用户ID作为路由参数传递，input框补充了默认value属性，打开页面时直接展示原有值，按钮补充了type="submit"避免兼容性问题。

2. 修正后端路由代码 #

首先确认你的Express入口文件已经配置了请求解析中间件：

app.use(express.urlencoded({ extended: true }))

然后调整路由代码：

router.post('/save-profile/:userId', async (req, res) => {
  try {
    // 一次调用完成所有字段更新
    const updatedUser = await User.findByIdAndUpdate(
      req.params.userId, // 查询条件：用户ID
      {
        // 要更新的字段，确保和你User模型定义的字段名一致
        username: req.body.username,
        lastname: req.body.lastname,
        description: req.body.description
      },
      { new: true } // 配置项：返回更新后的用户数据
    )
    console.log('更新后的用户数据：', updatedUser)
    res.redirect('/profile')
  } catch (err) {
    console.error('更新失败：', err)
    res.status(500).send('更新失败')
  }
})

调整说明：匹配路由中的用户ID参数，单次调用数据库接口完成所有字段更新，补充错误捕获避免服务崩溃，参数与模型字段对齐。

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