swagger-ui multi-port automatic switching optimization

Scenes

spring cloud has 10 microservices (assumed), and then write the interface each time, swagger-ui.html to the corresponding developer, inform the parameters, request method, return result, etc., when the number of microservices is relatively large

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

Different modules correspond to different ports, and then the confusion starts...

The effect of the transformation needs to be achieved:

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

In this way, there is no need to switch ports, and all the parameters after m are used for automatic forwarding.

 

operate:

After loading html, there is a webjars/springfox-swagger-ui/springfox.js content that needs to be customized.

In order to use html to request data using ajax, also bring m=xx parameters

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

  }

});

Note that a function is added: springfox.baseModel(), when requesting swagger-ui.html, the parameters after m also carry the value ajax,

Really important request: [http://192.168.0.xx/v2/api-docs?m=sp], that is, maybePrefix function processing, the location inside is /v2/api-docs in swagger-ui, Need to add springfox.baseModel() behind

Then use nginx to proxy all swagger-ui requests, except for the above js files

nginx configuration file

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

html directory

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

Other resources of swagger can be forwarded to java.

 

Then parse from the url, and forward different parameters after m to different hosts or ports. It is recommended to use orange to configure.

https://github.com/mycoco2014/orange

Screenshot of orange settings:

<1> Filter settings

<2> Forwarding rules - modified js files

<3> Forwarding rules, the default resources of swagger-ui

<4> Forwarding rule, microservice name