Swagger 漂亮的 HTML 代码在哪里?

2024-02-01

只有uglyHTML 页面可下载(HTML、HTML2 和动态都丑陋),但该网站,例如。已编辑https://app.swaggerhub.com/apis/{user}/{project}/{version}(以及许多其他!)提供漂亮的 HTML 界面...如何下载这个漂亮的 HTML?

完整且自主的 HTML 代码(文件或文件压缩包)。

我有一个良好且有效的swagger.yaml or swagger.json我的 API 的文件,因此另一个解决方案是使用我的 API 描述文件运行开源(即插即用!)工具。


漂亮的:

丑陋的:


您的屏幕截图上的“漂亮的界面”是招摇的用户界面 https://github.com/swagger-api/swagger-ui。它是免费且开源的。有一个演示在http://petstore.swagger.io http://petstore.swagger.io,您可以在其中从 URL 加载您自己的 YAML/JSON 文件并查看它们的呈现方式。

要在本地使用 Swagger UI:

  1. Go to https://github.com/swagger-api/swagger-ui https://github.com/swagger-api/swagger-ui并将存储库下载为 ZIP:

  2. 编辑dist\index.html文件并更改行

    url: "http://petstore.swagger.io/v2/swagger.json",
    

    到 Swagger .json 或 .yaml 文件的 URL,例如

    url: "http://api.mysite.com/swagger.json",
    
  3. (可选)添加/更改其他配置参数 https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md in the SwaggerUIBundle初始化代码在dist\index.html.

  4. 打开dist\index.html在浏览器中打开文件以预览 API 文档。

    Note:如果规范未加载或“尝试一下”不起作用,您可能需要在服务器上启用 CORS。看https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/cors.md https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/cors.md and https://enable-cors.org https://enable-cors.org.

  5. 从以下位置上传文件dist文件夹到您服务器的某处 - 现在您也有了漂亮的 API 文档!


或者,招摇中心 https://swaggerhub.com(您提到的)为 Swagger 规范提供云托管等,并集成了 Swagger UI。您可以在那里导入 Swagger .json/.yaml 文件,并将 API 文档托管在 SwaggerHub 上。 A免费计划 https://swagger.io/tools/swaggerhub/pricing/可用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Swagger 漂亮的 HTML 代码在哪里? 的相关文章

随机推荐