发表新帖
发表新帖

How to embed Swagger UI into a webpage?

前端 未结
关注
1 1553
星月不相逢
星月不相逢 2020-12-05 07:24

How to embed Swagger UI into a webpage? Basically I want an API endpoint test environment to embed into my webpage.

相关标签:
1条回答
  • 攒了一身酷
    2020-12-05 08:10

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题