如何将 Swagger UI 嵌入到网页中? [英] How to embed Swagger UI into a webpage?
问题描述
如何将 Swagger UI 嵌入网页?基本上我想要一个 API 端点测试环境嵌入到我的网页中.
How to embed Swagger UI into a webpage? Basically I want an API endpoint test environment to embed into my webpage.
推荐答案
答案取决于您是直接编辑普通网页，还是使用 Node.js 或 React 等框架.为简单起见，我假设前者.
The answer depends on whether you have a plain web page you edit directly, or use a framework like Node.js or React. For simplicity, I'll assume the former.
下载(或克隆)Swagger UI 存储库.您需要 dist 文件夹中的以下文件:
Download (or clone) the Swagger UI repository. You'll need the following files from the dist folder:
swagger-ui.css
swagger-ui-bundle.js
swagger-ui-standalone-preset.js
在网页的 部分，添加:
In the <head> section of your web page, add:
<link rel="stylesheet" type="text/css" href="swagger-ui.css">
在中，添加:
<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 和 其他参数.
<div id="swagger-ui"></div> is the DOM node inside which Swagger UI will be rendered. The SwaggerUIBundle constructor initializes Swagger UI. This is where you specify your spec URL and other parameters.
这篇关于如何将 Swagger UI 嵌入到网页中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
