Как встроить Swagger ui на веб-страницу?

Как встроить swagger-ui на веб-страницу. В основном я хочу, чтобы среда тестирования конечной точки API была встроена в мою веб-страницу.

8
api swagger swagger-ui

1 ответов

ответ зависит от того, есть ли у вас простая веб-страница, которую вы редактируете напрямую, или используете фреймворк, такой как Node.js или реагировать. Для простоты предположу первое.

скачать (или клонировать)Swagger UI репозитория. Вам понадобятся следующие файлы из :

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 будет отображаться. The SwaggerUIBundle конструктор инициализирует Swagger UI. Здесь вы указываете свой URL спецификации и другие параметры.

10