swagger-ui多端口自动切换优化

2019独角兽企业重金招聘Python工程师标准>>>

场景

spring cloud 有10个微服务(假设),然后每次写好接口,swagger-ui.html给对应的开发人员,告知参数,请求方式,返回结果等,当微服务个数比较多的情况

http://192.168.0.xx:8000/swagger-ui.html
http://192.168.0.xx:8001/swagger-ui.html
http://192.168.0.xx:8002/swagger-ui.html
http://192.168.0.xx:8003/swagger-ui.html

不同的模块对应不同的端口,然后就开始混乱了......

改造需要达到的效果:

http://192.168.0.xx/swagger-ui.html?m=模块名称1
http://192.168.0.xx/swagger-ui.html?m=模块名称2
http://192.168.0.xx/swagger-ui.html?m=模块名称3
http://192.168.0.xx/swagger-ui.html?m=模块名称4

这样就不需要切换端口,全部用m后面的参数自动做转发

 

操作:

加载html之后,有个 webjars/springfox-swagger-ui/springfox.js 内容需要定制一下.

为了将html使用ajax请求数据也带上m=xx的参数

$(function() {
  var springfox = {
    "baseModel": function() {
      var urlModel = window.location.href.match(/m=(.*)/);
      if (urlModel.length >= 2) {
        return urlModel[1]
      }
      return "";
    },
    "baseUrl": function() {
      var urlMatches = /(.*)\/swagger-ui.html.*/.exec(window.location.href);
      return urlMatches[1];
    },
    "securityConfig": function(cb) {
      $.getJSON(this.baseUrl() + "/swagger-resources/configuration/security?m=" + this.baseModel(), function(data) {
        cb(data);
      });
    },
    "uiConfig": function(cb) {
      $.getJSON(this.baseUrl() + "/swagger-resources/configuration/ui?m=" + this.baseModel(), function(data) {
        cb(data);
      });
    }
  };
  window.springfox = springfox;
  window.oAuthRedirectUrl = springfox.baseUrl() + '/webjars/springfox-swagger-ui/o2c.html?m=' + springfox.baseModel();

  window.springfox.uiConfig(function(data) {
    window.swaggerUi = new SwaggerUi({
      dom_id: "swagger-ui-container",
      validatorUrl: data.validatorUrl,
      supportedSubmitMethods: data.supportedSubmitMethods || ['get', 'post', 'put', 'delete', 'patch'],
      onComplete: function(swaggerApi, swaggerUi) {

        initializeSpringfox();

        if (window.SwaggerTranslator) {
          window.SwaggerTranslator.translate();
        }

        $('pre code').each(function(i, e) {
          hljs.highlightBlock(e)
        });

      },
      onFailure: function(data) {
        log("Unable to Load SwaggerUI");
      },
      docExpansion: data.docExpansion || 'none',
      jsonEditor: data.jsonEditor || false,
      apisSorter: data.apisSorter || 'alpha',
      defaultModelRendering: data.defaultModelRendering || 'schema',
      showRequestHeaders: data.showRequestHeaders || true
    });

    initializeBaseUrl();

    function addApiKeyAuthorization() {
      var key = (window.apiKeyVehicle == 'query') ? encodeURIComponent($('#input_apiKey')[0].value) : $('#input_apiKey')[0].value;
      if (key && key.trim() != "") {
        var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization(window.apiKeyName, key, window.apiKeyVehicle);
        window.swaggerUi.api.clientAuthorizations.add(window.apiKeyName, apiKeyAuth);
        log("added key " + key);
      }
    }

    $('#input_apiKey').change(addApiKeyAuthorization);

    function log() {
      if ('console' in window) {
        console.log.apply(console, arguments);
      }
    }

    function oAuthIsDefined(security) {
      return security.clientId
          && security.clientSecret
          && security.appName
          && security.realm;
    }

    function initializeSpringfox() {
      var security = {};
      window.springfox.securityConfig(function(data) {
        security = data;
        window.apiKeyVehicle = security.apiKeyVehicle || 'query';
        window.apiKeyName = security.apiKeyName || 'api_key';
        if (security.apiKey) {
          $('#input_apiKey').val(security.apiKey);
          addApiKeyAuthorization();
        }
        if (typeof initOAuth == "function" && oAuthIsDefined(security)) {
          initOAuth(security);
        }
      });
    }
  });

  $('#select_baseUrl').change(function() {
    window.swaggerUi.headerView.trigger('update-swagger-ui', {
      url: $('#select_baseUrl').val()
    });
  });

  function maybePrefix(location, withRelativePath) {
    var pat = /^https?:\/\//i;
    if (pat.test(location)) {
      return location;
    }
    return withRelativePath + location + '?m=' + springfox.baseModel();
  }

  function initializeBaseUrl() {
    var relativeLocation = springfox.baseUrl();

    $('#input_baseUrl').hide();

    $.getJSON(relativeLocation + "/swagger-resources", function(data) {

      var $urlDropdown = $('#select_baseUrl');
      $urlDropdown.empty();
      $.each(data, function(i, resource) {
        var option = $('<option></option>')
            .attr("value", maybePrefix(resource.location, relativeLocation))
            .text(resource.name + " (" + resource.location + ")");
        $urlDropdown.append(option);
      });
      $urlDropdown.change();
    });

  }

});

注意一下,就是添加了一个函数: springfox.baseModel(),在请求 swagger-ui.html的时候,将m后面的参数,也携带值ajax里面,

真正比较重要的请求: [http://192.168.0.xx/v2/api-docs?m=sp],也就是 maybePrefix 函数处理,里面的location就是swagger-ui里面的/v2/api-docs,需要在后面加上 springfox.baseModel()

然后将所有swagger-ui的请求全部使用nginx代理,除了上面的js文件

nginx 配置文件

 server {
        listen 4000;
        location / {
                root /usr/local/orange/html;
        }
    }

html目录

swagger-ui.html
webjars/springfox-swagger-ui/springfox.js

swagger其它的资源,转发到java上即可.

 

然后从url里面解析,将m后面不同的参数转发到不同的主机或端口. 推荐使用orange来配置.

https://github.com/mycoco2014/orange

orange设置截图:

<1>过滤器设置

<2>转发规则-修改过的js文件

<3>转发规则,swagger-ui的默认的资源

<4>转发规则,微服务名称

 

转载于:https://my.oschina.net/u/1538135/blog/1799940