在 Web 应用程序中,404 页面是指当用户请求一个不存在的页面时,服务器返回的错误页面。在 Express.js 中,设置 404 页面可以为用户提供更好的用户体验,同时也可以增强网站的安全性。
在本文中,我们将学习如何在 Express.js 中设置 404 页面,包括如何自定义 404 页面,以及如何处理静态资源的 404 错误。
自定义 404 页面
在 Express.js 中,我们可以使用 app.use()
方法来设置 404 页面。具体步骤如下:
创建一个新的路由文件
routes/404.js
,并在其中定义 404 路由:const express = require('express'); const router = express.Router(); router.get('/', function(req, res) { res.status(404).render('404'); }); module.exports = router;
在这个路由中,我们使用
res.status(404)
方法来设置 HTTP 状态码为 404,然后使用res.render()
方法来渲染views/404.ejs
文件,该文件是我们自定义的 404 页面模板。在
app.js
文件中引入routes/404.js
路由,并将其添加到中间件链中:-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- -- --- -- ----- -------------- - ------------------------ -- ------ ------------ ------------- ----------------- ------------- --------------- ----------- --------------- ---------------- -- - --- ------- -- ---
在这个中间件链中,我们将
routes/404.js
路由添加到最后,这样当所有其他路由都无法匹配时,就会调用该路由,并显示自定义的 404 页面。
处理静态资源的 404 错误
在 Express.js 中,我们还可以使用 express.static()
方法来处理静态资源的 404 错误。具体步骤如下:
在
app.js
文件中添加静态资源中间件:const express = require('express'); const app = express(); // 添加静态资源中间件 app.use(express.static(path.join(__dirname, 'public'))); // ...
在
public
目录下创建一个不存在的静态资源文件,例如public/nonexistent.txt
。访问该静态资源文件,例如
http://localhost:3000/nonexistent.txt
,就会返回默认的 404 页面。
如果我们希望自定义这个 404 页面,可以在 public
目录下创建一个 404.html
文件,该文件会被自动渲染为 404 页面。
示例代码
以下是完整的示例代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- ---- ----- ----------- - -------------------------- ----- ----------- - -------------------------- ----- --------- - ------------------------ ----- -------------- - ------------------------ -- --------- ------------------------------------------- ------------ -- ------ ------------ ------------- ----------------- ------------- --------------- ----------- --------------- ---------------- -- - --- ------- -- ----- ---------------- ---------- - ------------------- --------- -- ---- ------- ---
routes/404.js
文件:
const express = require('express'); const router = express.Router(); router.get('/', function(req, res) { res.status(404).render('404'); }); module.exports = router;
views/404.ejs
文件:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- --- ------------- ------- ------ ------- --- ---------- ------ --------- --- --- --------------- -- --- --- ----- -- ---- ----------- ------- -------
public/404.html
文件:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- --- ------------- ------- ------ ------- --- ---------- ------ --------- --- --- --------------- -- --- --- ----- -- ---- ----------- ------- -------
结论
在本文中,我们学习了如何在 Express.js 中设置自定义的 404 页面,以及如何处理静态资源的 404 错误。通过设置 404 页面,我们可以为用户提供更好的用户体验,同时也可以增强网站的安全性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67458f06c1a23897eaa034bd