控制器中未收到用户 ID - Node-js

Question

我正在学习 Node，但遇到了一些问题。 我的目标是创建一个表，列出在数据库中注册的用户，该表创建正常，但在编辑部分，用户 ID 未正确传递。 然后就加载了编辑页面，但是没有加载要编辑的用户数据。

我正在使用：

"dependencies": {
    "express": "^4.18.2",
    "express-handlebars": "^7.1.2",
    "mysql2": "^3.6.1",
    "nodemon": "^3.0.1",
    "sequelize": "^6.33.0"
  }

表格是通过 Partials 加载的：

<table class="table table-striped table-sm">
  <thead>
    <tr>
      <th>Id</th>
      <th>Usuário</th>
      <th>Idade</th>
      <th class="text-right p-2">Ações</th>
    </tr>
  </thead>
  <tbody>
    {{#each users}}
    <tr>
      <td>{{this.id}}</td>
      <td>{{this.name}}</td>
      <td>{{this.age}}</td>
      <td class="text-right p-2">
        <a href="/editUser/{{this.id}}" class="btn btn-primary btn-sm">Editar</a>
        <a href="/deleteUser/{{this.id}}" class="btn btn-danger btn-sm">Excluir</a>
      </td>
    {{/each}}
  </tbody>
</table>

路线

router.get('/editUser/:id', UserController.editUser);

控制器：

static async editUser(req, res) {
    const id = req.body.id;
    console.log("ID: ",id);
    const user = await User.findOne({where:  {id: id }, raw: true});
    res.render('editUser', { user });
  }

编辑页面：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
{{> navbar}}
<div class="container d-flex align-items-center justify-content-center flex-column ">
  <h1>Editar o usuário {{user.name}}</h1>
  <form action="/editUser/{{user.id}}" method="post" class="d-flex align-items-center justify-content-center flex-column p-2 m-2 ">
  <input type="hidden" name="id" value="{{user.id}}">
    <div class="form-group d-flex flex-column ">
      <label for="name" class="">Nome</label>
      <input type="text" name="name" id="name" class="form-control" value="{{user.name}}" required>
    </div>
    <div class="form-group d-flex flex-column">
      <label for="age">Idade</label>
      <input type="number" name="age" id="age" class="form-control" value="{{user.age}}">
    </div>
    <input type="submit" value="Editar" class="btn btn-primary btn-success m-2">
    <input href="/allUsers" type="button" value="Cancelar" class="btn btn-primary btn-danger m-2">
  </form>
</div>

完整项目位于：https://github.com/alanmarinho/node_addEdit_User

有人可以帮助我吗？

我希望用户数据显示在编辑用户屏幕上

Answer 1

正如用户@76484所指出的，this答案解释了为什么您的数据可能无法显示。尽管这是关于 Mongoose 的，但它仍然与 Sequelize 相关 因为：

默认情况下，所有查找器方法的结果都是模型类的实例（而不是简单的 JavaScript 对象）。这意味着数据库返回结果后，Sequelize 会自动将所有内容包装在适当的实例对象中。

您必须在

{ raw: true }

查询中传递

find

选项，以便数据作为 POJO 返回，而不是 Sequelize 模型类的实例。你已经正确识别了这一点，因为我可以看到你有那一套。然而，你会为此自责，因为你需要在这里使用

req.params.id

而不是

req.body.id

：

static async editUser(req, res) {
    //const id = req.body.id; //< Delete this
    const id = req.params.id //< Add this
    console.log("ID: ",id);
    const user = await User.findOne({where:  {id: id }, raw: true});
    res.render('editUser', { user });
  }

这是因为您将

id

作为

url

中的查询参数发送，而不是在表单中发布。