温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Spring Boot中Swagger UI定制

发布时间:2024-11-15 12:28:04 来源:亿速云 阅读:78 作者:小樊 栏目:编程语言

在Spring Boot项目中,Swagger UI是一个非常有用的工具,它可以帮助我们自动生成API文档并提供一个可视化的界面。要定制Swagger UI,我们可以按照以下步骤进行操作:

  1. 添加依赖

首先,确保你的项目中已经添加了Swagger和Swagger UI的依赖。在你的pom.xml文件中添加以下依赖:

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>
  1. 配置Swagger

创建一个新的Java类,例如SwaggerConfig.java,并添加以下代码:

import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.example.demo"))
                .paths(PathSelectors.any())
                .build();
    }
}

在这个配置类中,我们使用@EnableSwagger2注解启用了Swagger2,并使用Docket bean定义了API文档的配置。basePackage属性指定了要扫描的包名,这里我们设置为com.example.demo

  1. 定制Swagger UI

要定制Swagger UI,我们可以创建一个新的HTML文件,例如swagger-ui.html,并将其放在src/main/resources/static目录下。在这个文件中,我们可以添加自定义的CSS和JavaScript代码来修改Swagger UI的外观和行为。

以下是一个简单的swagger-ui.html示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="/webjars/springfox-swagger-ui/swagger-ui.css" >
    <link rel="icon" type="image/png" href="/webjars/springfox-swagger-ui/favicon-32x32.png" sizes="32x32" />
    <style>
        html
        {
            box-sizing: border-box;
            overflow: -moz-scrollbars-vertical;
            overflow-y: scroll;
        }
        *,
        *:before,
        *:after
        {
            box-sizing: inherit;
        }
        body
        {
            margin:0;
            background: #fafafa;
        }
    </style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="/webjars/springfox-swagger-ui/swagger-ui-bundle.js"> </script>
<script src="/webjars/springfox-swagger-ui/swagger-ui-standalone-preset.js"> </script>
<script>
    window.onload = function() {
        // Begin Swagger UI call region
        const ui = SwaggerUIBundle({
            url: "/v2/api-docs",
            dom_id: '#swagger-ui',
            deepLinking: true,
            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIStandalonePreset
            ],
            plugins: [
                SwaggerUIBundle.plugins.DownloadUrl
            ],
            layout: "StandaloneLayout"
        });

        // End Swagger UI call region
        window.ui = ui;
    };
</script>
</body>
</html>

在这个示例中,我们引入了Swagger UI的CSS和JavaScript文件,并设置了一些基本的样式。你还可以根据需要修改这些代码来自定义Swagger UI的外观和行为。

  1. 访问Swagger UI

启动你的Spring Boot应用程序,然后在浏览器中访问http://localhost:8080/swagger-ui.html。你应该能看到一个定制过的Swagger UI界面,其中包含了你的API文档。

注意:在实际项目中,你可能需要根据项目的实际情况修改@EnableSwagger2注解中的basePackage属性,以及swagger-ui.html文件中的url属性。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI