web-dev-qa-db-fra.com

Comment ouvrir des fichiers locaux dans Swagger-UI

J'essaie d'ouvrir mon fichier de spécification swagger auto-généré my.json avec swagger-ui sur mon ordinateur local.

Donc, j'ai téléchargé la dernière balise v2.1.8-M1 et extrait le zip. Ensuite, je suis entré dans le sous-dossier dist et y ai copié le fichier my.json. Maintenant, j'ai ouvert le index.html et je souhaite explorer my.json. Et ici le problème commence:

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

Si j'entre un chemin local, il sera toujours préfixé par l'URL actuelle contenant le index.html. Et pour cela je ne peux pas ouvrir mon dossier. J'ai essayé toutes les combinaisons suivantes sans succès:

  • my.json conduit à file:///D:/swagger-ui/dist/index.html/my.json
  • file:///D:/swagger-ui/dist/my.json conduit à file:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.json
fileswaggerswagger-uiswagger-2.0
42
Adam Taras

Ce qui fonctionne, c'est d'entrer un chemin relatif ou un absolu sans le protocole file://-:

  • ../my.json conduit à file:///D:/swagger-ui/dist/index.html/../my.json et fonctionne
  • /D:/swagger-ui/dist/my.json conduit à file:///D:/swagger-ui/dist/my.json et fonctionne

INDICE

Cette réponse fonctionne avec Firefox sur Win7. Pour Chrome-Browser, voir les commentaires ci-dessous:

2
Adam Taras

Je ne pouvais pas obtenir la réponse d’Adam Taras (c’est-à-dire en utilisant le chemin relatif ../my.json).

Voici ma solution (assez rapide et sans douleur si vous avez installé le noeud):

  • Avec Node, installez globalement le paquet http-servernpm install -g http-server
  • Remplacez les répertoires par l'emplacement où se trouve my.json et exécutez la commande http-server --cors (pour que cela fonctionne, CORS
  • Ouvrez swagger ui (c'est-à-dire dist/index.html)
  • Tapez http://localhost:8080/my.json dans le champ de saisie et cliquez sur "Explorer"
44
MandM

Utilisez le paramètre spec .

Instructions ci-dessous.

Créer un fichier spec.js contenant Swagger JSON

Créez un nouveau fichier javascript dans le même répertoire que index.html (/ dist /)

Puis insérez la déclaration de variable spec:

var spec =

Ensuite, collez le contenu du fichier swagger.json après. Il ne doit pas obligatoirement figurer sur la même ligne que le signe =.

Exemple:

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's uh, Tex-Mex-kabobs, Tex-Mex creole, Tex-Mex gumbo. Pan fried, deep fried, stir-fried. There's 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"
    },
    ...
    }
}

Modifier l'interface utilisateur Swagger index.html

C'est un pas en deux comme Ciara.

Inclure spec.js

Modifiez le fichier /dist/index.html pour inclure le fichier externe spec.js.

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

Exemple:

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

Ajouter un paramètre de spécification

Modifiez l'instance SwaggerUi pour inclure le paramètre spec:

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

Après un peu de lutte, j'ai trouvé une meilleure solution.

  1. créer un répertoire avec le nom: swagger

    mkdir C:\swagger

Si vous êtes sous Linux, essayez:

    mkdir /opt/swagger

  1. obtenez swagger-editor avec la commande ci-dessous:

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

  2. aller dans le répertoire swagger-editor créé maintenant

    cd swagger-editor

  3. maintenant obtenir swagger-ui avec la commande ci-dessous:

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

  4. maintenant, copiez votre fichier swagger, je l'ai copié dans le chemin ci-dessous:

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

  5. toute la configuration est terminée, lancez swagger-edit avec les commandes ci-dessous

    npm install
npm run build
npm start

  6. On vous demandera 2 URL, l'une d'elles pourrait ressembler à:

    http://127.0.0.1:3001/

    Ci-dessus est swagger-editor URL

  7. Maintenant, naviguez jusqu'à:

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

    Ci-dessus est swagger-ui URL

C'est tout.

Vous pouvez maintenant parcourir les fichiers depuis Swagger-ui ou Swagger-editor

Il faudra du temps pour installer/construire, mais une fois cela fait, vous verrez d’excellents résultats.

Cela a pris environ 2 jours de lutte pour moi, une installation ponctuelle n'a pris que 5 minutes environ.

Maintenant, en haut à droite, vous pouvez accéder à votre fichier local.

bonne chance.

7
Manohar Reddy Poreddy

Dans un répertoire local contenant le fichier ./docs/specs/openapi.yml à afficher, vous pouvez exécuter ce qui suit pour démarrer un conteneur et accéder à la spécification à 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
1
simesy

Mon environnement,
Firefox 45.9, Windows 7
swagger-ui ie 3.x 

