在前端开发中，文档是不可或缺的，而 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：
npm install --save foxify-swaggerize-ui
配置
安装好 foxify-swaggerize-ui 后，我们需要把它集成到我们的应用中。
首先，在你的项目根目录中创建 swagger.json 文件，这个文件是你的接口文档定义。可以在 Swagger Editor 上编辑得到。
然后，安装 foxify-swaggerize 包及其依赖：
npm install --save foxify express npm install --save-dev swaggerize-express
接着，创建一个 app.js 文件，在其中添加如下代码：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- --------- - -------------------------------- ----- ------- - ----------------------------- ----- --- - --------- -------------------- ------------- ----------------- ---- ----------------- --------- ------------- ---- ---------------- -------- -- - ------------------- ------- -- ------------------------ ---
这里我们创建了一个 express 应用，使用 foxify 中间件，然后在 /api-docs 路径下挂载了 swaggerUi 中间件，并在应用中使用了 swaggerize-express 中间件。其中，api 指定了我们的接口文档文件，handlers 目录指定了我们的接口实现代码。
使用
现在我们可以通过 http://localhost:3000/api-docs 访问我们的接口文档了。
建议在 package.json 中添加一个脚本，方便使用，如下：
{
"scripts": {
"start": "node app.js",
"dev": "nodemon app.js"
}
}这样就可以通过执行 npm start 或 npm run dev 启动应用了。
可配置项
foxify-swaggerize-ui 可以通过传递配置对象进行配置。下面列出一些常用的选项：
title
页面标题。
app.use('/api-docs', swaggerUi({
title: 'Foxify API Documentation'
}));oauth2RedirectUrl
OAuth 2.0 重定向 URL。
app.use('/api-docs', swaggerUi({
oauth2RedirectUrl: 'http://localhost:3000/oauth2-redirect.html'
}));swaggerUi
Swagger UI 的配置项。
app.use('/api-docs', swaggerUi({
swaggerUi: {
// Swagger UI 的配置项
validatorUrl: null,
}
}));更多配置项可以参考 Swagger UI Configuration。
结语
通过本文，我们学习了如何使用 foxify-swaggerize-ui 为我们的 Swagger 接口文档提供可视化界面。foxify-swaggerize-ui 是一个非常强大的 npm 包，使用它可以让我们的文档更加直观、易于使用。
当然，Swagger 还有很多其他的高级功能，例如自动生成接口测试、自动生成代码片段等等。希望大家能够继续深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f6d9381d61a3540ed2