公司最近在做微服務拆分，將一個專案拆分成多個小的服務，拆分之後，專案多了，不同的專案的api也隨之增多，各個獨立，很難管理。同時前端同學開發的時候，要不停的找專案api地址，很不方便。我們專案api的介面管理用的是swagger,於是有了一個想法，swagger可不可以支援多專案呢。看了一下頁面結構，他有一個api-docs地址的輸入框，可以輸入地址，再點瀏覽，就可以檢視對應地址的api。那麼其實我只要在輸入框前面加一個下拉框，裡面有對應的服務的名稱及地址，當我選擇不同的服務時，輸入框內會被填充成對應的服務的api地址，即可實現我們的目標。

首先我們要下載swagger-ui的原始碼，這裡下載的是2.2.10的版本，因為我們專案使用的是srpingfox2.6.1,還有一個重要的原因是swagger3.x是用react實現的，我不會（感嘆年逝去，已經落後了），下載地址是https://github.com/swagger-api/swagger-ui/tree/v2.2.10，專案是用nodejs來編譯的，所以要先配好nodejs的環境。

程式碼下載後，開始改造程式碼，其實改動很簡單，我們首先要有一個地方存服務名及地址的一些資訊，因為服務的名稱還有地址不會改動太大，所以想到直接放在json裡，於是要在html目錄下新建一個urlData.json的檔案用於儲存相關資料。

urlData.json

[{"id":"test1","name":"測試1","url":"http://api.beta.test.com/api/test1/v2/api-docs"},
  {"id":"test2", "name":"測試2","url":"http://api.beta.test.com/api/test2/v2/api-docs"}]

$(document).ready(function(){
        $.ajax({
                   type: "get",
                   url: "urlData.json",
                   success: function (resp) {
                       urls = resp;
                       $.each(resp, function (index, item) {
                           $("#apiSelect").append("<option value='" + item.id + "'>" + item.name + "</option>");
                       });
                   }
               });
    });
    function urlChange() {
        var selectVal = $("#apiSelect").val();
        $.each(urls,function (index,item) {
            if(selectVal==urls[index].id){
                $("#input_baseUrl").val(urls[index].url);
            }
        })
    }
 

<div id='header'>
  <div class="swagger-ui-wrap">
    <a id="logo" href="http://swagger.io"><img class="logo__img" alt="swagger" height="30" width="30" src="images/logo_small.png" /><span class="logo__title">swagger</span></a>
    <select id="apiSelect" onchange="urlChange()">
      <option>請選擇api地址</option>
    </select>
    <form id='api_selector'>
      <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
      <div id='auth_container'></div>
      <div class='input'><a id="explore" class="header__btn" href="#" data-sw-translate>Explore</a></div>
    </form>
  </div>
</div>

<div id="message-bar" class="swagger-ui-wrap" data-sw-translate> </div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
 

我們的專案是通過二級路徑來區分不同的專案的，即http://api.beta.test.com/api/test1/v2,此結構還需要對專案api-docs的地址進行一下處理，經過google，發現springfox預留了一個地址變數，加上即可替換預設的/v2/api-docs的地址。如果用不同的域名來解析，就要解決跨域問題。

在application.yml裡配置如下變數，springfox.documentation.swagger.v2.path  然後需要在SwaggerConfigure.java裡面注入這個變數，雖然只注入不使用，個人理解可能是因為spring的懶載入造成的，用的時候才載入，不用不載入。

最終效果

專案下載地址：http://download.csdn.net/download/liufei198613/10173448