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>是将在其中呈现Swagger UI的DOM节点。 SwaggerUIBundle构造函数初始化Swagger UI。您可以在此处指定规范网址和other parameters。

如何将swagger ui嵌入网页？

1 个答案: