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.