如何在 Express 中添加 404 错误页面？

1. 确认是否有默认的 404 页面

在 Express 中，如果没有特别设定，当请求的页面无法找到时，Express 会默认返回一个 404 状态码和一段简单的提示页面。

2. 设定自定义的 404 页面

如果我们希望返回一个美观、个性化的 404 页面，则需要进行自定义设置。

在 Express 中，可以通过设定一个中间件，将所有没有匹配到路由的请求指向一个特定的页面。具体步骤如下：

1. 创建一个静态页面，放在项目中的某个位置，例如 ./public/404.html。

2. 在 Express 的路由设置中，设定一个中间件，将所有没有匹配到路由的请求重定向到该页面。代码片段如下：

// 设定 404 中间件
app.use((req, res, next) => {
  res.status(404).sendFile(__dirname + '/public/404.html');
});

通过 res.status(404) 明确设定了 HTTP 状态码为 404，最后通过 res.sendFile 将设定好的页面返回给用户。

3. 设定自定义的错误页面

除了 404 页面外，我们还可以根据需要设定其他 HTTP 状态码（如 500）的错误页面。

在 Express 中，可以通过设定一个中间件，将所有返回指定状态码的请求指向一个特定的错误页面。代码片段如下：

// 设定错误页中间件
app.use((err, req, res, next) => {
  if (err.status === 500) {
    res.sendFile(__dirname + '/public/500.html');
  } else {
    next(err);
  }
});

通过这段代码，当系统返回状态码为 500 的错误时，会将用户重定向到 /public/500.html 页面，否则会继续继续到下一个中间价。

4. 小结

在 Express 中添加自定义的 404 页面和错误页面，步骤总结如下：

1. 创建静态页面。
2. 设定中间件进行重定向。
3. 可以根据需要设定多个错误页面。

最后，建议在开发过程中尽早设定 404 和错误页面，这不仅可以更好地提升用户体验，也能帮助我们更好地定位、解决问题。