在前端开发中，经常需要实现错误页面的展示以及统一的页面样式，本文将介绍如何使用 npm 包 express-http-response-pages 来快速搭建前端错误页面并实现样式统一。
什么是 express-http-response-pages ?
express-http-response-pages 是一个基于 Express 框架的 npm 包，提供了一系列便捷的 API 来快速创建常用的 HTTP 错误页面和成功页面。它的优势在于，不需要编写大量的 HTML 和 CSS，只需要简单的配置即可使用。
安装和使用
先安装 express 和 express-http-response-pages：
npm install express express-http-response-pages
在 Express 项目中引入 express-http-response-pages 并初始化：
const express = require('express');
const expressHttpResponsePages = require('express-http-response-pages');
const app = express();
// 初始化 express http response pages
app.use(expressHttpResponsePages());
app.listen(3000);默认页面
当有错误发生时，它将返回默认的错误页面。这些错误页面包括：
- 400: Bad Request
- 401: Unauthorized
- 403: Forbidden
- 404: Not Found
- 500: Internal Server Error
此外，它还提供了一系列的成功页面，包括：
- 200: OK
- 201: Created
- 204: No Content
自定义页面
如果你想要自定义页面，可以使用 setPage API 来指定页面的内容和样式。例如，以下代码将为 404 错误页面和成功页面配置自定义页面：
-- -------------------- ---- -------
----------------------------------
------ -
---- -
------ --------
-------- -------------------
------ -
---- -
----------------- --------
------------ ----- ------ -----------
-
------ -
----------- -----
----------- -------
---------- -----
------ --------
-
-------- -
----------- -----
----------- -------
---------- -----
------ --------
-
-
--
---- -
------ -------
-------- --------------
------ -
---- -
----------------- --------
------------ ----- ------ -----------
-
------ -
----------- -----
----------- -------
---------- -----
------ --------
-
-------- -
----------- -----
----------- -------
---------- -----
------ --------
-
-
-
-
----在代码中你可以看到，通过 title、message 和 style 配置了我们的自定义页面。其中，style 用于指定该页面的样式。
示例代码
完整的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------------------ - ---------------------------------------
----- --- - ----------
-- --- ------- ---- -------- -----
----------------------------------
------ -
---- -
------ --------
-------- -------------------
------ -
---- -
----------------- --------
------------ ----- ------ -----------
-
------ -
----------- -----
----------- -------
---------- -----
------ --------
-
-------- -
----------- -----
----------- -------
---------- -----
------ --------
-
-
--
---- -
------ -------
-------- --------------
------ -
---- -
----------------- --------
------------ ----- ------ -----------
-
------ -
----------- -----
----------- -------
---------- -----
------ --------
-
-------- -
----------- -----
----------- -------
---------- -----
------ --------
-
-
-
-
----
------------ ----- ---- -- -
--------------- --------
---
----------------- ----- ---- -- -
------------------------- --------
---
------------------- ----- ---- -- -
---------------------------
---
-----------------访问 http://localhost:3000/，将会看到 Hello World 页面。
访问 http://localhost:3000/error，将会看到自定义的 404 错误页面。
访问 http://localhost:3000/success，将会看到自定义的 200 成功页面。
总结
本文介绍了如何使用 npm 包 express-http-response-pages 来快速搭建前端错误页面并实现样式统一。可以快速地创建常用的 HTTP 错误页面和成功页面，并且支持自定义样式，方便快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aad81e8991b448d83e8