在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();