具有多种服务的 Swagger UI答案

【问题标题】：Swagger UI with multiple services具有多种服务的 Swagger UI
【发布时间】：2016-01-19 23:18:47
【问题描述】：

有没有办法“聚合”（或至少链接到）多个 Swagger API 以显示在单个 UI 上？

假设我有两个服务，Foo 和 Bar，我想做的是创建第三个服务 Baz，它为 Foo 和 Bar 提供元数据。 Foo、Bar 和 Baz 将位于不同的主机上，这就是为什么我不确定这是否可行。

一种解决方案是使用服务发现的概念（在这种情况下可能不是正确的术语），并在执行 GET 时让 Baz 提供指向 Foo 和 Bar 的链接。

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。

【问题讨论】：

标签： rest swagger swagger-ui

【解决方案1】：

我最终在 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 专家，所以我不知道该怎么做，但我提到它是因为它是一种可能性。这会更有用，因此您无需在每次添加新服务时都更新此文件。

【讨论】：