在swagger-ui index.html中加載多個json文件

Question

我有2個json文件。 為了靜態提供服務，有人告訴我為每個json內容創建一個不同的變量，然后在url：url下添加這些變量。 我的目標是在主頁上有2個按鈕，分別是選項1和選項2。單擊選項1會加載spec swagger內容，單擊選項2會加載spec2 swagger內容。 這樣做的簡單方法是什么？

index.html的：

<script type="text/javascript">
    $(function () {

var spec={
Json stuff goes here
}

var spec2={
Json stuff for #2 goes here
}

這是同一文件中的大雜燴部分。 現在，只有spec get最初加載。

var url = window.location.search.match(/url=([^&]+)/);
  if (url && url.length > 1) {
    url = decodeURIComponent(url[1]);
  } else {
    url = "http://petstore.swagger.io/v2/swagger.json";
  }

  hljs.configure({
    highlightSizeThreshold: 5000
  });

  // Pre load translate...
  if(window.SwaggerTranslator) {
    window.SwaggerTranslator.translate();
  }
  window.swaggerUi = new SwaggerUi({
    url: url,
    spec: spec,  // Here is where I call the variables
    spec2: spec2
    dom_id: "swagger-ui-container",
    supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
    onComplete: function(swaggerApi, swaggerUi){
      if(typeof initOAuth == "function") {
        initOAuth({
          clientId: "your-client-id",
          clientSecret: "your-client-secret-if-required",
          realm: "your-realms",
          appName: "your-app-name",
          scopeSeparator: ",",
          additionalQueryStringParams: {}
        });
      }

      if(window.SwaggerTranslator) {
        window.SwaggerTranslator.translate();
      }
    },
    onFailure: function(data) {
      log("Unable to Load SwaggerUI");
    },
    docExpansion: "none",
    jsonEditor: false,
    defaultModelRendering: 'schema',
    showRequestHeaders: false
  });

  window.swaggerUi.load();

  function log() {
    if ('console' in window) {


         console.log.apply(console, arguments);
        }
      }
  });
  </script>
</head>

Answer 1

您所描述的可能是最簡單的方法。 只需編輯index.html以擁有一個按鈕，然后觸發swagger-ui的load事件

首先，創建兩個容器：

<div id="swagger-ui-container-1" class="swagger-ui-wrap"></div>
<div id="swagger-ui-container-2" class="swagger-ui-wrap"></div>

接下來，創建兩個swagger對象並將其分配給每個容器：

  // create swagger_1, do the same with swagger_2

  var swagger_1 = new SwaggerUi({
    url: url,
    dom_id: "swagger-ui-container-1",
    supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
    onComplete: function(swaggerApi, swaggerUi){
      swaggerApi.setBasePath('/foo');
    },
    onFailure: function(data) {
      log("Unable to Load SwaggerUI");
    },
    docExpansion: "none",
    jsonEditor: false,
    apisSorter: "alpha",
    defaultModelRendering: 'schema',
    showRequestHeaders: false
  });

最后，在數組中保留對它們的引用，並對它們中的每一個進行調用：

  window.apis = [swagger_1, swagger_2];
  window.apis[0].load();