在前端开发中，文档是不可或缺的，而 Swagger 是一个很好的接口文档框架。 foxify-swaggerize-ui 是一个可以给 Swagger 生成的接口文档提供可视化界面的 npm 包，本文将介绍使用 foxify-swaggerize-ui 的详细步骤，以及解释其中的原理。
foxify-swaggerize-ui 基本介绍
foxify-swaggerize-ui 是一个基于 Swagger UI 的 npm 包，它可以让你通过简单的配置即可为你的 Swagger 接口文档提供可视化界面。
安装
在使用 foxify-swaggerize-ui 之前，我们需要先安装 node.js。node.js 是一个使用 JavaScript 编写的服务器端运行环境。如果你还没有安装，可以前往 node.js 官网 下载安装包，然后按照提示进行安装。
安装完 node.js 后，在命令行终端中执行如下命令安装 foxify-swaggerize-ui：
--- ------- ------ --------------------
配置
安装好 foxify-swaggerize-ui 后，我们需要把它集成到我们的应用中。
首先，在你的项目根目录中创建 swagger.json 文件，这个文件是你的接口文档定义。可以在 Swagger Editor 上编辑得到。
然后，安装 foxify-swaggerize 包及其依赖：
--- ------- ------ ------ ------- --- ------- ---------- ------------------
接着，创建一个 app.js 文件，在其中添加如下代码：
----- ------ - ------------------ ----- --------- - -------------------------------- ----- ------- - ----------------------------- ----- --- - --------- -------------------- ------------- ----------------- ---- ----------------- --------- ------------- ---- ---------------- -------- -- - ------------------- ------- -- ------------------------ ---
这里我们创建了一个 express 应用，使用 foxify 中间件，然后在 /api-docs 路径下挂载了 swaggerUi 中间件，并在应用中使用了 swaggerize-express 中间件。其中，api 指定了我们的接口文档文件，handlers 目录指定了我们的接口实现代码。
使用
现在我们可以通过 http://localhost:3000/api-docs 访问我们的接口文档了。
建议在 package.json 中添加一个脚本，方便使用，如下：
-
---------- -
-------- ----- --------
------ -------- -------
-
-这样就可以通过执行 npm start 或 npm run dev 启动应用了。
可配置项
foxify-swaggerize-ui 可以通过传递配置对象进行配置。下面列出一些常用的选项：
title
页面标题。
-------------------- ----------- ------ ------- --- -------------- ----
oauth2RedirectUrl
OAuth 2.0 重定向 URL。
-------------------- ----------- ------------------ -------------------------------------------- ----
swaggerUi
Swagger UI 的配置项。
-------------------- -----------
---------- -
-- ------- -- ----
------------- -----
-
----更多配置项可以参考 Swagger UI Configuration。
结语
通过本文，我们学习了如何使用 foxify-swaggerize-ui 为我们的 Swagger 接口文档提供可视化界面。foxify-swaggerize-ui 是一个非常强大的 npm 包，使用它可以让我们的文档更加直观、易于使用。
当然，Swagger 还有很多其他的高级功能，例如自动生成接口测试、自动生成代码片段等等。希望大家能够继续深入学习。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f6d9381d61a3540ed2