首页 文章

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

提问于
浏览 次
45

我正在尝试在我的本地计算机上用swagger-ui打开我自己生成的swagger规范文件 my.json .

所以我downloaded最新的标签v2.1.8-M1并提取了拉链 . 然后我进入子文件夹 dist 并将文件 my.json 复制到其中 . 现在我打开 index.html 并想要探索 my.json . 这里问题就出现了：

File in windows explorer

Enter path to file in bar

Will be prefixed by current url and cannot find the file

如果我输入本地路径，它将始终以包含 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

file swagger swagger-ui swagger-2.0

12 回答

  • 46

    我无法得到Adam Taras的工作答案（即使用相对路径 ../my.json ） .

    这是我的解决方案（如果安装了节点，则非常快速且无痛）：

    • 使用Node，全局安装包http-server npm install -g http-server

    • 将目录更改为my.json所在的位置，并运行命令 http-server --cors （必须启用CORS才能使此工作）

    • 开放swagger ui（即dist / index.html）

    • 在输入字段中输入 http://localhost:8080/my.json ，然后单击"Explore"

    回复于
  • 0

    使用spec parameter .

    说明如下 .

    创建包含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, 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"
    },
    ...
    }
}

    修改Swagger UI index.html

    这是一个像Ciara一样的两步 .

    包括spec.js

    修改/dist/index.html文件以包含外部 spec.js 文件 .

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

    例：

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

    添加规范参数

    修改SwaggerUi实例以包含 spec 参数：

    window.swaggerUi = new SwaggerUi({
    url: url,
    spec: spec,
    dom_id: "swagger-ui-container",
    回复于
  • 1

    经过一番努力，我找到了更好的解决方案 .

    • 创建一个名称为：swagger的目录
    mkdir C:\swagger

    如果您使用的是Linux，请尝试：

    mkdir /opt/swagger
    • 使用以下命令获取swagger-editor：
    git clone https://github.com/swagger-api/swagger-editor.git
    • 进入现在创建的swagger-editor目录
    cd swagger-editor
    • 现在使用以下命令获得swagger-ui：
    git clone https://github.com/swagger-api/swagger-ui.git
    • 现在，复制你的swagger文件，我复制到下面的路径：
    ./swagger-editor/api/swagger/swagger.json
    • 完成所有设置，使用以下命令运行swagger-edit
    npm install
npm run build
npm start
    • 系统将提示您输入2个网址，其中一个网址可能如下所示：
    http://127.0.0.1:3001/

    上面是swagger-editor URL

    • 现在浏览到：
    http://127.0.0.1:3001/swagger-ui/dist/

    上面是swagger-ui URL

    就这样 .

    您现在可以从swagger-ui或swagger-editor中浏览文件

    安装/构建需要一些时间，但一旦完成，您将看到很好的结果 .

    我花了大约2天的时间进行斗争，一次性安装只花了大约5分钟 .

    现在，在右上角，您可以浏览到本地文件 .

    祝你好运 .

    回复于
  • 0

    什么有效，是输入相对路径或绝对没有 file:// -protocol：

    • ../my.json 导致 file:///D:/swagger-ui/dist/index.html/../my.json 并且有效

    • /D:/swagger-ui/dist/my.json 导致 file:///D:/swagger-ui/dist/my.json 并且有效

    HINT

    这个答案适用于Win7上的Firefox . 对于Chrome浏览器，请参阅以下评论：

    回复于
  • 1

    我有这个问题，这里有一个更简单的解决方案：

    • 在公共目录中创建一个目录（例如：swagger-ui）（静态路径：不需要路由）并将dist从swagger-ui复制到该目录并打开 localhost/swagger-ui

    • 您将看到带有默认petstore示例的swagger-ui

    • 用您的 localhost/api-docs 替换dist / index.html中的默认petstore网址，或者使其更通用化，替换为：

    location.protocol '//' location.hostname（location.port？':' location.port：''）"/api-docs";

    • 再次点击 localhost/swagger-ui

    瞧！你本地的swagger实现已经准备就绪

    回复于
  • 3

    我的环境，
    Firefox 45.9，Windows 7
    swagger-ui ie 3.x

    我做了解压缩，而且这个petstore在Firefox标签中出现了 . 然后我打开了一个新的Firefox选项卡，然后转到文件>打开文件并打开我的swagger.json文件 . 该文件清晰，即作为文件 .

    然后我从Firefox复制了“文件位置”（即URL位置，例如：file：/// D：/My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json） .

    然后我回到了swagger UI选项卡并将文件位置文本粘贴到swagger UI探索窗口中，我的招摇就变得干净了 .

    希望这可以帮助 .

    回复于
  • 1

    LINUX

    尝试路径和spec参数时，我总是遇到问题 .

    因此，我选择了将要更新的在线解决方案自动在Swagger上使用JSON而无需重新导入 .

    如果使用npm启动swagger编辑器，则应添加json文件的符号链接 .

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

    您可能会遇到缓存问题 . 解决这个问题的快捷方法是在我的网址末尾添加一个令牌...

    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

    在包含要查看的文件 ./docs/specs/openapi.yml 的本地目录中，可以运行以下命令来启动容器并访问 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
    回复于
  • 14

    而不是打开swagger ui作为文件 - 你放入浏览器文件：/// D：/swagger-ui/dist/index.html你可以：创建iis虚拟目录，它可以浏览并指向D：/ swagger-ui

    • 打开mmc，添加iis服务，展开默认网站添加虚拟目录，添加别名：swagger-ui，物理路径:(你的路径......）D：/ swagger-ui

    • 在mmc中间窗格中双击"directory browsing"
      右窗格中的mmc

    • 单击"enable"

    • 之后在浏览器中输入url打开你的本地swagger-ui http://localhost/swagger-ui/dist/

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

    回复于
  • 0

    这就是我使用本地swagger JSON的方式

    • 让tomcat在本地机器上运行

    • 下载Swagger UI应用程序并将其解压缩到tomcat的/ webapps / swagger文件夹中

    • 删除tomcat中的本地swagger json文件/ webapps / swagger文件夹

    • 启动tomcat（/ bin / sh startup.sh）

    • 打开浏览器并导航至http://localhost:8080/swagger/

    • 在Swagger Explore测试框中键入您的swagger json文件，这应该呈现API .

    希望这对你有用

    回复于
  • 0

    另一个选择是使用docker运行swagger，你可以使用这个docker镜像：

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

    我制作了这个贫民窟的小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"
    回复于
  • 7

    使用Firefox，我：

    • Downloaded并将一个版本的Swagger.IO解压缩到C：\ Swagger \

    • 在C：\ Swagger \ dist中创建了名为Definitions的文件夹

    • 在那里复制了我的 swagger.json 定义文件，并且

    • 在“浏览”框中输入"Definitions/MyDef.swagger.json"

    小心你的斜线指示!!

    看起来你可以在文件夹结构中向下钻取，但不要兴奋 .

    回复于

相关问题