将带有节点的请求发布到 MongoDB 并呈现成功页面？答案

【问题标题】：Post request with node to MongoDB AND render success page?将带有节点的请求发布到 MongoDB 并呈现成功页面？
【发布时间】：2019-11-15 19:51:41
【问题描述】：

这是我的 HTML 表单：

  <form id="task-form" action="/mytask" method="POST">
    <input type="text" name="name" placeholder="name of task" />
    <input type="text" name="description" placeholder="description" />
    <input type="submit" />
  </form>

我想将数据存储到一个 MongoDB 中，它可以很好地与以下代码配合使用。不幸的是，在单击按钮后我当然可以看到我不想要的 JSON。

app.post("/mytask", urlencodedParser, (req, res) => {

  const task = new Task(req.body);
  task
    .save()
    .then(() => {
      res.send(task);
    })
    .catch(e => {
      res.status(400).send(e);
    });
});

我还想呈现一个感谢页面，其中包含来自request.body 的信息。这也很好。

    app.post("/mytask", urlencodedParser, (req, res) => {
      res.render("thankyou", {
        name: req.body.name,
        description: req.body.description
      });
    });

但我想两者都做。存储数据并呈现另一个页面，类似这样。

app.post("/mytask", urlencodedParser, (req, res) => {
  const task = new Task(req.body);
  task
    .save()
    .then(() => {
      res.send(task);
    })
    .catch(e => {
      res.status(400).send(e);
    });

  res.render("thankyou", {
    name: req.body.name,
    description: req.body.description
  });
});

这似乎是不可能的。错误如下：

[ERR_HTTP_HEADERS_SENT]： C:\Users\User\Desktop\MyExpressApp\views\thankyou.hbs：无法设置发送到客户端后的标头

我该如何解决这个问题？

【问题讨论】：

标签： node.js express post http-post

【解决方案1】：

提及您正在使用的前端会更有帮助。从外观上看，您只是在渲染 JSON 的任务对象。这就是为什么您在第一个代码中单击提交后会看到 json。

错误发生在最后一个代码中，因为您正在发送感谢消息，但在保存操作完成后，您正尝试发送另一个带有任务对象的响应。一个请求只能发送一个响应。

可能的方法是使用任何渲染引擎渲染一个新的 html，或者使用 angular 等前端框架，响应接收消息并显示它。

例如，如果您使用 ejs，代码将类似于

app.post("/mytask", urlencodedParser, (req, res) => {
  const task = new Task(req.body);
  task
    .save()
    .then(() => {
      res.render("index", {
        name: task.name,
        description: task.description
    });
    })
    .catch(e => {
      res.status(400).send(e);
    });  
});

index.ejs 文件

<html>
  <head><title><%= title %></title></head>
  <body>
    <p>Thank you</p>
    <p> <%= name %> </p>
    <p> <%= description%> </p>
  </body>
</html>

【讨论】：