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

<!-- 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=" 100%; max- 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="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>
原文地址:https://www.cnblogs.com/shihaiming/p/13085148.html