将Swagger规范JSON转换为HTML文档


88

对于一些用PHP编写的REST API,我被要求创建Swagger文档,由于我不知道向这些现有API添加注释并创建此类文档的任何简便方法,因此我现在使用此编辑器生成了一些文档。

我保存了使用该编辑器创建的JSON和YAML文件,现在我需要创建最终的交互式Swagger文档(此语句听起来可能很幼稚又含糊)。

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

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


我尝试过[ github.com/wordnik/swagger-ui](Swagger UI),但是它没有呈现我的json。显示的唯一警告是“此API使用的是不推荐使用的Swagger版本!请参阅github.com/wordnik/swagger-core/wiki了解更多信息”。
Salil 2014年

Answers:


43

swagger-codegen当我正在寻找一种工具来执行此操作时,我不满意,因此我编写了自己的工具。看看bootprint-swagger

相比之下,主要目标swagger-codegen是提供一个简单的设置(尽管您需要nodejs)。而且应该容易地调整样式和模板以满足自己的需求,这是bootprint -project的核心功能


9
警告:截至11/2016,bootprint-swagger的作者显然已放弃了该项目。swagger-codegen仍然得到很好的支持。
布伦特·马泽尔

22
我是作者,文字说:“很抱歉,我将在不久的将来无法为该项目开发新功能。但是:我很可能能够讨论和合并拉式请求,并发布新版本。” 您可能会称其为废弃,我称之为“保留”。我还将邀请对这个项目有兴趣的任何人。
Nils Knappmeier

1
发现可以spectacle
庞大的

经过大量的努力,我发现此工具非常有用:api-html
Asfandiyar Khan

57

尝试使用redoc-cli

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

然后,我发现redoc-cli非常易于使用,并且输出确实是2个很棒的,一个漂亮的index.html文件。

安装

npm install -g redoc-cli

用法

redoc-cli bundle -o index.html swagger.json

8
该工具实际上是上述所有工具中最漂亮的输出。
雅各布·莫拉维克

1
这是迄今为止最好的imo,并且由于我们是为使用台式机的开发人员构建的,因此输出大小不是问题。
milosmns

3
使用直接的可执行文件名称并不总是可行的,执行方式npx redoc-cli ...更可靠。
蹲着的小猫

2
非常漂亮的输出。感谢您的建议。
萨希尔·Ja那

1
这是一个很棒的工具!非常感谢Vikas的精彩建议!绝对比bootstrap-openapi更好,更少笨拙!
Chaturvedi Saurabh

19

查看漂亮的赃物

它有

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

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

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


1
我发现漂亮的赃物是一个简单而理想的工具,带有适当的CLI和API入口点。我唯一的抱怨(也是迫使我应对swagger-ui的复杂性的抱怨)是它未能正确处理对象的组成/扩展。allOf在文档中的任何使用都会产生undefined,即使在最简单的情况下(“合并”单个对象,也就是根本不使用allOf)。
HonoredMule17年

3
刚刚allOf为您推出了功能。一探究竟。
TLJ

2
似乎不支持Swagger / OpenAPI V3
SeinopSys

18

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

python swagger-yaml-to-html.py < /path/to/api.yaml > doc.html

这是针对YAML的,但对其进行修改以与JSON配合使用也是微不足道的。


这是纯金!
zemirco

16

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

如果要查看swagger.json,可以安装Swagger UI并运行它。您只需将其部署在Web服务器上(从GitHub复制存储库后的dist文件夹),然后在浏览器中查看Swagger UI。这是一个JavaScript应用。


谢谢。我的问题是swagger-ui不接受2.0规范。但是,这看起来是最简单的答案,因此(暂时),我将接受。
Salil 2015年

Swagger工具仍在发展为2.0。但是,我发现Swagger UI确实适用于以“ swagger”开头的2.0文件:“ 2.0”,
djb

另外,从Swagger编辑器中,您可以导出JSON规范(不是作为YAML,而是作为JSON),并且Swagger UI应该能够读取它。(注意:swagger.json必须与Swagger UI应用程序位于同一主机/端口上,否则您必须启用CORS;请参阅GitHub上Swagger编辑器中的README.md
djb

14

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

<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>

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


太好了,谢谢!我已经使用<link rel =“ stylesheet” href =“ petstore.swagger.io/swagger-ui.css ”> <script src =“ petstore.swagger.io/swagger-ui-bundle.js "></script >
Erando

1
我发现这是最好的解决方案,没有任何安装!
KurioZ19年

非常有帮助。您节省了很多时间。
kalpesh khule

7

您也可以从以下网址下载swagger ui:https : //github.com/swagger-api/swagger-ui,使用dist文件夹,修改index.html:更改构造函数

const ui = SwaggerUIBundle({
    url: ...,

进入

const ui = SwaggerUIBundle({
    spec: YOUR_JSON,

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


2

看一下这个链接:http: //zircote.com/swagger-php/installation.html

  1. 下载phar文件https://github.com/zircote/swagger-php/blob/master/swagger.phar
  2. 安装作曲家 https://getcomposer.org/download/
  3. 制作composer.json
  4. 克隆swagger-php / library
  5. 克隆swagger-ui / library
  6. 为API制作资源和模型php类
  7. 执行PHP文件以生成json
  8. 在api-doc.json中提供json的路径
  9. 在swagger-ui dist文件夹中的index.php中提供api-doc.json的路径

如果您需要其他帮助,请随时询问。


1
是否有可以为我生成此内容的在线编辑器(除swagger-editor外)?如果有更简单的方法,我不想注释我的PHP API。我发现的问题是,swagger-editor会生成swagger spec v2.0,而swagger-ui到目前为止还无法处理该问题。
Salil 2014年

@Salil我所知道的是swagger提供了它自己的在线编辑器,即editor.swagger.wordnik.com,我不知道其他任何在线编辑器,如果您发现与我们共享的任何内容,谢谢:)
Syed Raza Mehdi

2

有一个小的Java程序,可以从yaml文件生成文档(adoc或md)。

Swagger2MarkupConfig config = new Swagger2MarkupConfigBuilder()
        .withMarkupLanguage(MarkupLanguage.ASCIIDOC)
        .withSwaggerMarkupLanguage(MarkupLanguage.ASCIIDOC)
        .withOutputLanguage(Language.DE)
        .build();

Swagger2MarkupConverter builder = Swagger2MarkupConverter.from(yamlFileAsString).withConfig(config).build();
return builder.toFileWithoutExtension(outFile);

不幸的是,它仅支持OpenAPI 2.0,但不支持OpenAPI 3.0


2

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.