Comment ouvrir des fichiers locaux dans Swagger-UI
j'essaie d'ouvrir mon propre fichier de spécification swagger my.json
swagger-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:
File in windows explorer" src="/images/content/30400477/97a713e9a421a083aceea629ea4e0085.png">
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
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 http
npm 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"
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",
Après un peu de lutte, j'ai trouvé une meilleure solution.
créer un répertoire avec un nom: swagger
mkdir C:\swagger
Si vous êtes sous Linux, essayez:
mkdir /opt/swagger
obtenir swagger-éditeur de texte avec la commande ci-dessous:
git clone https://github.com/swagger-api/swagger-editor.git
allez dans le répertoire swagger-editor qui est créé maintenant
cd swagger-editor
maintenant obtenir swagger-ui avec ci-dessous commande:
git clone https://github.com/swagger-api/swagger-ui.git
maintenant, copiez votre fichier swagger, j'ai copié sur le chemin ci-dessous:
./swagger-editor/api/swagger/swagger.json
toute la configuration est faite, exécutez le swagger-edit avec les commandes ci-dessous
npm install npm run build npm start
on vous demandera 2 URLs, l'une d'elles pourrait ressembler à:
http://127.0.0.1:3001/
ci-Dessus est swagger-éditeur URL
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.
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.
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:
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
- 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
- dans la console mmc dans le volet du milieu double-cliquez sur "exploration de répertoire"
- dans mmc dans le volet droit cliquez "activer"
- après cela dans le navigateur mettez url pour ouvrir votre swagger-ui local http://localhost/swagger-ui/dist/
- 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
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
C'est comme ça que j'ai travaillé avec swagger JSON local
- faites tourner tomcat dans la machine locale
- téléchargez L'application Swagger UI et décompressez-la dans le dossier tomcat /webapps/swagger
- Baisse de locale swagger fichier json à l'intérieur /webapps/swagger dossier de tomcat
- Démarrage de tomcat (/bin/sh startup.sh)
- Ouvrez un navigateur et accédez à http://localhost:8080/swagger/
- 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
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"
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
}
Avec Firefox, Je:
- Téléchargé et déballé une version de Swagger.IO à C:\Swagger\
- Créé un dossier nommé Définitions