ウェブページにswagger UIを埋め込む方法は？

ウェブページにswagger-uiを埋め込む方法基本的には私のWebページに埋め込むAPIエンドポイントテスト環境が必要です。ウェブページにswagger UIを埋め込む方法は？

2017-09-15 Akalanka Hewawasam

答えは、直接編集する単純なWebページを持っているか、Node.jsやReactのようなフレームワークを使用しているかによって異なります。簡単にするために、私は前者を仮定します。

Swagger UIリポジトリをダウンロード（または複製）します。追加し、ウェブページの<head>セクションで

swagger-ui.css 
swagger-ui-bundle.js 
swagger-ui-standalone-preset.js

：あなたはdistフォルダから以下のファイルが必要になります

<body>インサイド

<link rel="stylesheet" type="text/css" href="swagger-ui.css">

、追加：

<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

ありがとうございました。 –

すべてがうまくいきました。 urlは..../something.jsonの種類のURLでのみ動作します。私はURLを持って同じ派遣応答を与えるが、それは/ something.jsonのようなものではありません。それは.jsonとして終わらない。 –

ウェブページにswagger UIを埋め込む方法は？

答えて

関連する問題