本文将为大家介绍一款前端开发工具 - swagger-ux。swagger-ux 是一个基于 Swagger 规范的用户界面框架，能够帮助开发人员快速创建优雅的 API 文档和客户端，支持多种编程语言和后端服务器。
安装
使用 npm 安装 swagger-ux。
npm install swagger-ux --save
快速入门
使用 swagger-ux 构建的应用程序界面非常容易上手。只需简单的四个步骤，就可以创建出一个 Swagger 文档。
步骤1：添加 Swagger 文件
在项目目录下，建立一个名为 swagger.json 的文件，并把您的 Swagger 包含在其中。
-- -------------------- ---- -------
-
---------- ------
------- -
-------- ----- -----
-------------- -- ------ --- --- ------
---------- -------
--
------- -------------------------------
----------- -------
---------- -
------
--
-------- -
-------- -
------ -
---------- ----- --- ------
------------ -
------ -
-------------- -- ---- -- -------
--------- -
------- --------
-------- -
------- -------------------
-
-
-
-
-
-
--
-------------- -
------ -
------- ---------
----------- -
-----
------
--
------------- -
----- -
------- ----------
--------- --------
-------------- ---- ----- ----
--
------- -
------- ---------
-------------- ---- ----- ------
-
-
-
-
-步骤2：引入 Swagger UI 相关库
在您的 HTML 模板文件中添加代码：
-- -------------------- ---- -------
------
------
---- -- --- -- ---
----- ------------------------------------------------------------------ ---------------- --------------- --
---- -- ---------- -- ---
------- ----------------------------------------------------------------------- --------------------------------
------- ----------------------------------------------------------------------------------- --------------------------------
-------
------
---- -- ------- -- ---
---- ----------------------
---- --- ------- -- ---
------- -----------------------
------------- - ---------- -
----- -- - -----------------
---- ---------------------------------------------
------- -------------
--
-
---------
-------
-------步骤3：启动 Swagger UI
使用 http-server 启动 Swagger UI。
npx http-server
步骤4：访问 Swagger UI
在任意浏览器中访问 http://localhost:8080 即可打开 Swagger 文档。
总结
通过完成以上四个步骤，我们已经成功构建出了一个支持 Swagger 规范的应用程序。
swagger-ux 的优雅的设计和易于使用的 API，使得开发者可以快速入手，快速开发出符合要求的API接口文档和客户端。
示例代码
以下示例代码可以使用 swagger-ux 快速构建出一个支味.swagger 接口文档的应用程序。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- -- --------- ------------------------------------------- ------------ -- ---- ------------------- ------------- ---- - --------------------------------- --------- --------------- --- -- ------ ---------------- ---------- - -------------------- --- --- --------- -- ---- ----------- ---
以上代码可以在 Express 中启动一个支持 Swagger 接口文档的应用程序，其中 public 目录下的文件包含了 HTML 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cda81e8991b448e6868