概述:
在开发过程中,通用的功能我们通常会定义一些接口,但随着项目越做越大,时间越来越久,接口就越来越多,忘的就越来越多,沟通成本就越来越高,最后就会想到,当时把定义的接口及用法都写下就好了,巴拉巴拉一大堆后悔的话。
为了解决上述描述的问题,Swagger UI应运而生。
Swagger UI可以让我们把定义的接口以配置文件的方式编写,最后生成一个可视化较高的网站。
Swagger UI有如下优势:
- 编写语言统一
- 风格统一
不会像自己写的word说明文档,各成一家 - 可读性高
生成的界面简洁、信息全 - 可交互
这是最可贵的,根据查看到的接口,我们不仅能看到接口的链接串、参数、返回值等各种信息,我们还可以真是的对服务器进行请求,查看真实的交互,大大减小了同事之间的交互成本。
资源传送门
可以把Swagger UI理解成自己部署的一个网站
安装部署
下面介绍下如何部署自己的Swagger UI
1.从git上clone
github上clone:https://github.com/swagger-api/swagger-ui
2.新建一个文件夹public
将下载到的swagger ui里的dist文件夹里的文件复制到public文件夹里
3.在IIS上部署
在运行中inetmgr打开IIS,把public文件夹新建一个网站
如果MIME Types中没有对json的支持,需要添加 .json、application/json
4.访问
在浏览器中输入你配置的网址就可以访问了
http://localhost:8011/index.html
部署自己的接口API
上面的部署的接口来源是从Swagger UI官网提供的,如何部署自己的接口API呢,这需要先编写自己的API代码。
Swagger Editor提供了编写Swagger UI的工具。
大家可以在这里编写自己的Swagger UI,该框架使用的是YAML语言进行编写,不熟悉的朋友可以自行学习下。
步骤:
- 在Swagger Editor中点击File--->Download JSON
- 将下载的json文件你的public文件夹下
- 修改index.html文件,将原来引用官网json文件的链接改成刚生成的json文件的路径
// Build a system
const ui = SwaggerUIBundle({
url: "./swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
}
在浏览器中访问下,能访问就OK了。
推荐一个基于node部署的链接