Как открыть локальные файлы в Swagger-UI

Я пытаюсь открыть свой собственный файл спецификаций swagger my.json с swagger-ui на моем локальном компьютере.

Итак, я скачал последний тег v2.1.8-M1 и извлек zip. Затем я вошел в подкаталог dist и скопировал в него файл my.json. Теперь я открыл index.html и хочу изучить my.json. И здесь проблема начинается:

File in windows explorer Enter path to file in bar Will be prefixed by current url and cannot find the file

Если я вхожу в локальный путь, он всегда будет иметь префикс текущего url, содержащего index.html. И поэтому я не могу открыть свой файл. Я пробовал все последующие комбинации без успеха:

  • my.json приводит к file:///D:/swagger-ui/dist/index.html/my.json
  • file:///D:/swagger-ui/dist/my.json приводит к file:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.json

Ответы

Ответ 1

Что работает, это ввести относительный путь или абсолют без file:// -protocol:

  • ../my.json приводит к file:///D:/swagger-ui/dist/index.html/../my.json и работает
  • /D:/swagger-ui/dist/my.json приводит к file:///D:/swagger-ui/dist/my.json и работает

ПОДСКАЗКА

Этот ответ работает с Firefox на Win7. Для Chrome-браузера см. Комментарии ниже:

Ответ 2

Я не мог заставить Адама Тараса ответить на работу (т.е. используя относительный путь ../my.json).

Вот мое решение (довольно быстрое и безболезненное, если у вас установлено node):

  • С Node, глобально установите пакет http-server npm install -g http-server
  • Измените директории, где находится my.json, и запустите команду http-server --cors (для этого нужно активировать CORS)
  • Откройте swagger ui (т.е. dist/index.html)
  • Введите http://localhost:8080/my.json в поле ввода и нажмите "Исследуйте"

Ответ 3

Используйте параметр spec.

Инструкции ниже.

Создайте файл spec.js, содержащий Swagger JSON

Создайте новый файл JavaScript в том же каталоге, что и index.html(/dist/)

Затем вставьте объявление переменной spec:

var spec =

Затем вставьте содержимое файла swagger.json после. Он не обязательно должен находиться на одной строке со знаком =.

Пример:

var spec =

{
    "swagger": "2.0",
    "info": {
        "title": "I love Tex-Mex API",
        "description": "You can barbecue it, boil it, broil it, bake it, saute it. Dey uh, Tex-Mex-kabobs, Tex-Mex creole, Tex-Mex gumbo. Pan fried, deep fried, stir-fried. There pineapple Tex-Mex, lemon Tex-Mex, coconut Tex-Mex, pepper Tex-Mex, Tex-Mex soup, Tex-Mex stew, Tex-Mex salad, Tex-Mex and potatoes, Tex-Mex burger, Tex-Mex sandwich..",
        "version": "1.0.0"
    },
    ...
    }
}

Изменить Swagger UI index.html

Это двухступенчатый, как Сиара.

Включить spec.js

Измените файл /dist/index.html, чтобы включить внешний файл spec.js

 <script src='spec.js' type="text/javascript"></script>

