swagger实现多项目api管理

公司最近在做微服务拆分，将一个项目拆分成多个小的服务，拆分之后，项目多了，不同的项目的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"}]

然后修改首页，使其在页面加载完成后，加载json数据，填充下拉框。打开index.html在script标签中添加如下两个方法

$(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);
            }
        })
    }

body中的内容修改如下

<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>

至此，swagger的改造基本完成。如果运维给力，可以把你们的每个服务都分配一个二级域名，那到些，你就可以直接在些页面管理多个项目的api了。

我们的项目是通过二级路径来区分不同的项目的，即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

swagger实现多项目api管理

猜你喜欢