Express 使用默认的错误处理页面而不是视图？

Question

我正在按照这个 MDN Express 教程创建一个“本地库”应用程序，该应用程序使用 Pug (Jade) 作为其模板引擎。在本教程的这一部分中，它详细介绍了创建一个控制器来处理“创建流派”页面的表单 POST 请求。

exports.genre_create_get = (req, res, next) => {
  res.render("genre_form", { title: "Create Genre" });
};

// Handle Genre create on POST.
exports.genre_create_post = [
  // Validate and sanitize the name field.
  body("name", "Genre name must contain at least 3 characters")
    .trim()
    .isLength({ mid: 3 })
    .escape(),

  // Process request after validation and sanitization.
  asyncHandler(async (req, res, next) => {
    // Extract the validation errors from a request.
    const errors = validationResult(req);

    // Create a genre object with escaped and trimmed data.
    const genre = new Genre({ name: req.body.name });

    if (!errors.isEmpty()) {
      // There are errors. Render the form again with sanitized values/error messages.
      res.render("genre_form", {
        title: "Create Genre",
        genre: genre,
        errors: errors.array(),
      });

      return;
    } else {
      // Data from form is valid.
      // Check if Genre with same name already exists.
      const genreExists = await Genre.findOne({ name: req.body.name })
        .collation({ locale: "en", strength: 2 })
        .exec();
      if (genreExists) {
        // Genre exists, redirect to its detail page.
        res.redirect(genreExists.url);
      } else {
        await genre.save();
        // New genre saved. Redirect to genre detail page.
        res.redirect(genre.url);
      }
    }
  }),
];

这是它对应的视图：

extends layout

block content

  h1 #{title}

  form(method="POST")
    div.form-group
      label(for="name") Genre:
      input#name.form-control(type="text", placeholder="Fantasy, Poetry etc." name="name" required value=(undefined===genre ? "" : genre.name) )
    button.btn.btn-primary(type="submit") Submit

  if errors
    ul
      for error in errors
        li!= error.msg

查看教程的底部，它向您展示了当用户尝试发送无效表单时应该发生的情况：它应该创建一个列表元素，该列表元素出现在表单字段下方，详细说明错误。但是，当我尝试在自己的本地主机中重现错误时，会发生以下情况：

出于某种原因，Express 似乎正在接管错误处理并生成它自己的错误页面。有谁知道如何解决这个问题？

我将我的控制器和模板代码与完成的存储库代码进行了比较，它似乎完全一样。

Answer 1

查看错误堆栈，它来自猫鼬模式，它也有这里有自己的验证器，它在正文验证器之前触发，因为验证器在流派保存后呈现错误：

const errors = validationResult(req);

// error here will run before
const genre = new Genre({ name: req.body.name });

// runs if no errors with `genre`
if (!errors.isEmpty()) {  

因此，尝试在主体验证器代码之后移动数据库保存：

// Extract the validation errors from a request.
const errors = validationResult(req);

if (!errors.isEmpty()) {
  // There are errors. Render the form again with sanitized values/error messages.
  res.render("genre_form", {
    title: "Create Genre",
    genre: genre,
    errors: errors.array(),
  });

// Create a genre object with escaped and trimmed data.
const genre = new Genre({ name: req.body.name });