如何將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嵌入網頁？

回答

相關問題