swagger-ui 3升级

---

title: swagger-ui 3升级
tags: swagger-ui 3

---

在上一篇文章swagger入门中，我们初步学习了swagger的运用，以及swagger-ui那简洁的api文档界面，但由于用的swagger-ui的版本是2.7.0的，因此会有些bug，比如最大最小值在文档界面无法显示，界面不够美观等等。幸好有swagger-ui更新的版本，解决了上面的一些问题，下面我们就在上篇文章工程的基础上，将swagger-ui进行升级.

去除原有依赖

首先将原来pom文件中的swagger-ui依赖注释或删除,像这样。(注意:只需将swagger-ui的依赖去掉)

下载新的swagger-ui文件

到swagger-ui的github上下载zip包，然后解压，将dist这个文件夹下的所有文件拷贝到你工程里:

拷贝后的文件

修改index.html

将其中的url更改为你对应的api文档数据来源的地址:

window.onload = function() {
  
  // Build a system
  const ui = SwaggerUIBundle({
    url: "http://localhost:8000/v2/api-docs",//need to be modify
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  })

  window.ui = ui
}

修改完成后，启动你的应用，不出意外的话，你将会看到一个精美的(起码我是这么认为的)api文档界面:

new swagger-ui

看是不是比上一版本的更好看了.