如何将 Swagger UI 嵌入到网页中？

Question

如何将Swagger UI嵌入网页？基本上我想要一个 API 端点测试环境嵌入到我的网页中。

Answer 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> 是 DOM 节点，其中将呈现 Swagger UI。 SwaggerUIBundle 构造函数初始化 Swagger UI。这是您指定规格 URL 和 other parameters.

的地方

如何将 Swagger UI 嵌入到网页中？

How to embed Swagger UI into a webpage?

swagger-ui