拥有多项服务的 Swagger UI
Swagger UI with multiple services
有没有办法 "aggregate"(或至少 link)多个 Swagger API 显示在单个 UI 上?
假设我有两个服务,Foo 和 Bar,我想做的是创建第三个服务 Baz,为 Foo 和 Bar 提供元数据。 Foo、Bar 和 Baz 将在不同的主机上,这就是我不确定这是否可行的原因。
一个解决方案是使用服务发现的想法(在这种情况下可能不是正确的术语)并让 Baz 在执行 GET 时为 Foo 和 Bar 提供 links。
GET / HTTP/1.1
Host: baz
Accept: application/json
...
HTTP/1.1 200 OK
Content-Type: application/json
...
{
"services": [
{
"name": "foo",
"link": "http://foo"
},
{
"name": "bar",
"link": "http://bar"
}
]
}
这就是我通常的处理方式,但我想知道是否有办法让 Baz 上的 Swagger UI 显示 Foo 和 Bar 的 UI。
我最后做的是在 index.html
文件中用下拉列表替换页面顶部的文本框,其中包含指向托管 swagger.json
文件的各种服务器的链接。
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.io">swagger</a>
<form id='api_selector'>
<!-- Start of my changes -->
<div class='input'>
<select placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text">
<option value="http://foo/swagger.json">Foo</option>
<option value="http://bar/swagger.json">Bar</option>
</select>
</div>
<!-- End of my changes -->
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
<div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>
</form>
</div>
</div>
可以编写一个 JavaScript 脚本来与您的 Eureka 实例(或类似的东西)对话,以获得每个服务的 url,并且下拉列表可以自动更新。我不是 JavaScript 或 HTML 专家,所以我不知道该怎么做,但我提到它是因为它有可能。这会更有用,这样您就不需要在每次添加新服务时都更新此文件。
有没有办法 "aggregate"(或至少 link)多个 Swagger API 显示在单个 UI 上?
假设我有两个服务,Foo 和 Bar,我想做的是创建第三个服务 Baz,为 Foo 和 Bar 提供元数据。 Foo、Bar 和 Baz 将在不同的主机上,这就是我不确定这是否可行的原因。
一个解决方案是使用服务发现的想法(在这种情况下可能不是正确的术语)并让 Baz 在执行 GET 时为 Foo 和 Bar 提供 links。
GET / HTTP/1.1
Host: baz
Accept: application/json
...
HTTP/1.1 200 OK
Content-Type: application/json
...
{
"services": [
{
"name": "foo",
"link": "http://foo"
},
{
"name": "bar",
"link": "http://bar"
}
]
}
这就是我通常的处理方式,但我想知道是否有办法让 Baz 上的 Swagger UI 显示 Foo 和 Bar 的 UI。
我最后做的是在 index.html
文件中用下拉列表替换页面顶部的文本框,其中包含指向托管 swagger.json
文件的各种服务器的链接。
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.io">swagger</a>
<form id='api_selector'>
<!-- Start of my changes -->
<div class='input'>
<select placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text">
<option value="http://foo/swagger.json">Foo</option>
<option value="http://bar/swagger.json">Bar</option>
</select>
</div>
<!-- End of my changes -->
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
<div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>
</form>
</div>
</div>
可以编写一个 JavaScript 脚本来与您的 Eureka 实例(或类似的东西)对话,以获得每个服务的 url,并且下拉列表可以自动更新。我不是 JavaScript 或 HTML 专家,所以我不知道该怎么做,但我提到它是因为它有可能。这会更有用,这样您就不需要在每次添加新服务时都更新此文件。