在前端开发中，我们经常需要编写 API 接口来实现前后端分离，并且使用 Swagger 等工具来管理和文档化这些接口。本篇文章将介绍一种 npm 包——express-swagger-ui-router，该包将 API 文档和实际接口整合在一起，使得我们可以在浏览器中访问接口并且在线测试和管理。
安装 express-swagger-ui-router
首先，我们需要在项目中安装该 npm 包，打开终端运行以下命令：
npm install express-swagger-ui-router
使用 express-swagger-ui-router
在安装完该包之后，我们需要进行一些配置才能完成在线管理。以下是一个示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------------- - -------------------------------------
----- ---- - ------------------
----- ---------------- - -------------------------------------
----- --- - ----------
----- ---- - --------------------------------------
-------------------- -----------------
----- -
------------ -----
---- ------------------------------------------------
--
---------- ------------ ------- - -------- ---- ---
----
--------------- -----------------------------
-------- ---------------------------
----------------- ----- -- ---------
------------------ ----- -- ----- -- -------
----
-- --- ------- ---- ---首先，我们使用 YAML.load 函数来加载我们的 API 文档，然后使用 express-openapi-validator 模块来验证请求和响应。最后，我们通过传递配置对象来启用 Swagger UI，并指定文档的位置。这样，我们就可以通过访问 http://localhost:<port>/api-docs 来使用 Swagger UI 进行在线管理。
更多配置
除了上述基本配置之外，我们还可以通过配置对象的其他选项来进一步定制 Swagger UI 的行为。以下是 express-swagger-ui-router 支持的选项：
path：Swagger UI 路径，默认为/swaggerUrl：指定 Swagger JSON URL，默认为http://localhost:3000/swagger.jsondocs：包含 Swagger JSON 对象和 URL 的配置oauth：OAuth2 的配置customCss：自定义 CSS 样式。customSiteTitle：自定义文档标题
结论
在本文中，我们介绍了 npm 包 express-swagger-ui-router，并且讲解了如何在项目中使用它。通过使用 Swagger UI，我们可以方便地在线管理 API，确保接口的正确性和稳定性。希望本文对你有所帮助，谢谢阅读！
示例代码
以下是一个完整的、包含路由的例子：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------------- - -------------------------------------
----- ---- - ------------------
----- ---------------- - -------------------------------------
----- --- - ----------
----- ---- - -----
----- ---- - --------------------------------------
-------------------- -----------------
----- -
------------ -----
---- ------------------------------------
--
---------- ------------ ------- - -------- ---- ---
----
--------------- -----------------------------
-------- ---------------------------
----------------- ----- -- ---------
------------------ ----- -- ----- -- -------
----
--------------------------- ----- ---- -- -
----- - ---- - - -----------
--------------- -----------
---
---------------- -- -- ------------------- ----- -- ----------------------------在运行该代码之后，我们可以通过访问 http://localhost:3000/api-docs 来访问 Swagger UI 界面，并且在 http://localhost:3000/api/hello/:name 中测试接口。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f87238a385564ab6d27