Пример:

  <!-- Some basic translations -->
  <!-- <script src='lang/translator.js' type='text/javascript'></script> -->
  <!-- <script src='lang/ru.js' type='text/javascript'></script> -->
  <!-- <script src='lang/en.js' type='text/javascript'></script> -->

  <!-- Original file pauses -->
  <!-- Insert external modified swagger.json -->
  <script src='spec.js' type="text/javascript"></script>
  <!-- Original file resumes -->

  <script type="text/javascript">

    $(function () {
      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";
      }

Добавить параметр спецификации

Измените экземпляр SwaggerUi, включив в него параметр spec:

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

Ответ 4

После некоторой битвы я нашел лучшее решение.

  • создать каталог с именем: swagger

    mkdir C:\swagger

Если вы находитесь в Linux, попробуйте:

    mkdir /opt/swagger

  1. получите редактор swagger с командой ниже:

    git clone https://github.com/swagger-api/swagger-editor.git

  2. войдите в каталог swagger-editor, который теперь создается

    cd swagger-editor

  3. теперь получите swagger-ui с командой ниже:

    git clone https://github.com/swagger-api/swagger-ui.git

  4. теперь скопируйте свой файл swagger, я скопировал его ниже:

    ./swagger-editor/api/swagger/swagger.json

  5. вся настройка выполнена, запустите редактирование swagger с помощью следующих команд

    npm install
npm run build
npm start

  6. Вам будет предложено ввести 2 URL-адреса, один из которых может выглядеть так:

    http://127.0.0.1:3001/

    Выше URL-адрес редактора URL-адреса

  7. Теперь перейдите к:

    http://127.0.0.1:3001/swagger-ui/dist/

    Выше URL-адрес URL-адреса URL-адреса

Вот и все.

Теперь вы можете просматривать файлы с любого из swagger-ui или чванство-редактор

Требуется время для установки/сборки, но после этого вы увидите отличные результаты.

Мне потребовалось примерно 2 дня борьбы, одноразовая установка заняла всего около 5 минут.

Теперь в правом верхнем углу вы можете перейти к локальному файлу.

Желаем удачи.

Ответ 5

В локальном каталоге, который содержит файл ./docs/specs/openapi.yml который вы хотите просмотреть, вы можете запустить следующее, чтобы запустить контейнер и получить доступ к спецификации по адресу http://127.0.0.1:8246.

docker run -t -i -p 8246:8080 -e SWAGGER_JSON=/var/specs/openapi.yml -v $PWD/docs/specs:/var/specs swaggerapi/swagger-ui

Ответ 6

У меня была эта проблема, и здесь гораздо проще:

  • Сделать каталог (например: swagger-ui) в вашем общедоступном каталоге (статический путь: нет маршрута требуется) и скопируйте dist из swagger-ui в этот каталог и открыть localhost/swagger-ui
  • Вы увидите swagger-ui со стандартным примером petstore

  • Замените URL-адрес petstore по умолчанию в dist/index.html с помощью localhost/api-docs или чтобы сделать его более обобщенным, замените его следующим:

    location.protocol + '//' + location.hostname + (location.port? ':' + location.port: '') + "/api-docs";

  • Еще раз нажмите localhost/swagger-ui

Voila! Вы выполняете локальную реализацию swagger

Ответ 7

Моя среда,
Firefox 45.9, Windows 7
swagger-ui ie 3.x

Я сделал распаковку, и petstore отлично подходит на вкладке Firefox. Затем я открыл новую вкладку Firefox и перешел в File > Open File и открыл файл swagger.json. Файл выглядит чистым, то есть в виде файла.

Затем я скопировал "местоположение файла" из Firefox (т.е. расположение URL, например: file:///D:/My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json).

Затем я вернулся к вкладке пользовательского интерфейса swagger и вставлял текст местоположения файла в окно изучения пользовательского интерфейса swagger, и мой чванство пришло в порядок.

Надеюсь, это поможет.

Ответ 8

LINUX

У меня всегда были проблемы при попытке путей и параметра spec.

Поэтому я пошел на онлайн-решение, которое автоматически обновит JSON на Swagger без reimport.

Если вы используете npm для запуска вашего редактора swagger, вы должны добавить символическую ссылку вашего json файла.

cd /path/to/your/swaggerui where index.html is
ln -s /path/to/your/generated/swagger.json

У вас могут возникнуть проблемы с кешем. Быстрый способ решить это - добавить токен в конце моего URL-адреса...

window.onload = function() {

var noCache = Math.floor((Math.random() * 1000000) + 1);

// Build a system
const editor = SwaggerEditorBundle({
url: "http://localhost:3001/swagger.json?"+noCache,
  dom_id: '#swagger-editor',
  layout: 'StandaloneLayout',
  presets: [
    SwaggerEditorStandalonePreset
  ]
})

window.editor = editor
}

Ответ 9

Вместо открытия swagger ui в качестве файла - вы помещаете в браузер Файл:///D:/swagger-ui/dist/index.html ты можешь: создать виртуальный каталог iis, который позволяет просматривать и указывать на D:/swagger-ui

  • открыть mmc, добавить службы iis, expand Веб-сайт по умолчанию добавить виртуальный каталог, поместить псевдоним: swagger-ui, физический путь: (ваш путь...) D:/swagger-ui
  • в mmc в средней панели дважды нажмите на "просмотр каталогов"
  • в mmc в правой панели нажмите "включить"
  • после этого в браузере введите url, чтобы открыть локальный swagger-ui http://localhost/swagger-ui/dist/
  • теперь вы можете использовать.. /my.json, если вы скопировали файл в папку dist или вы можете создать отдельный forlder для образцов, скажем D:/swagger-ui/samples и использовать.. /samples/my.json или http://localhost/swagger-ui/samples/my.json

Ответ 10

Вот как я работал с местным чванством JSON

  • Попробуйте запустить tomcat на локальном компьютере.
  • Загрузите приложение пользовательского интерфейса Swagger и распакуйте его в папку tomcat/webapps/swagger.
  • Отбросить локальный файл json внутри java файла внутри /webapps/swagger folder of tomcat
  • Запустите tomcat (/bin/sh startup.sh)
  • Откройте браузер и перейдите к http://localhost:8080/swagger/
  • введите ваш jag файл swagger в тестовом поле Swagger Explore, и это должно отображать API.

Надеюсь, это сработает для вас.

Ответ 11

Еще один вариант - запустить swagger с помощью docker, вы можете использовать это изображение докеры:

https://hub.docker.com/r/madscientist/swagger-ui/

Я сделал это гетто маленьким BASH script, чтобы убивать запущенные контейнеры и перестраивать, поэтому в основном каждый раз, когда вы вносите изменения в свой spec и хотите его увидеть, просто запустите script. Обязательно укажите имя своего приложения в переменной APP_NAME

#!/bin/bash

# Replace my_app with your application name
APP_NAME="my_app"

# Clean up old containers and images
old_containers=$(docker ps -a | grep $APP_NAME | awk '{ print $1 }')
old_images=$(docker images | grep $APP_NAME | awk '{ print $3 }')

if [[ $old_containers ]];
    then
        echo "Stopping old containers: $old_containers"
        docker stop $old_containers
        echo "Removing old containers: $old_containers"
        docker rm $old_containers
fi

if [[ $old_images ]];
    then
        echo "Removing stale images"
        docker rmi $old_images
fi

# Create new image
echo "Creating new image for $APP_NAME"
docker build . -t $APP_NAME

# Run container
echo "Running container with image $APP_NAME"
docker run -d --name $APP_NAME -p 8888:8888 $APP_NAME
echo "Check out your swaggery goodness here:

http://localhost:8888/swagger-ui/?url=http://localhost:8888/swagger-ui/swagger.yaml"

Ответ 12

С Firefox я:

  1. Скачивали и распаковали версию Swagger.IO в C:\Swagger\
  2. Создал папку под названием "Определения" в C:\Swagger\dist
  3. Скопировал мой swagger.json определения swagger.json и
  4. В поле "Explore" введите "Определения /MyDef.swagger.json"

Будьте осторожны с вашими косой чертой!

Кажется, вы можете развернуть структуру папок, но не вверх, досадно.