Comment ouvrir des fichiers locaux dans Swagger-UI

j'essaie d'ouvrir mon propre fichier de spécification swagger my.jsonswagger-ui sur mon ordinateur local.

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

<a href=File in windows explorer" src="/images/content/30400477/97a713e9a421a083aceea629ea4e0085.png"> Enter path to file in barWill be prefixed by current url and cannot find the file

si j'entre un chemin local, il sera toujours préfixé par l'url contenant le index.html. Et à cet effet, je ne peux pas ouvrir mon fichier. J'ai essayé toutes les combinaisons suivantes sans succès:

  • my.json mène à file:///D:/swagger-ui/dist/index.html/my.json
  • file:///D:/swagger-ui/dist/my.json mène à file:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.json
38
demandé sur Adam Taras 2015-05-22 18:22:58

11 réponses

je ne pouvais pas obtenir de l'Adam Taras, en réponse à de travail (par exemple en utilisant le chemin d'accès relatif ../my.json).

voici ma solution (assez rapide et indolore si vous avez noeud installé):

  • avec Node, installez globalement le paquet serveur httpnpm install -g http-server
  • Changer les répertoires où mon.json est situé, et exécutez la commande http-server --cors CORS (doit être activé pour que cela fonctionne)
  • Ouvrir swagger de l'interface utilisateur (c'est à dire dist / index.html)
  • Tapez http://localhost:8080/my.json dans le champ d'entrée et cliquez sur "Explorer"
40
répondu MandM 2015-11-11 19:16:40

paramètre spec.

Instructions ci-dessous.

Créer spec.fichier js contenant Swagger JSON

Créer un nouveau fichier javascript dans le même répertoire que l'indice.html (/dist/)

Puis insérez spec déclaration des variables:

var spec = 

coller dans l'aisance.contenu du fichier json après. Il n'a pas à être sur la même ligne que le = signer.

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 le Style de l'INTERFACE utilisateur de l'indice.html

C'est un double pas comme Ciara.

inclure les spécifications.js

modifier le / dist / index.html le fichier externe spec.js fichier.

 <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 le paramètre spec

