javascript - 在 swagger-ui index.html 中加载多个 json 文件

Question

我有 2 个 json 文件。为了静态地提供这个服务，有人告诉我为每个 json 内容创建一个不同的变量，然后将它们添加到 url:url 的正下方。我的目标是在主页上有 2 个按钮，选项 1 和选项 2。单击选项 1 应该加载 spec swagger 内容，单击选项 2 应该加载 spec2 swagger 内容。执行此操作的简单方法是什么？

索引.html:

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

var spec={
Json stuff goes here
}

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

这是同一个文件中的 swagger 部分。现在只有 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 的加载事件

首先，创建两个容器:

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