Java – spring boot swagger custom swagger UI html
•
Java
I encountered a problem migrating the war application to the spring boot jar application
I am using spring boot 1.4 1 and swagger 2.6 0
To customize the swagger UI in war, you must customize the swagger UI Put HTML in the / webapp directory In spring boot, webapp directory is not recommended because it does not work in bundled jars However, swagger ignores customizing the swagger UI HTML in / resources / static
Is there a simple solution (instead of adding the entire swagger distribution to my application)?
My custom swagger UI HTML looks like
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>API</title>
<link rel="icon" type="image/png" href="webjars/springfox-swagger-ui/images/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="webjars/springfox-swagger-ui/images/favicon-16x16.png" sizes="16x16"/>
<link href='webjars/springfox-swagger-ui/css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/reset.css' media='print' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/print.css' media='print' rel='stylesheet' type='text/css'/>
<script src='webjars/springfox-swagger-ui/lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/handlebars-2.0.0.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/underscore-min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/backbone-min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/swagger-ui.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/highlight.7.3.pack.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jsoneditor.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/marked.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/swagger-oauth.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/springfox.js' type='text/javascript'></script>
<style>
.swagger-section #header {
background-color: #ff5722;
}
</style>
</head>
<body class="swagger-section">
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://www.my-app.com">my-app.com API</a>
<form id='api_selector'>
<div class='input' style="display: none">
<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="Enter authorization token" id="input_apiKey" name="apiKey" type="text"/></div>
<div class='input' style="display: none"><a id="explore" href="#" data-sw-translate>Explore</a></div>
-->
</form>
</div>
</div>
<script type="text/javascript">
function addApiKeyAuthorization() {
var key = $('#input_apiKey')[0].value;
console.log("key: " + key);
if (key && key.trim() != "") {
var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization",key,"header");
window.swaggerUi.api.clientAuthorizations.add("bearer",apiKeyAuth);
//window.authorizations.add("Authorization",new ApiKeyAuthorization("Authorization","query"));
console.log("Set authorization token: " + key);
}
}
$('#input_apiKey').change(function () {
addApiKeyAuthorization();
});
</script>
<div id="message-bar" class="swagger-ui-wrap" data-sw-translate> </div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
</body>
</html>
Solution
I've found this simple way to customize swagger as a spring boot application by simply copying two files from the original springfox swagger UI
First, I start with swaggerconfig @ configuration is disabled in Java:
//@Configuration <-- Attention,disable Configuration
@EnableSwagger2
public class SwaggerConfig {
@Bean
public Docket productApi() {
return new Docket(DocumentationType.SWAGGER_2)
.ignoredParameterTypes(Pageable.class)
.select().apis(RequestHandlerSelectors.any())
.paths(regex("/v1/.*"))
.build();
}
}
Then I extended a webmvcconfigureradapter:
@Configuration
@Import(SwaggerConfig.class)
public class MvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
registry.addResourceHandler("/doc/v1/**").addResourceLocations("classpath:/doc/v1/");
registry.addResourceHandler("/doc/v1/webjars/**").addResourceLocations("classpath:/Meta-INF/resources/webjars/");
}
}
Then I simply modified the original file swagger UI Copy HTML to Src / main / resources / Doc / V1 / API HTML I have replaced this line:
<script src='webjars/springfox-swagger-ui/springfox.js' type='text/javascript'></script>
Use this line:
<script src='js/swagger.js' type='text/javascript'></script>
This is my API html
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="icon" type="image/png" href="webjars/springfox-swagger-ui/images/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="webjars/springfox-swagger-ui/images/favicon-16x16.png" sizes="16x16"/>
<link href='webjars/springfox-swagger-ui/css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/reset.css' media='print' rel='stylesheet' type='text/css'/>
<link href='webjars/springfox-swagger-ui/css/print.css' media='print' rel='stylesheet' type='text/css'/>
<script src='webjars/springfox-swagger-ui/lib/object-assign-pollyfill.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/handlebars-4.0.5.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/lodash.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/backbone-min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/swagger-ui.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/highlight.9.1.0.pack.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/highlight.9.1.0.pack_extended.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/jsoneditor.min.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/marked.js' type='text/javascript'></script>
<script src='webjars/springfox-swagger-ui/lib/swagger-oauth.js' type='text/javascript'></script>
<script src='js/springfox.js' type='text/javascript'></script>
</head>
<body class="swagger-section">
<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="webjars/springfox-swagger-ui/images/logo_small.png" /><span class="logo__title">swagger</span></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 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>
</body>
</html>
After that, I will the original springfox JS to Src / main / resources / Doc / V1 / JS / springfox JS, I have changed these lines:
"baseUrl": function() {
var urlMatches = /(.*)\/swagger-ui.html.*/.exec(window.location.href);
return urlMatches[1];
},
Use these lines:
"baseUrl": function() {
return window.location.origin;
},
This is my complete springfox js
$(function() {
var springfox = {
"baseUrl": function() {
return window.location.origin;
},"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'],docExpansion: data.docExpansion || 'none',jsonEditor: JSON.parse(data.jsonEditor) || false,apisSorter: data.apisSorter || 'alpha',defaultModelRendering: data.defaultModelRendering || 'schema',showRequestHeaders: data.showRequestHeaders || true,timeout: data.requestTimeout,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");
},});
initializeBaseUrl();
function addApiKeyAuthorization(security) {
var apiKeyVehicle = security.apiKeyVehicle || 'query';
var apiKeyName = security.apiKeyName || 'api_key';
var apiKey = security.apiKey || '';
if (apiKey && apiKey.trim() != "") {
var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization(apiKeyName,apiKey,apiKeyVehicle);
window.swaggerUi.api.clientAuthorizations.add(apiKeyName,apiKeyAuth);
log("added key " + apiKey);
}
}
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;
addApiKeyAuthorization(security);
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();
});
}
});
This is my folder structure
Now you just need to run the application and go to http://localhost:8080/doc/v1/api.html
The content of this article comes from the network collection of netizens. It is used as a learning reference. The copyright belongs to the original author.
THE END
二维码