Swagger UI入门部署

概述：

在开发过程中，通用的功能我们通常会定义一些接口，但随着项目越做越大，时间越来越久，接口就越来越多，忘的就越来越多，沟通成本就越来越高，最后就会想到，当时把定义的接口及用法都写下就好了，巴拉巴拉一大堆后悔的话。

为了解决上述描述的问题，Swagger UI应运而生。

Swagger UI可以让我们把定义的接口以配置文件的方式编写，最后生成一个可视化较高的网站。

Swagger UI有如下优势：

• 编写语言统一
• 风格统一
  不会像自己写的word说明文档，各成一家
• 可读性高
  生成的界面简洁、信息全
• 可交互
  这是最可贵的，根据查看到的接口，我们不仅能看到接口的链接串、参数、返回值等各种信息，我们还可以真是的对服务器进行请求，查看真实的交互，大大减小了同事之间的交互成本。

资源传送门

官网地址
Demo地址
在线编辑地址

可以把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部署的链接