Как вставлять swagger-ui на веб-страницу. В принципе, я хочу, чтобы тестовая среда API-интерфейса была встроена в мою веб-страницу.
Как вставлять swagger ui на веб-страницу?
Ответ 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>
- это узел DOM, внутри которого будет отображаться пользовательский интерфейс Swagger. Конструктор SwaggerUIBundle
инициализирует интерфейс Swagger. Здесь вы указываете свой URL спецификации и другие параметры.