如何将 Swagger UI 嵌入网页？
Posted
技术标签:
【中文标题】如何将 Swagger UI 嵌入网页？【英文标题】：How to embed Swagger UI into a webpage? 【发布时间】：2018-02-24 12:13:28 【问题描述】：如何将Swagger UI嵌入网页？基本上我想要一个 API 端点测试环境嵌入到我的网页中。
【问题讨论】：
【参考方案1】：答案取决于您是直接编辑纯网页，还是使用 Node.js 或 React 等框架。为简单起见，我假设前者。
下载（或克隆）Swagger UI 存储库。您需要 dist 文件夹中的以下文件：
swagger-ui.css
swagger-ui-bundle.js
swagger-ui-standalone-preset.js
在您网页的<head> 部分，添加：
<link rel="stylesheet" type="text/css" href="swagger-ui.css">
在<body>内，添加：
<div id="swagger-ui"></div>
<script src="swagger-ui-bundle.js"></script>
<script src="swagger-ui-standalone-preset.js"></script>
<script>
window.onload = function()
const ui = SwaggerUIBundle(
url: "https://yourserver.com/path/to/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
]
)
window.ui = ui
</script>
<div id="swagger-ui"></div> 是将在其中呈现 Swagger UI 的 DOM 节点。 SwaggerUIBundle 构造函数初始化 Swagger UI。您可以在此处指定规范 URL 和 other parameters。
【讨论】：
现在一切正常。该网址仅适用于 ..../something.json 类型的网址。我有一个 url 给出了同样的招摇响应，但它不像 /something.json。它不会以 .json 结尾。 嗨，海伦。对于像 Node 这样的框架，答案会是什么？ @Peter 您可以使用 Swagger UI npm 模块 - swagger-ui（具有常规依赖项）或 swagger-ui-dist（无依赖项）。 @Helen 我是为一个基于 ruby 的 slate 客户端做的，我在 layout.erb 中添加了这些东西，但我看到渲染的网站没有任何变化，你能帮忙 @luG_0 请ask a new question 并发布您的代码。以上是关于如何将 Swagger UI 嵌入网页？的主要内容，如果未能解决你的问题，请参考以下文章