问题
How to embed swagger-ui to a webpage. Basically I want a API endpoint test environment to embed into my webpage.
回答1:
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.
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">
Inside the <body>, add:
<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> 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.
来源：https://stackoverflow.com/questions/46237255/how-to-embed-swagger-ui-to-a-webpage