前言
在前端开发过程中，我们经常需要在后台接口设计完毕后进行接口测试。而 swagger-ui-node-express 是一个轻量级的 npm 包，可以方便地将 API 文档生成并展示在网页中，以便于调试和测试。
安装
将 swagger-ui-node-express 安装到你的项目中，你需要使用 npm：
npm install swagger-ui-node-express
使用
- 引入 swagger-ui-node-express
const swaggerUi = require('swagger-ui-node-express');
const swaggerDocument = require('./swagger.json');- 设置 Swagger UI 路由
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));深入了解
以上提供了一个简单的使用方式，让你可以快速使用 swagger-ui-node-express 模块。接下来我们将讲解一些更加深入的内容。
Swagger UI
Swagger UI 是 Swagger 开源生态系统中的 Web 界面，它提供了一种交互式方式，让您可视化、测试和交互式文档化您的 API。
swaggerDocument
我们在使用时，需要先导入定义好的 JSON 格式的 swagger 文档，这个文档包含了我们的 API 的详细信息。
下面是一个 swagger 的示例文档（示例中只提供部分字段）：
-- -------------------- ---- -------
-
---------- ------
------- -
---------- --------
-------- -------- -----
-------------- -------- --- -------------
---------- -
------- -----
-
--
------- -----------------
----------- ------
------- -
-
------- -------
-------------- ----------- ----- -----
-
--
-------- -
--------- -
------ -
------- -
------
--
---------- ---- --- -------
-------------- --------------
------------ -
------ -
-------------- -- ---- -- -------
-
-
--
------- -
------- -
------
--
---------- ------- - --- -------
-------------- -------------
------------- -
-
------- -------
----- -------
-------------- ---- ---- --------------
--------- -
------- --------------------
-
-
--
------------ -
------ -
-------------- ---- ------- ------
-
-
-
-
--
-------------- -
------- -
------- ---------
------------- -
----- -
------- ----------
--------- --------
-------------- ---- ---- ----
--
------- -
------- ---------
-------------- ---- ---- ------
-
-
-
-
-使用示例
在了解了 swagger-ui-node-express 的基本使用方法和 swagger 的制作之后，下面我们提供一个使用示例，以更好地学习该技术。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- --------- - -----------------------------------
----- --------------- - --------------------------
-------------------- ---------------- ----------------------------------
-------------------- ------------- ---- -
----------
- --- -- ----- ------- --
- --- -- ----- ----- -
---
---
--------------------- ------------- ---- -
----- ---- - ---------
------------------
---------------------------
---
---------------- -- -- -------------------- --- --------- -- ---- ---------我们可以通过浏览器访问 http://localhost:3000/api-docs，即可打开 swagger UI。
可以看到，我们的 API 的具体信息已展示在左侧，右侧为我们在浏览器中完成调试的界面。
同时，我们也可以通过输入 http://localhost:3000/v1/users 或在浏览器中通过 POST 方法试图以 JSON 格式发送数据，进行 API 调试。最后，我们也可以在后台的日志中查看请求和响应信息，以此来进一步调试接口。
总结
本文介绍了 npm 包 swagger-ui-node-express 的简单使用和深入了解，同时提供了一个示例代码来帮助你更好地理解该技术。Swagger UI 为测试和调试 API 提供了强大的工具，帮助前端和后台开发者进行高效且准确的接口调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cac81e8991b448da0fe