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