J'ai fait le dézipage et le magasin d'animaux de compagnie s'affiche correctement dans un onglet Firefox . J'ai ensuite ouvert un nouvel onglet Firefox et suis allé dans Fichier> Ouvrir le fichier et a ouvert mon fichier swagger.json. Le fichier apparaît propre, c'est-à-dire sous forme de fichier. 

J'ai ensuite copié «l'emplacement du fichier» depuis Firefox (c'est-à-dire l'emplacement de l'URL, par exemple: fichier: /// D: /My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json). 

Je suis ensuite retourné à l'onglet d'interface utilisateur de swagger et ai collé le texte d'emplacement de fichier dans la fenêtre d'exploration d'interface utilisateur de swagger. 

J'espère que cela t'aides. 

1
Mike Wilcox

J'ai eu ce problème et voici la solution beaucoup plus simple:

  • Créez un répertoire (par exemple, swagger-ui) dans votre répertoire public (chemin statique: aucune routeis n'est requis) et copiez dist de swagger-ui dans ce répertoire etopenlocalhost/swagger-ui
  • Vous verrez swagger-ui avec l'exemple de l'animalerie par défaut

  • Remplacez l’URL petstore par défaut dans dist/index.html par votrelocalhost/api-docsou pour le rendre plus généralisé, remplacez-le par ceci:

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

  • Hit à nouveaulocalhost/swagger-ui

Voila! Votre implémentation locale de swagger est prête

1
keshav

LINUX

J'ai toujours eu des problèmes en essayant les chemins et le paramètre spec.

C'est pourquoi j'ai opté pour la solution en ligne qui mettra à jour automatiquement le JSON sur Swagger sans avoir à importer de nouveau.

Si vous utilisez npm pour lancer votre éditeur swagger, vous devez ajouter un lien symbolique à votre fichier json. 

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

Vous pouvez rencontrer des problèmes de cache ... Le moyen le plus rapide de résoudre ce problème était d’ajouter un jeton à la fin de mon 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
}
1
itachi42

Voici comment j'ai travaillé avec JSON swagger local

  1. Faire fonctionner Tomcat sur une machine locale
  2. Téléchargez l'application Swagger UI et décompressez-la dans le dossier/webapps/swagger de Tomcat.
  3. Déposez le fichier swagger json local dans le dossier/webapps/swagger de Tomcat
  4. Démarrer Tomcat (/ bin/sh startup.sh)
  5. Ouvrez un navigateur et accédez à http: // localhost: 8080/swagger/
  6. tapez votre fichier swagger json dans la zone de test Swagger Explore, ce qui devrait rendre les API.

J'espère que cela fonctionne pour toi

0
Abhi

Avec Firefox, je:

  1. Téléchargé et décompacté une version de Swagger.IO vers C:\Swagger \
  2. Création d'un dossier appelé Definitions dans C:\Swagger\dist
  3. Copié mon fichier de définition swagger.json à cet endroit, et
  4. Entré "Définitions/MyDef.swagger.json" dans la boîte Explorer

Faites attention à vos directions de barre oblique !!

Il semble que vous puissiez explorer la structure des dossiers, mais pas vers le haut, de manière ennuyeuse.

0
SteveCinq

Au lieu d’ouvrir swagger ui en tant que fichier, vous devez le placer dans le navigateur File: /// D: /swagger-ui/dist/index.htmlvous pouvez: Créer un répertoire virtuel qui permette la navigation et pointe vers D:/swagger-ui

  1. ouvrez mmc, ajoutez des services IIS, développez Site Web par défaut, ajoutez virtualdirectory, entrez le pseudonyme: swagger-ui, chemin physique: (votre chemin ...) D:/swagger-ui
  2. dans mmc dans le volet du milieu, double-cliquez sur "navigation dans les répertoires"
  3. dans mmc dans le volet de droite, cliquez sur "Activer".
  4. après cela, dans le navigateur, mettez l’URL pour ouvrir votre swagger-ui local http: // localhost/swagger-ui/dist /
  5. maintenant, vous pouvez utiliser ../my.json si vous avez copié le fichier dans le dossier dist ou vous pouvez créer un fichier séparé pour les échantillons, dites D:/swagger-ui/samples et utilisez ../samples/my.json ou http : //localhost/swagger-ui/samples/my.json
0
Sasha Bond

Une autre option consiste à exécuter swagger en utilisant docker, vous pouvez utiliser cette image de docker:

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

J'ai créé ce petit script BASH ghetto pour supprimer les conteneurs en cours d'exécution et les reconstruire. Ainsi, chaque fois que vous apportez une modification à vos spécifications et que vous souhaitez les voir, exécutez simplement le script. Assurez-vous de mettre le nom de votre application dans la variable 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"
0
MrName