Как использовать локальный файл json в документации swagger-ui

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 с помощью docker run -p 80:8080 swagger-ui-builder, доступ к http://192.168.xx.xx/ не отображает документацию. Прикрепление скриншота для справки. Пожалуйста, помогите мне решить эту проблему.

Answer 1

Образец, содержащийся в вопросе, не может работать вообще (отсутствует coma и 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: {} 
      }); 
      } 

Modified:

 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 (довольно быстро и безболезненно, если вы установили узел):

1. С узлом, глобально установите пакет http-server npm install -g http-server

2. Смените папку, где находится JSON, и выполнить команду http-server --cors (CORS должен быть включен для этой работы)

3. Открыть чванство Ui (т.е. расстояние/index.html)

4. Тип http://localhost:8080/my.json в поле ввода и нажмите кнопку «Исследовать»

Answer 3

У меня есть несколько файлов чванство и хотели бы легко переключаться между ними. Поэтому я изменил 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>