如何将swagger ui嵌入网页？

如何将swagger-ui嵌入到网页中。基本上我想要一个API端点测试环境嵌入到我的网页中。如何将swagger ui嵌入网页？

2017-09-15 Akalanka Hewawasam

答案取决于您是否有直接编辑的普通网页，或者使用像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>是Swagger UI将在其中呈现的DOM节点。 SwaggerUIBundle构造函数初始化Swagger UI。这是您指定您的规格URL和other parameters的地方。

来源

2017-09-15 11:36:37 Helen

非常感谢！ –

现在一切正常。该网址只适用于..../something.json类型的网址。我有一个网址给出同样的招摇响应，但它不是像/something.json。它不会以.json结尾。 –

如何将swagger ui嵌入网页？

回答

相关问题