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

你可能感兴趣的