it-swarm.com.de

So öffnen Sie lokale Dateien in Swagger-UI

Ich versuche, meine selbst erstellte Swagger-Spezifikationsdatei my.json mit swagger-ui auf meinem lokalen Computer zu öffnen.

Also habe ich download das neueste Tag v2.1.8-M1 _ und das Zip extrahiert. Dann ging ich in den Unterordner dist und kopierte die Datei my.json hinein. Jetzt habe ich index.html geöffnet und möchte my.json erkunden. Und hier beginnt das Problem:

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

Wenn ich einen lokalen Pfad eingebe, wird ihm immer die aktuelle URL vorangestellt, die index.html enthält. Und deshalb kann ich meine Datei nicht öffnen. Ich habe alle folgenden Kombinationen ohne Erfolg ausprobiert:

  • my.json führt zu file:///D:/swagger-ui/dist/index.html/my.json
  • file:///D:/swagger-ui/dist/my.json führt zu file:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.json
42
Adam Taras

Was funktioniert, ist die Eingabe eines relativen Pfads oder eines absoluten Werts ohne das file://- Protokoll:

  • ../my.json führt zu file:///D:/swagger-ui/dist/index.html/../my.json und funktioniert
  • /D:/swagger-ui/dist/my.json führt zu file:///D:/swagger-ui/dist/my.json und funktioniert

HINWEIS

Diese Antwort funktioniert mit Firefox unter Win7. Für Chrome-Browser siehe Kommentare unten:

2
Adam Taras

Ich konnte die Antwort von Adam Taras nicht erhalten (d. H. Mit dem relativen Pfad ../my.json).

Hier war meine Lösung (ziemlich schnell und schmerzlos, wenn Sie Knoten installiert haben):

  • Installieren Sie mit Node global das Paket http-server npm install -g http-server.
  • Wechseln Sie in das Verzeichnis, in dem sich die Datei my.json befindet, und führen Sie den Befehl http-server --cors aus (CORS muss aktiviert sein, damit dies funktioniert).
  • Open swagger ui (d. H. Dist/index.html)
  • Geben Sie http://localhost:8080/my.json in das Eingabefeld ein und klicken Sie auf "Explore".
44
MandM

Verwenden Sie den Parameter spec .

Anweisungen unten.

Erstellen Sie eine spec.js-Datei, die Swagger JSON enthält

Erstellen Sie eine neue Javascript-Datei in demselben Verzeichnis wie index.html (/ dist /)

Fügen Sie dann die Variablendeklaration spec ein:

var spec = 

Fügen Sie anschließend den Inhalt der Datei swagger.json ein. Es muss sich nicht in derselben Zeile wie das Zeichen = befinden.

Beispiel:

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"
    },
    ...
    }
}

Ändern Sie die Swagger-Benutzeroberfläche index.html

Dies ist ein zweistufiger Vorgang wie bei Ciara.

Include spec.js

Ändern Sie die Datei /dist/index.html, um die externe spec.js-Datei einzuschließen.

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

Beispiel:

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

Spezifikationsparameter hinzufügen

Ändern Sie die SwaggerUi-Instanz, um den Parameter spec aufzunehmen:

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

Nach einigem Kampf fand ich eine bessere Lösung.

  1. erstellen Sie ein Verzeichnis mit dem Namen: swagger

    mkdir C:\swagger
    

Wenn Sie sich unter Linux befinden, versuchen Sie Folgendes:

    mkdir /opt/swagger
  1. holen Sie sich den Swagger-Editor mit dem folgenden Befehl:

    git clone https://github.com/swagger-api/swagger-editor.git
    
  2. gehen Sie in das jetzt erstellte Swagger-Editor-Verzeichnis

    cd swagger-editor
    
  3. holen Sie sich jetzt swagger-ui mit dem folgenden Befehl:

    git clone https://github.com/swagger-api/swagger-ui.git
    
  4. kopieren Sie jetzt Ihre Swagger-Datei, die ich unter folgendem Pfad kopiert habe:

    ./swagger-editor/api/swagger/swagger.json
    
  5. wenn alle Einstellungen abgeschlossen sind, führen Sie den Befehl swagger-edit mit den folgenden Befehlen aus

    npm install
    npm run build
    npm start
    
  6. Es werden 2 URLs angezeigt, von denen eine folgendermaßen aussehen kann:

    http://127.0.0.1:3001/
    

    Oben ist die URL des Swagger-Editors

  7. Jetzt browsen zu:

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

    Oben ist die Swagger-Ui-URL

Das ist alles.

Sie können Dateien nun entweder mit Swagger-ui oder Swagger-editor durchsuchen

Die Installation/Erstellung wird einige Zeit dauern, aber sobald Sie fertig sind, werden Sie großartige Ergebnisse sehen.

Es dauerte ungefähr zwei Tage des Kampfes für mich, eine einmalige Installation dauerte nur etwa 5 Minuten.

Jetzt oben rechts können Sie zu Ihrer lokalen Datei navigieren.

viel Glück.

In einem lokalen Verzeichnis, das die Datei ./docs/specs/openapi.yml enthält, die Sie anzeigen möchten, können Sie Folgendes ausführen, um einen Container zu starten und auf die Spezifikation unter http://127.0.0.1:8246 zuzugreifen.

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

Meine Umgebung
Firefox 45.9, Windows 7
swagger-ui dh 3.x 

Ich habe das Entpacken gemacht und der Petstore kommt gut in einem Firefox-Tab ... __ Ich öffnete einen neuen Firefox-Tab und ging auf Datei> Datei öffnen und öffnet meine swagger.json-Datei. Die Datei erscheint sauber, dh als Datei. 

Ich habe dann den "Dateispeicherort" von Firefox kopiert (dh den URL-Speicherort zB: file: /// D: /My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json). 

Dann ging ich zurück zum Swagger-UI-Tab und fügte den Dateispeicherort-Text in das Swagger-UI-Explorer-Fenster ein. Mein Swagger wurde sauber. 

Hoffe das hilft. 

1
Mike Wilcox

Ich hatte dieses Problem und hier ist eine viel einfachere Lösung:

  • Erstellen Sie ein Verzeichnis (z. B .: swagger-ui) in Ihrem öffentlichen Verzeichnis (statischer Pfad: Keine Route ist erforderlich), und kopieren Sie dist von swagger-ui in dieses Verzeichnis undopenlocalhost/swagger-ui
  • Sie sehen swagger-ui mit dem Standard-Beispiel für den Petstore
  • Ersetzen Sie die Standard-URL für petstore in dist/index.html durch Ihrelocalhost/api-docsoder um es verallgemeinernd zu machen, ersetzen Sie dies durch Folgendes:

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

  • Nochmals schlagenlocalhost/swagger-ui

Voila! Ihre lokale Implementierung ist fertig

1
keshav

LINUX

Ich hatte immer Probleme beim Ausprobieren von Pfaden und dem spec-Parameter.

Deshalb habe ich mich für die Online-Lösung entschieden, mit der die JSON auf Swagger automatisch aktualisiert wird, ohne erneut importieren zu müssen.

Wenn Sie den Swagger-Editor mit npm starten, sollten Sie einen symbolischen Link zu Ihrer json-Datei hinzufügen. 

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

Es können Cache-Probleme auftreten. Der schnelle Weg, dieses Problem zu lösen, war das Hinzufügen eines Tokens am Ende meiner 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

So habe ich mit dem lokalen Swagger JSON gearbeitet

  1. Lassen Sie Tomcat auf dem lokalen Computer laufen
  2. Laden Sie die Swagger UI-Anwendung herunter und entpacken Sie sie in den Tomcat-Ordner/webapps/swagger
  3. Legen Sie die lokale Swagger-Json-Datei im Ordner/webapps/swagger von Tomcat ab
  4. Starten Sie Tomcat (/ bin/sh startup.sh).
  5. Öffnen Sie einen Browser und navigieren Sie zu http: // localhost: 8080/swagger/
  6. geben Sie Ihre Swagger-Json-Datei in das Testfeld "Swagger Explore" ein, und die APIs sollten angezeigt werden.

Hoffe, das funktioniert für dich

0
Abhi

Mit Firefox:

  1. Heruntergeladene und entpackte eine Version von Swagger.IO nach C:\Swagger \
  2. Erstellt einen Ordner mit dem Namen Definitions in C:\Swagger\dist
  3. Meine swagger.json-Definitionsdatei dorthin kopiert und
  4. Geben Sie "Definitions/MyDef.swagger.json" in das Feld Explore ein

Achte auf deine Schrägstrich-Richtungen !!

Es scheint, dass Sie in der Ordnerstruktur einen Drilldown ausführen können, aber nicht lästig.

0
SteveCinq

Anstatt swagger ui als Datei zu öffnen, legen Sie es in den Browser File: /// D: /swagger-ui/dist/index.html Sie können: Ein virtuelles Verzeichnis erstellen, das das Durchsuchen von und ermöglicht zeigt auf D:/swagger-ui

  1. Öffnen Sie "mmc", fügen Sie "isis" -Dienste hinzu, und erweitern Sie die Standardwebsite
  2. in mmc im mittleren Fensterbereich doppelklicken Sie auf "Verzeichnis durchsuchen".
  3. in mmc im rechten Fensterbereich auf "aktivieren" klicken
  4. danach im Browser URL einfügen, um lokales Swagger-Ui zu öffnen http: // localhost/swagger-ui/dist/
  5. jetzt können Sie ../my.json verwenden, wenn Sie die Datei in den dist-Ordner kopiert haben, oder Sie können einen separaten Ordner für Samples erstellen, sagen Sie D:/swagger-ui/samples und verwenden Sie ../samples/my.json oder http: //localhost/swagger-ui/samples/my.json
0
Sasha Bond

Eine weitere Option besteht darin, Swagger mit Docker auszuführen. Sie können dieses Docker-Image verwenden:

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

Ich habe dieses Ghetto-kleine BASH-Skript erstellt, um laufende Container zu beenden und neu zu erstellen. Wenn Sie also Ihre Spezifikation ändern und es anzeigen möchten, führen Sie einfach das Skript aus. Stellen Sie sicher, dass Sie den Namen Ihrer Anwendung in die Variable APP_NAME eingeben

#!/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