如何在 Express.js 中设置 404 页面

阅读时长 6 分钟读完

在 Web 应用程序中,404 页面是指当用户请求一个不存在的页面时,服务器返回的错误页面。在 Express.js 中,设置 404 页面可以为用户提供更好的用户体验,同时也可以增强网站的安全性。

在本文中,我们将学习如何在 Express.js 中设置 404 页面,包括如何自定义 404 页面,以及如何处理静态资源的 404 错误。

自定义 404 页面

在 Express.js 中,我们可以使用 app.use() 方法来设置 404 页面。具体步骤如下:

  1. 创建一个新的路由文件 routes/404.js,并在其中定义 404 路由:

    在这个路由中,我们使用 res.status(404) 方法来设置 HTTP 状态码为 404,然后使用 res.render() 方法来渲染 views/404.ejs 文件,该文件是我们自定义的 404 页面模板。

  2. app.js 文件中引入 routes/404.js 路由,并将其添加到中间件链中:

    -- -------------------- ---- -------
    ----- ------- - -------------------
    ----- --- - ----------
    
    -- -- --- --
    ----- -------------- - ------------------------
    
    -- ------
    ------------ -------------
    ----------------- -------------
    --------------- -----------
    --------------- ---------------- -- - --- -------
    
    -- ---

    在这个中间件链中,我们将 routes/404.js 路由添加到最后,这样当所有其他路由都无法匹配时,就会调用该路由,并显示自定义的 404 页面。

处理静态资源的 404 错误

在 Express.js 中,我们还可以使用 express.static() 方法来处理静态资源的 404 错误。具体步骤如下:

  1. app.js 文件中添加静态资源中间件:

  2. public 目录下创建一个不存在的静态资源文件,例如 public/nonexistent.txt

  3. 访问该静态资源文件,例如 http://localhost:3000/nonexistent.txt,就会返回默认的 404 页面。

如果我们希望自定义这个 404 页面,可以在 public 目录下创建一个 404.html 文件,该文件会被自动渲染为 404 页面。

示例代码

以下是完整的示例代码:

-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------

-- ----
----- ----------- - --------------------------
----- ----------- - --------------------------
----- --------- - ------------------------
----- -------------- - ------------------------

-- ---------
------------------------------------------- ------------

-- ------
------------ -------------
----------------- -------------
--------------- -----------
--------------- ---------------- -- - --- -------

-- -----
---------------- ---------- -
  ------------------- --------- -- ---- -------
---

routes/404.js 文件:

views/404.ejs 文件:

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  ---------- --- -------------
-------
------
  ------- --- ----------
  ------ --------- --- --- --------------- -- --- --- ----- -- ---- -----------
-------
-------

public/404.html 文件:

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  ---------- --- -------------
-------
------
  ------- --- ----------
  ------ --------- --- --- --------------- -- --- --- ----- -- ---- -----------
-------
-------

结论

在本文中,我们学习了如何在 Express.js 中设置自定义的 404 页面,以及如何处理静态资源的 404 错误。通过设置 404 页面,我们可以为用户提供更好的用户体验,同时也可以增强网站的安全性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67458f06c1a23897eaa034bd

纠错
反馈