File 如何在Swagger UI中打开本地文件

我正试图在本地计算机上打开我自己生成的swagger规范文件

my.json

因此，我使用了最新的标签v2.1.8-M1并提取了zip。然后我进入子文件夹

dist

并将文件

my.json

复制到其中。现在我打开了

index.html

，想探索

my.json

。问题从这里开始：

如果我输入一个本地路径，它总是以包含

index.html

的当前url作为前缀。因此我无法打开我的文件。我尝试了以下所有组合，但没有成功：

• 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

---

有效的方法是输入相对路径或绝对路径，而不使用

文件：//

-协议：

• 。/my.json

  导致

  file:///D:/swagger-ui/dist/index.html/./my.json

  和works

• /D:/swagger ui/dist/my.json

  导致

  file:///D:/swagger-ui/dist/my.json

  和

提示

---

这个答案适用于Win7上的Firefox。对于Chrome浏览器，请参见下面的注释：

而不是将swagger ui作为文件打开-您可以将其放入浏览器中 file:///D:/swagger-ui/dist/index.html 你可以： 创建iis虚拟目录，允许浏览并指向D:/swagger用户界面

打开mmc，添加iis服务，展开默认网站添加虚拟 目录，放置别名：swagger ui，物理路径：（您的路径…）D:/swagger ui

中间窗格中的MMC双击“目录浏览”

在右侧窗格的mmc中，单击“启用”

之后，在浏览器中放入url以打开您的本地招摇过市用户界面

现在，如果您将文件复制到dist文件夹中，您可以使用../my.json，或者您可以为示例创建单独的文件夹，例如D:/swagger ui/samples并使用../samples/my.json或

---

我无法得到Adam Taras的答案（即使用相对路径

。/my.json

）

这是我的解决方案（如果您安装了node，则非常快速且轻松）：

• 使用Node，全局安装包http服务器

  npm安装-g http服务器
  

• 将目录更改为my.json所在的位置，并运行命令

  httpserver--cors

  （必须启用cors才能工作）
• 打开大摇大摆的用户界面（即dist/index.html）
• 类型<代码>http://localhost:8080/my.json在输入字段中单击“浏览”

---

我有这个问题，这里有一个更简单的解决方案：
• 在公共目录（静态路径：无路由）中创建目录（例如：招摇过市ui） ，并将dist从swagger ui复制到该目录中 打开localhost/swagger用户界面
• 您将看到带有默认petstore示例的swagger ui
• 将dist/index.html中的默认petstore url替换为您的localhost/api文档，或者为了使其更通用，替换为以下内容：
  location.protocol+'/'+location.hostname+（location.port？：“+location.port:”）+“/api文档”

• 再次点击本地主机/招摇过市界面

瞧！您的本地招摇过市实施已准备就绪
请使用
说明如下
创建包含Swagger JSON的spec.js文件 在index.html（/dist/）所在的目录中创建新的javascript文件
然后插入

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

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

修改Swagger UI index.html 这是一个像Ciara一样的两步法
包括spec.js 修改/dist/index.html文件以包含外部

spec.js

文件

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

---

这就是我如何使用本地swagger JSON的
• 让tomcat在本地机器上运行
• 下载Swagger UI应用程序并将其解压缩到tomcat的/webapps/Swagger文件夹中
• 将本地swagger json文件放入tomcat的/webapps/swagger文件夹中
• 启动tomcat（/bin/sh startup.sh）
• 打开浏览器并导航到
• 在swagger Explore测试框中键入您的swagger json文件，这将呈现API

---

希望这对您有用
另一个选项是使用docker运行swagger，您可以使用此docker图像：
我制作了这个犹太区小BASH脚本来杀死正在运行的容器并进行重建，所以基本上每次您对规范进行更改并希望看到它时，只需运行脚本。确保将应用程序的名称放入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"

我的环境，
Firefox45.9， Windows 7
大摇大摆的用户界面ie 3.x
我做了解压，petstore在Firefox标签中显示良好。 然后我打开了一个新的Firefox标签，进入文件>打开文件，打开了我的swagger.json文件。这档案一清二楚
然后我从Firefox复制了“文件位置”（即URL位置，例如：file:///D:/My%20Applications/Swagger/swagger-ui master/dist/myswager.json）
然后，我返回到swagger UI选项卡，将文件位置文本粘贴到swagger UI explore窗口中，我的swagger完全显示出来
希望这有帮助
LINUX
我在尝试路径和spec参数时总是遇到问题
因此，我选择了在线解决方案，该解决方案将在Swagger上自动更新JSON，而无需重新导入
如果使用npm启动swagger编辑器，则应添加json文件的符号链接

cd/path/to/your/swaggerui

其中

index.html

是

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
}

---

经过一番挣扎之后，我

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
}

mkdir C:\swagger

    mkdir /opt/swagger

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

cd swagger-editor

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

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

npm install
npm run build
npm start

http://127.0.0.1:3001/

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

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

open-swagger-ui ./swagger.json --open