Question

我正在尝试使用本地swagger.json文件在swagger文档中显示。

我的swagger.json文件位于/home/user1/swagger-ui/dist/swagger.json下，index.html位于同一目录下。我修改了index.html，如下所示。

 window.swaggerUi = new SwaggerUi({
    spec: ../swagger.json
    url: url,
    dom_id: "swagger-ui-container",

使用docker run -p 80:8080 swagger-ui-builder启动泊坞窗实例后，访问http://192.168.xx.xx/不会显示文档。附上屏幕截图以供参考。请帮我解决此问题。

Answer 1

问题中提供的示例根本无法工作（缺少昏迷，spec不是SwaggerUI属性。）

要显示与swagger.json位于同一文件夹中的index.html文件，您只需将url = "http://petstore.swagger.io/v2/swagger.json"替换为url = "swagger.json";中的index.html。

原始index.html

      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";
      }

      [...]

      window.swaggerUi = new SwaggerUi({
        url: url,
        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: {}
            });
          }

修改：

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

      [...]

      window.swaggerUi = new SwaggerUi({
        url: url,
        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: {}
            });
          }

Answer 2

这是我找到here的解决方案（如果安装了节点，则非常快速且无痛）：

使用Node，全局安装包http-server npm install -g http-server
将目录更改为json所在的位置，并运行命令http-server --cors（必须启用CORS才能使其生效）
打开swagger ui（即dist / index.html）
在输入字段中输入http://localhost:8080/my.json，然后点击＆＃34;探索＆＃34;

Answer 3

我有几个Swagger文件，想在它们之间轻松切换。所以我更改了index.html以获取第一个URL参数并打开swagger-ui。

我有不同文件的书签：

的index.html？file1的

的index.html？file2的

等。

<script>
window.onload = function() {

  var url = window.location.search.substring(1);

  if (url.length == 0) {
  url = "swagger.json";
  }

  // Build a system
  const ui = SwaggerUIBundle({
    url: url,
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
     SwaggerUIBundle.presets.apis,
     SwaggerUIStandalonePreset
    ],
    plugins: [
     SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
 })
window.ui = ui
}
</script>

如何在swagger-ui文档中使用本地json文件

3 个答案: