🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# POM依赖的引入 ```xml <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.5.0</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.5.0</version> </dependency> ``` # SwaggerConfig配置 ```java @Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.withMethodAnnotation(ApiOperation.class)) .build(); } //api接口作者相关信息 private ApiInfo apiInfo() { Contact contact = new Contact("名称", "url", "邮箱"); ApiInfo apiInfo = new ApiInfoBuilder().title("标题").description("描述").contact(contact).version("版本").build(); return apiInfo; } } ``` # 控制器请求 对于wagger-ui的页面访问,默认是swagger-ui.html就可访问到swagger页面,而它请求的地址是/v2/api-docs。 我们可以发现,/v2/api-docs的请求是在页面上通过http请求的,那么可以确定的是,肯定有一个js会发起请求。 我们看swagger-ui.jar,这个他是一个webjar,放着静态文件和一个swagger-ui.html页面,里面引用许多js。 因此我们可以不需要默认的swagger-ui.html访问,我们可以自定义controller,然后请求到自己的swagger-ui.html页面 ```java /** * swagger-ui控制器,不使用原生swagger-ui页面, * 原理:配置新请求指向该文件 * @author cgq_r * @version 1.0 */ @RequestMapping("/swagger") @Controller public class SwaggerController { @RequestMapping("swagger-ui.html") public String index(){ return "modules/swagger"; } } ``` # 新建jsp页面 我们新建的是项目名/swagger/swagger-ui.html的路径。在自定义swagger页面中,只需要把原来swagger-ui.html中的内容拷贝过来即可。 ```html <%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/webpage/include/taglib.jsp"%> <html> <head> <meta charset="UTF-8"> <title>Swagger UI</title> <link rel="icon" type="image/png" href="${swagger}/webjars/springfox-swagger-ui/images/favicon-32x32.png" sizes="32x32"/> <link rel="icon" type="image/png" href="${swagger}/webjars/springfox-swagger-ui/images/favicon-16x16.png" sizes="16x16"/> <link href='${swagger}/webjars/springfox-swagger-ui/css/typography.css' media='screen' rel='stylesheet' type='text/css'/> <link href='${swagger}/webjars/springfox-swagger-ui/css/reset.css' media='screen' rel='stylesheet' type='text/css'/> <link href='${swagger}/webjars/springfox-swagger-ui/css/screen.css' media='screen' rel='stylesheet' type='text/css'/> <link href='${swagger}/webjars/springfox-swagger-ui/css/reset.css' media='print' rel='stylesheet' type='text/css'/> <link href='${swagger}/webjars/springfox-swagger-ui/css/print.css' media='print' rel='stylesheet' type='text/css'/> <script src='${swagger}/webjars/springfox-swagger-ui/lib/jquery-1.8.0.min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/jquery.slideto.min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/jquery.wiggle.min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/jquery.ba-bbq.min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/handlebars-2.0.0.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/underscore-min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/backbone-min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/swagger-ui.min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/highlight.7.3.pack.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/jsoneditor.min.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/marked.js' type='text/javascript'></script> <script src='${swagger}/webjars/springfox-swagger-ui/lib/swagger-oauth.js' type='text/javascript'></script> <%--<script src='${swagger}/webjars/springfox-swagger-ui/springfox.js' type='text/javascript'></script>--%> <script src='${ctxStatic}/plugin/swagger/springfox.js' type='text/javascript'></script> <style> #header,#api_info { display: none; } </style> </head> <body class="swagger-section"> <div id='header'> <div class="swagger-ui-wrap"> <a id="logo" href="http://swagger.io">swagger</a> <form id='api_selector'> <div class='input'> <select id="select_baseUrl" name="select_baseUrl"/> </div> <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/> </div> <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> <div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div> <div id="swagger-ui-container" class="swagger-ui-wrap"></div> </body> </html> ``` 这里的${swagger}就是c:set定义的当前项目路径,引用一堆js。 这里我们演示的是去除swagger-ui.html中的头部等信息,只留下接口列表,其他的都不需要。因此这里面的header需要隐藏,而不能删除,只要去除,就会因为其他原因,该页面无法正常请求展示。 我们还需要修改springfox.js,也就是swagger-ui.html引用的。 ```js $(function() { var springfox = { "baseUrl": function() { var urlMatches = /(.*)\/swagger-ui.html.*/.exec(window.location.href); var swagger = urlMatches[1].indexOf("/swagger"); var result = urlMatches[1].substring(0,swagger); return result; }, "securityConfig": function(cb) { $.getJSON(this.baseUrl() + "/swagger-resources/configuration/security", function(data) { cb(data); }); }, "uiConfig": function(cb) { $.getJSON(this.baseUrl() + "/swagger-resources/configuration/ui", function(data) { cb(data); }); } }; window.springfox = springfox; window.oAuthRedirectUrl = springfox.baseUrl() + '/webjars/springfox-swagger-ui/o2c.html'; 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; } 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(); }); } }); ``` 我们重新拷贝并引用,其中baseUrl这个funcation是需要更改的,他会匹配响应的url,也就是你需要更改urlMatches匹配路径。其实他就是想要一个项目路径而已。 也可以根据这个文件,自定义自己的UI显示。