Spring Boot + Swagger + custom swagger-ui.html

后端 未结 2 1286
情书的邮戳
情书的邮戳 2021-02-19 22:11

I\'ve got problems migrating a war application to a spring boot jar application.

I\'m using spring boot 1.4.1 and swagger 2.6.0.

To customize swagger ui in a war

相关标签:
2条回答
  • 2021-02-19 22:26

    Solution if you are using maven:

    • You should copy swagger-ui.html into src/main/webapp

    • Make your editions or replace screen.css by your theme.css

    Than add these code into your pom.xml:

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <webResources>
                        <resource>
                            <directory>${basedir}/src/main/webapp</directory>
                            <filtering>true</filtering>
                            <includes>
                                <include>*.css</include>
                                <include>*.html</include>
                            </includes>
                        </resource>
                    </webResources>
                </configuration>
            </plugin>
        </plugins>
    </build>
    
    0 讨论(0)
  • 2021-02-19 22:36

    I have found this simple way to customize Swagger into a Spring Boot application with just two files copied from original springfox-swagger-ui

    First of all i have disabled @Configuration from SwaggerConfig.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 have 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 have just copied original file swagger-ui.html into src/main/resources/doc/v1/api.html with just a simple modification. I have substituted this line:

    <script src='webjars/springfox-swagger-ui/springfox.js' type='text/javascript'></script>
    

    with 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>&nbsp;</div>
    <div id="swagger-ui-container" class="swagger-ui-wrap"></div>
    </body>
    </html>
    

    After that i have copied original springfox.js into src/main/resources/doc/v1/js/springfox.js where i have changed these lines:

    "baseUrl": function() {
          var urlMatches = /(.*)\/swagger-ui.html.*/.exec(window.location.href);
          return urlMatches[1];
        },
    

    with 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 have just to run application and go to http://localhost:8080/doc/v1/api.html

    0 讨论(0)
提交回复
热议问题