Express.js 中如何实现自定义 404 错误页面-JavaScript中文网-JavaScript教程资源分享门户

在开发 web 应用时，经常会遇到 404 错误页面，即用户请求的资源不存在。为了提高用户体验，我们希望能够自定义 404 错误页面，让用户看到更友好的提示信息。本文将介绍如何在 Express.js 中实现自定义 404 错误页面。

1. Express.js 中默认的 404 错误处理

在 Express.js 中，默认情况下，当用户请求的资源不存在时，会返回一个简单的 404 错误页面，内容为 "Not Found"。这个页面的样式非常简陋，对于用户来说并不友好。

2. 自定义 404 错误页面

为了提高用户体验，我们可以自定义 404 错误页面。在 Express.js 中，可以通过设置中间件来实现。具体步骤如下：

2.1 创建一个 404 页面

首先，我们需要创建一个 404 页面。这个页面可以是一个 HTML 文件，也可以是一个模板文件。下面是一个简单的 HTML 文件示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>404 Not Found</title>
</head>
<body>
  <h1>404 Not Found</h1>
  <p>The requested URL was not found on this server.</p>
</body>
</html>

2.2 创建一个中间件

接下来，我们需要创建一个中间件，用于处理 404 错误。这个中间件需要在所有路由之后添加。

app.use(function(req, res, next) {
  res.status(404).sendFile(__dirname + '/public/404.html');
});

在这个中间件中，我们使用 res.status(404) 来设置响应状态码为 404，然后使用 res.sendFile() 方法来发送 404 页面。

2.3 测试

最后，我们需要测试一下是否成功。可以通过访问一个不存在的页面来测试。如果一切正常，应该能够看到我们自定义的 404 页面。

3. 总结

通过以上步骤，我们成功地实现了在 Express.js 中自定义 404 错误页面的功能。这个功能对于提高用户体验非常重要，因为它可以让用户看到更友好的提示信息。希望本文对大家有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650e9a9995b1f8cacd7b39ee