swaggerui自定义页面，兼容不同项目的接口文档地址

 

1. 下载项目https://github.com/swagger-api/swagger-ui 并且解压。
2. 进入swagger-ui文件夹。运行http-server命令。
3. 进入http://127.0.0.1:8080/dist/index.html就可以看到swagger页面了

 

 

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Swagger UI</title>
  <link rel="stylesheet" type="text/css" href="./swagger-ui.css">
  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
  <script src="jquery-2.1.1.min.js"></script>

  <style>
    html {
      box-sizing: border-box;
      overflow: -moz-scrollbars-vertical;
      overflow-y: scroll;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      margin: 0;
      background: #fafafa;
    }
    
  </style>
</head>

<body onload="loadData()">


  <div id="select-json-src"
    style="width: 100%; max-width: 87.5rem; margin: 0 auto; padding: 0 1.25rem; line-height: 3.75rem;">
    <label><b>请选择项目</b>：
      <select id="selector" onChange="loadData($('#selector option').filter(':selected').val())" style="width:150px;height:45px;font-size:20px;">
        <option value="http://127.0.0.1/basic/data/v2/api-docs">basic</option>
        <option value="http://127.0.0.1/dms/swagger.json">dms</option>
        <option value="http://127.0.0.1/ddm/swagger.json">ddm</option>
        <option value="http://127.0.0.1/worklist/v2/api-docs">worklist</option>
        
      </select>
    </label>
  </div>



  <div id="swagger-ui"></div>
  <script src="./swagger-ui-bundle.js"> </script>
  <script src="./swagger-ui-standalone-preset.js"> </script>
  <script>
    function loadData(url) {
      if (url == null) {
          url = "http://127.0.0.1/basic/data/v2/api-docs";
       }

      const ui = SwaggerUIBundle({
        url: url,
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })
      // End Swagger UI call region

      window.ui = ui
    }
  </script>
</body>

</html>

 

posted @ 2020-06-10 14:54  这个名字想了很久~  阅读(2002)  评论(0)  编辑  收藏  举报