一、Swagger及Swagger-Bootstrap-UI简介

1.1、swagger简介

Swagger 是一款RESTFUL接口的、基于YAML、JSON语言的文档在线自动生成、代码自动生成的工具。是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。

总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法、参数和模型紧密集成到服务器端的代码,允许 API 来始终保持同步。Swagger 让部署管理和使用功能强大的 API 从未如此简单。

1.2、关于Swagger-Bootstrap-UI

1.2.1、简介

swagger-bootstrap-ui是springfox-swagger的增强UI实现,为Java开发者在使用Swagger的时候,能拥有一份简洁、强大的接口文档体验。

1.2.2、核心功能

该UI增强包主要包括两大核心功能:文档说明在线调试

  • 文档说明:根据Swagger的规范说明,详细列出接口文档的说明,包括接口地址、类型、请求示例、请求参数、响应示例、响应参数、响应码等信息,使用swagger-bootstrap-ui能根据该文档说明,对该接口的使用情况一目了然。

  • 在线调试:提供在线接口联调的强大功能,自动解析当前接口参数,同时包含表单验证,调用参数可返回接口响应内容、headers、Curl请求命令实例、响应时间、响应状态码等信息,帮助开发者在线调试,而不必通过其他测试工具测试接口是否正确,简介、强大。

1.2.3、UI增强

同时,swagger-bootstrap-ui在满足以上功能的同时,还提供了文档的增强功能,这些功能是官方swagger-ui所没有的,每一个增强的功能都是贴合实际,考虑到开发者的实际开发需要,是比不可少的功能,主要包括:

  • 个性化配置:通过个性化ui配置项,可自定义UI的相关显示信息

  • 离线文档:根据标准规范,生成的在线markdown离线文档,开发者可以进行拷贝生成markdown接口文档,通过其他第三方markdown转换工具转换成html或pdf,这样也可以放弃swagger2markdown组件

  • 接口排序:自1.8.5后,ui支持了接口排序功能,例如一个注册功能主要包含了多个步骤,可以根据swagger-bootstrap-ui提供的接口排序规则实现接口的排序,step化接口操作,方便其他开发者进行接口对接

1.2.4、UI特点

  • 以markdown形式展示文档,将文档的请求地址、类型、请求参数、示例、响应参数分层次依次展示,接口文档一目了然,方便开发者对接
  • 在线调试栏除了自动解析参数外,针对必填项着颜色区分,同时支持tab键快速输入上下切换.调试时可自定义Content-Type请求头类型
  • 个性化配置项,支持接口地址、接口description属性、UI增强等个性化配置功能
  • 接口排序,支持分组及接口的排序功能
  • 支持markdown文档离线文档导出,也可在线查看离线文档
  • 调试信息全局缓存,页面刷新后依然存在,方便开发者调试
  • 以更人性化的treetable组件展示Swagger Models功能
  • 响应内容可全屏查看,针对响应内容很多的情况下,全屏查看,方便调试、复制
  • 文档以多tab方式可显示多个接口文档
  • 请求参数栏请求类型、是否必填着颜色区分
  • 主页中粗略统计接口不同类型数量
  • 支持接口在线搜索功能
  • 左右菜单和内容页可自由拖动宽度
  • 支持自定义全局参数功能,主页包括header及query两种类型
  • i18n国际化支持,目前支持:中文简体、中文繁体、英文
  • JSR-303 annotations 注解的支持

二、Spring-boot整合Swagger-Bootstrap-UI

使用上次复习Mybatis-Plus时建立的项目,在该项目的基础上对Swagger-Bootstrap-ui进行初步学习。

2.1、引入依赖、编写配置类

如果使用原有的swagger,那么需要引入的依赖有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--swagger-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>io.swagger</groupId>
<artifactId>swagger-annotations</artifactId>
<version>1.5.13</version>
</dependency>

如果使用swagger-bootstrap-ui,那么只需要引入下面两个依赖即可

1
2
3
4
5
6
7
8
9
10
11
<!--swagger-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>swagger-bootstrap-ui</artifactId>
<version>1.9.6</version>
</dependency>

在config包下新建一个配置类

与普通swagger的配置类相比,swagger-bootstap-ui的配置类多了一个@EnableSwaggerBootstrapUI注解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Configuration
@EnableSwagger2
@EnableSwaggerBootstrapUI
public class SwaggerConfiguration {

@Bean
public Docket webApiConfig(){

return new Docket(DocumentationType.SWAGGER_2)
.groupName("webApi")
.apiInfo(webApiInfo())
.select()
.paths(Predicates.not(PathSelectors.regex("/admin/.*")))
.paths(Predicates.not(PathSelectors.regex("/error.*")))
.build();

}

private ApiInfo webApiInfo(){

return new ApiInfoBuilder()
.title("测试API")
.description("本文档描述了课程中心微服务接口定义")
.version("1.0")
.contact(new Contact("蔡大头", "http://wuhuqifei.com", "763882220@qq.com"))
.build();
}
}

2.2、编写Controller并使用注解来添加信息

2.2.1、UserController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@RestController
@RequestMapping("/user")
@Api(tags = "用户管理控制器")
public class UserController {

@Autowired
private UserService userService;

@GetMapping("{id}")
@ApiOperation("根据用户id获取用户信息")
public User getUserById(@PathVariable("id") Long id) {
return userService.getById(id);
}

@PostMapping("addUser")
@ApiOperation("添加用户对象")
public boolean addUser(@RequestBody User user) {
return userService.save(user);
}

@PutMapping("update")
@ApiOperation("修改用户信息")
public boolean updateUser(@RequestBody User user) {
return userService.saveOrUpdate(user);
}

@DeleteMapping("{id}")
@ApiOperation("根据id删除用户")
public boolean deleteUser(@PathVariable("id") Long id) {
return userService.removeById(id);
}


@GetMapping("findAll")
public List<User> getAllUser() {
return userService.list();
}
}

2.2.2、常用注解说明

swagger及swagger-bootstrap-ui的常用注解有两个,分别为@Api与@ApiOperation

  • @Api

这个注解用于Controller类上,可以使用该注解的tags属性来为控制器添加备注

  • @ApiOperation

这个注解用于控制器的方法上,用于给控制器的具体方法添加注解

2.3、使用

2.3.1、在主启动类中添加注解,将swagger配置类纳入被扫描范围

1
2
3
4
5
6
7
8
9
10
@MapperScan("com.hzx.mpblog.mapper")
@ComponentScan("com.hzx.mpblog")
@SpringBootApplication
public class MpApplication {
public static void main(String[] args) {
SpringApplication.run(MpApplication.class);
System.out.println("http://localhost:8848/doc.html");
System.out.println("http://localhost:8848/swagger-ui.html");
}
}

在主启动类的两个输出语句中,http://localhost:8848/doc.html是swagger-bootstrap-ui的访问地址。

http://localhost:8848/swagger-ui.html是swagger的访问地址。

2.3.2、启动主启动类

分别进入两个链接中查看效果

  • swagger

主页面说明

image-20210129153717308

点击方法进入方法说明及测试界面,点击try it out

image-20210129153734979

在参数输入框中输入参数,点击execute执行方法

image-20210129153751549

测试结果

image-20210129153803544

  • swagger-bootstrap-ui

主页面说明

swagger-bootstrap-ui将测试页面与方法说明页面分开,在

image-20210129153813279

方法说明

image-20210129153821304

方法测试

image-20210129153830894

测试结果

image-20210129153838469