将Swagger规范JSON转换为HTML文档

Sal*_*lil 73 yaml swagger swagger-php

对于用PHP编写一些REST API的,我被要求创建扬鞭的文件,因为我不知道的添加注解这些现有的API和创建这样的文件没有简单的方法,我用这个编辑器生成一些现在.

我保存了使用该编辑器创建的JSON和YAML文件,现在我需要创建最终的交互式Swagger文档(这个声明可能听起来很幼稚和模糊).

有人可以告诉我如何将Swagger JSON规范文件转换为实际的Swagger文档吗?

我在Windows平台上,对Ant/Maven一无所知.

Nil*_*ier 39

swagger-codegen当我正在寻找一个工具来做这件事时,我不满意,所以我写了自己的.看看bootprint-swagger

swagger-codegen与之相比的主要目标是提供简单的设置(尽管您需要nodejs).并且应该很容易根据自己的需要调整样式和模板,这是bootprint -project 的核心功能

  • 我是作者,文字说:"我很遗憾地说,我不能在不久的将来为这个项目开发新的功能.但是:我可能会讨论并合并拉取请求,并发布新版本." 你可以称之为被遗弃,我称之为"搁置".我还会邀请任何有兴趣参与该项目的人. (17认同)
  • 警告:截至2016年11月,bootprint-swagger的作者显然已放弃该项目.swagger-codegen仍然得到很好的支持. (7认同)

Vik*_*ngh 33

尝试使用redoc-cli.

我用的是引导记录,OpenAPI的由我产生了一堆的文件(bundle.js,bundle.js.map,index.html,main.cssmain.css.map),然后你可以将其转换成一个单一的.html使用文件的HTML在线生成一个简单的index.html文件.

然后我发现redoc-cli非常容易使用,输出真的很棒2,一个漂亮的index.html文件.

安装:

npm install -g redoc-cli
Run Code Online (Sandbox Code Playgroud)

用法:

redoc-cli bundle -o index.html swagger.json
Run Code Online (Sandbox Code Playgroud)

  • 这个工具真正是所有提到的工具中最美丽的输出. (6认同)
  • 小更新:“redoc-cli”现在希望您使用“build”选项而不是“bundle”。 (4认同)
  • 使用直接可执行文件名称并不总是有效,通过“npx redoc-cli ...”执行更可靠。 (3认同)
  • 尝试过这个,它告诉我它已被弃用,并使用 https://www.npmjs.com/package/@redocly/cli 代替。 (3认同)

TLJ*_*TLJ 18

看看漂亮的赃物

它有

  1. 类似于Swagger-Editor的右侧面板
  2. 搜索/过滤
  3. 架构折叠
  4. 实时反馈
  5. 输出为单个html文件

我看着Swagger编辑器,并认为它可以导出预览窗格但事实证明它不能.所以我写了我自己的版本.

完全披露:我是该工具的作者.

  • 刚刚为您推出了“ allOf”功能。看看这个。 (3认同)
  • 似乎不支持 Swagger/OpenAPI V3 (2认同)

djb*_*djb 13

参见GitHub上的swagger-api/swagger-codegen项目; 项目README展示了如何使用它来生成静态HTML.请参阅生成静态html api文档.

如果要查看swagger.json,可以安装Swagger UI并运行它.您只需将其部署在Web服务器(从GitHub克隆repo后的dist文件夹)并在浏览器中查看Swagger UI.这是一个JavaScript应用程序.


ose*_*kar 11

一切都太困难或记录不好,所以我用一个简单的脚本swagger-yaml-to-html.py来解决这个问题,这样就像这样工作

python swagger-yaml-to-html.py < /path/to/api.yaml > doc.html
Run Code Online (Sandbox Code Playgroud)

这适用于YAML,但修改它以使用JSON也是微不足道的.


Kri*_*all 11

我花了很多时间尝试了很多不同的解决方案 - 最后我这样做了:

<html>
    <head>    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@3.17.0/swagger-ui.css">
        <script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
        <script>

            function render() {
                var ui = SwaggerUIBundle({
                    url:  `path/to/my/swagger.yaml`,
                    dom_id: '#swagger-ui',
                    presets: [
                        SwaggerUIBundle.presets.apis,
                        SwaggerUIBundle.SwaggerUIStandalonePreset
                    ]
                });
            }

        </script>
    </head>

    <body onload="render()">
        <div id="swagger-ui"></div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

您只需要从同一位置提供path/to/my/swagger.yaml.
(或使用CORS标头)


use*_*596 6

你也可以从https://github.com/swagger-api/swagger-ui下载swagger ui ,拿到dist文件夹,修改index.html:更改构造函数

const ui = SwaggerUIBundle({
    url: ...,
Run Code Online (Sandbox Code Playgroud)

const ui = SwaggerUIBundle({
    spec: YOUR_JSON,
Run Code Online (Sandbox Code Playgroud)

现在,dist文件夹包含您需要的所有内容,并且可以按原样分发


Kum*_*r S 6

对于 Swagger API 3.0,从在线 Swagger 编辑器生成 Html2 客户端代码对我来说非常有用!