Spring Boot中Swagger UI定制

發(fā)布時間：2024-11-15 12:28:04 來源：億速云閱讀：78 作者：小樊欄目：編程語言

在Spring Boot項(xiàng)目中，Swagger UI是一個非常有用的工具，它可以幫助我們自動生成API文檔并提供一個可視化的界面。要定制Swagger UI，我們可以按照以下步驟進(jìn)行操作：

添加依賴

首先，確保你的項(xiàng)目中已經(jīng)添加了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>

配置Swagger

創(chuàng)建一個新的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屬性指定了要掃描的包名，這里我們設(shè)置為com.example.demo。

定制Swagger UI

要定制Swagger UI，我們可以創(chuàng)建一個新的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文件，并設(shè)置了一些基本的樣式。你還可以根據(jù)需要修改這些代碼來自定義Swagger UI的外觀和行為。

訪問Swagger UI

啟動你的Spring Boot應(yīng)用程序，然后在瀏覽器中訪問http://localhost:8080/swagger-ui.html。你應(yīng)該能看到一個定制過的Swagger UI界面，其中包含了你的API文檔。

注意：在實(shí)際項(xiàng)目中，你可能需要根據(jù)項(xiàng)目的實(shí)際情況修改@EnableSwagger2注解中的basePackage屬性，以及swagger-ui.html文件中的url屬性。

向AI問一下細(xì)節(jié)

Spring Boot中Swagger UI定制

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