modifier L'instance de SwaggerUi pour inclure le spec paramètre:

  window.swaggerUi = new SwaggerUi({
    url: url,
    spec: spec,
    dom_id: "swagger-ui-container",
13
répondu paragbaxi 2016-07-12 04:10:53

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

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

    mkdir C:\swagger
    

Si vous êtes sous Linux, essayez:

    mkdir /opt/swagger
  1. obtenir swagger-éditeur de texte avec la commande ci-dessous:

    git clone https://github.com/swagger-api/swagger-editor.git
    
  2. allez dans le répertoire swagger-editor qui est créé maintenant

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

    git clone https://github.com/swagger-api/swagger-ui.git
    
  4. maintenant, copiez votre fichier swagger, j'ai copié sur le chemin ci-dessous:

    ./swagger-editor/api/swagger/swagger.json
    
  5. toute la configuration est faite, exécutez le swagger-edit avec les commandes ci-dessous

    npm install
    npm run build
    npm start
    
  6. on vous demandera 2 URLs, l'une d'elles pourrait ressembler à:

    http://127.0.0.1:3001/
    

    ci-Dessus est swagger-éditeur URL

  7. maintenant, passez à:

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

    ci-dessus est swagger-ui URL

c'est tout.

Vous pouvez maintenant parcourir les fichiers à partir de swagger-ou de l'interface utilisateur swagger-éditeur

cela prendra du temps pour installer/construire, mais une fois fait, vous verrez de grands résultats.

cela a pris environ 2 jours de lutte pour moi, une installation unique n'a pris qu'environ 5 minutes.

maintenant, en haut à droite, vous pouvez consulter votre fichier local.

bonne chance.

5
répondu Manohar Reddy Poreddy 2017-06-26 06:59:48

Mon environnement,

Firefox 45,9 , Windows 7

swagger-ui ie 3.x

j'ai fait la décompression et le magasin est très bien dans un onglet Firefox. J'ai alors ouvert un nouvel onglet Firefox et suis allé à Fichier > Ouvrir le fichier et a ouvert mon swagger.fichier json. Le fichier vient nettoyer, c'est à dire comme un fichier.

j'ai ensuite copié la' localisation du fichier ' de Firefox (c'est-à-dire la localisation de L'URL par exemple: file:///D:/My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json).

je suis ensuite retourné à l'onglet Swagger UI et collé le texte de localisation du fichier dans la fenêtre swagger UI Explorer et mon swagger est venu propre.

J'espère que cela vous aidera.

1
répondu Mike Wilcox 2017-05-15 16:43:22

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

  • ../my.json mène à file:///D:/swagger-ui/dist/index.html/../my.json et fonctionne
  • /D:/swagger-ui/dist/my.json mène à 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:

1
répondu Adam Taras 2017-08-02 08:20:25

au lieu d'ouvrir swagger ui comme un fichier - vous mettez dans le navigateur fichier:///D: / swagger-ui / dist / index.HTML vous pouvez: créer IIS répertoire virtuel qui permet la navigation et les points à D:/swagger-ui

  1. ouvrez la console mmc, ajouter les services iis, développez Site Web par Défaut ajouter virtuel répertoire, mettre alias: swagger-ui, chemin physique: (votre chemin...) D:/swagger-ui
  2. dans la console mmc dans le volet du milieu double-cliquez sur "exploration de répertoire"
  3. dans mmc dans le volet droit cliquez "activer"
  4. après cela dans le navigateur mettez url pour ouvrir votre swagger-ui local http://localhost/swagger-ui/dist/
  5. maintenant, vous pouvez utiliser ../mon.json si vous avez copié le fichier dans le dossier dist ou vous pouvez créer un forlder séparé pour les échantillons, dire D:/swagger-ui/samples et utiliser ../samples/ma.json ou http://localhost/swagger-ui/samples/my.json
0
répondu Sasha Bond 2015-07-23 15:10:21

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

  • faire un dir (par exemple: swagger-ui) dans votre dir public (chemin Statique: Pas de route est nécessaire) et copier dist à partir de swagger-ui dans ce répertoire et ouvrir localhost/swagger-ui
  • vous verrez swagger-ui avec l'exemple par défaut de petstore
  • remplacer l'url par défaut de petstore dans dist / index.html avec votre localhost/api-docs le faire plus généralisée, remplacer par:

    emplacement.protocole+' / / ' + emplacement.nom d'hôte+(emplacement.port ? ':' + emplacement.port:") + "/ api-docs";

  • Frapper de nouveau localhost/swagger-ui

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

0
répondu keshav 2015-11-14 12:33:28

C'est comme ça que j'ai travaillé avec swagger JSON local

  1. faites tourner tomcat dans la machine locale
  2. téléchargez L'application Swagger UI et décompressez-la dans le dossier tomcat /webapps/swagger
  3. Baisse de locale swagger fichier json à l'intérieur /webapps/swagger dossier de tomcat
  4. Démarrage de tomcat (/bin/sh startup.sh)
  5. Ouvrez un navigateur et accédez à http://localhost:8080/swagger/
  6. Tapez votre fichier swagger json dans la boîte de test de Swagger Explore et cela devrait rendre les API.

Espérons que cela fonctionne pour vous

0
répondu Abhi 2016-08-31 08:47:28

une autre option est de lancer swagger en utilisant docker, vous pouvez utiliser cette image docker:

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

j'ai fait ce petit script de BASH ghetto pour tuer courir des conteneurs et reconstruire, donc fondamentalement chaque fois que vous faites un changement à votre spec et que vous voulez le voir, il suffit d'exécuter 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  }')
old_images=$(docker images | grep $APP_NAME | awk '{ print  }')

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
répondu MrName 2017-02-17 17:14:13

LINUX

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

J'ai donc opté pour la solution en ligne qui mettra à jour automatiquement le JSON sur Swagger sans avoir à réimporter.

si vous utilisez npm pour démarrer votre éditeur swagger, vous devez ajouter un lien symbolique de votre fichier json.

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

vous pourriez rencontrer des problèmes de cache. Le moyen rapide de résoudre ce fut l'ajout d'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
}
0
répondu itachi42 2017-05-19 09:28:54

Avec Firefox, Je:

  1. Téléchargé et déballé une version de Swagger.IO à C:\Swagger\
  2. Créé un dossier nommé Définitions