首页 文章

如何在swagger-ui文档中使用本地json文件

提问于
浏览 次
2

我试图使用本地swagger.json文件显示在swagger文档中 .

我的swagger.json文件位于/home/user1/swagger-ui/dist/swagger.json下，index.html位于同一目录下 . 我修改了index.html，如下所示 .

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

使用 docker run -p 80:8080 swagger-ui-builder 启动docker实例后，访问http://192.168.xx.xx/不会显示文档 . 附上屏幕截图以供参考 . 请帮我解决这个问题 .
enter image description here

swagger swagger-ui swagger-2.0

3 回答

  • 2

    问题中提供的示例根本无法工作（缺少昏迷， spec 不是SwaggerUI属性） .

    要显示与 index.html 在同一文件夹中的 swagger.json 文件，您只需要在 index.html 中将 url = "http://petstore.swagger.io/v2/swagger.json" 替换为 url = "swagger.json"; .

    原始index.html

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

      [...]

      window.swaggerUi = new SwaggerUi({
        url: url,
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function(swaggerApi, swaggerUi){
          if(typeof initOAuth == "function") {
            initOAuth({
              clientId: "your-client-id",
              clientSecret: "your-client-secret-if-required",
              realm: "your-realms",
              appName: "your-app-name",
              scopeSeparator: ",",
              additionalQueryStringParams: {}
            });
          }

    改性：

    var url = window.location.search.match(/url=([^&]+)/);
      if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "swagger.json";
      }

      [...]

      window.swaggerUi = new SwaggerUi({
        url: url,
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function(swaggerApi, swaggerUi){
          if(typeof initOAuth == "function") {
            initOAuth({
              clientId: "your-client-id",
              clientSecret: "your-client-secret-if-required",
              realm: "your-realms",
              appName: "your-app-name",
              scopeSeparator: ",",
              additionalQueryStringParams: {}
            });
          }
    回复于
  • 1

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

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

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

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

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

    回复于
  • 3

    我有几个Swagger文件，并希望在它们之间轻松切换 . 所以我更改了index.html以获取第一个URL参数并打开swagger-ui .

    我有不同文件的书签：

    index.html的？文件1

    index.html的？文件2

    等等..

    <script>
window.onload = function() {

  var url = window.location.search.substring(1);

  if (url.length == 0) {
  url = "swagger.json";
  }

  // Build a system
  const ui = SwaggerUIBundle({
    url: url,
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
     SwaggerUIBundle.presets.apis,
     SwaggerUIStandalonePreset
    ],
    plugins: [
     SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
 })
window.ui = ui
}
</script>
    回复于

相关问题