swagger-bootstrap-ui:swagger改进版本,界面更美观易于阅读
ztj100 2025-05-08 08:10 42 浏览 0 评论
swagger作为一款在线文档生成工具,用于自动生成接口API,避免接口文档和代码不同步,但原生的界面不是很友好,下面介绍一款改进版本swagger-bootstrap-ui,界面左右侧布局,可以打开多个Tab页。
实现也非常简单,在swagger2配置基础上仅多添加一个依赖并在配置类上追加@EnableSwaggerBootstrapUI注解即可,无任何其他多余配置。
看下Springboot集成步骤:
1、引入依赖
<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>
swagger-bootstrap版本在上面基础上添加依赖:
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>swagger-bootstrap-ui</artifactId>
<version>1.9.6</version>
</dependency>
2、swagger配置
@Configuration
@EnableSwagger2
@EnableSwaggerBootstrapUI // 新增注解,启用新版本界面
@Profile("!PRO") //安全起见生产环境不启动swagger
public class SwaggerConfig {
@Bean
public Docket api() {
// 构造Docket对象
return new Docket(DocumentationType.SWAGGER_2)
.groupName("test服务接口文档")
.apiInfo(apiInfo())
.genericModelSubstitutes(DeferredResult.class)
.useDefaultResponseMessages(false)
// 选择那些路径和api会生成document
.select()
// 对所有api进行监控
.apis(RequestHandlerSelectors.basePackage("com.my.test"))
// 对所有路径进行监控
.paths(PathSelectors.any())
.build();
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder().title("test服务接口文档")// 大标题
.version("1.0")// 版本
.build();
}
}
3、controller swagger文档注解(同原生)
@Api(value = "/test", tags = "test服务接口")
@RestController
@RequestMapping("/test")
public class TestController {
@ApiOperation(value = "test接口1", notes = "test接口1")
@PostMapping("/test1")
public ServiceResponse test1(@RequestBody @Valid TestDTO testDTO) {
return ServiceResponse.success();
}
@ApiOperation(value = "test接口2", notes = "test接口2")
@PostMapping("/test2")
public ServiceResponse test2(@RequestBody @Valid Test2DTO test2DTO) {
return ServiceResponse.success();
}
}
4、页面展示
swagger2原生界面和新版本界面都可以访问,自由选择:
原生界面:
http://localhost:8080/test/swagger-ui.html
改进版本:
http://localhost:8080/test/doc.html
5、注意
如果开启了MVC静态资源访问控制(如添加了@EnableWebMvc注解),swagger页面就访问不到了,这时候需要配置下路径映射
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/js/**").addResourceLocations("classpath:/js/");
registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
registry.addResourceHandler("/html/**").addResourceLocations("classpath:/html/");
registry.addResourceHandler("/css/**").addResourceLocations("classpath:/static/css/");
}
}
有的地方说添加配置
spring.mvv.resources.add-mapping = true,静态资源设置为自动加载,也可以实现同样的效果,不过我没亲自验证,有兴趣的小伙伴可以试下
相关推荐
- Vue3非兼容变更——函数式组件(vue 兼容)
-
在Vue2.X中,函数式组件有两个主要应用场景:作为性能优化,因为它们的初始化速度比有状态组件快得多;返回多个根节点。然而在Vue3.X中,有状态组件的性能已经提高到可以忽略不计的程度。此外,有状态组...
- 利用vue.js进行组件化开发,一学就会(一)
-
组件原理/组成组件(Component)扩展HTML元素,封装可重用的代码,核心目标是为了可重用性高,减少重复性的开发。组件预先定义好行为的ViewModel类。代码按照template\styl...
- Vue3 新趋势:10 个最强 X 操作!(vue.3)
-
Vue3为前端开发带来了诸多革新,它不仅提升了性能,还提供了...
- 总结 Vue3 组件管理 12 种高级写法,灵活使用才能提高效率
-
SFC单文件组件顾名思义,就是一个.vue文件只写一个组件...
- 前端流行框架Vue3教程:17. _组件数据传递
-
_组件数据传递我们之前讲解过了组件之间的数据传递,...
- 前端流行框架Vue3教程:14. 组件传递Props效验
-
组件传递Props效验Vue组件可以更细致地声明对传入的props的校验要求...
- 前端流行框架Vue3教程:25. 组件保持存活
-
25.组件保持存活当使用...
- 5 个被低估的 Vue3 实战技巧,让你的项目性能提升 300%?
-
前端圈最近都在卷性能优化和工程化,你还在用老一套的Vue3开发方法?作为摸爬滚打多年的老前端,今天就把私藏的几个Vue3实战技巧分享出来,帮你在开发效率、代码质量和项目性能上实现弯道超车!一、...
- 绝望!Vue3 组件频繁崩溃?7 个硬核技巧让性能暴涨 400%!
-
前端的兄弟姐妹们五一假期快乐,谁还没在Vue3项目上栽过跟头?满心欢喜写好的组件,一到实际场景就频频崩溃,页面加载慢得像蜗牛,操作卡顿到让人想砸电脑。用户疯狂吐槽,领导脸色难看,自己改代码改到怀疑...
- 前端流行框架Vue3教程:15. 组件事件
-
组件事件在组件的模板表达式中,可以直接使用...
- Vue3,看这篇就够了(vue3 从入门到实战)
-
一、前言最近很多技术网站,讨论的最多的无非就是Vue3了,大多数都是CompositionAPI和基于Proxy的原理分析。但是今天想着跟大家聊聊,Vue3对于一个低代码平台的前端更深层次意味着什么...
- 前端流行框架Vue3教程:24.动态组件
-
24.动态组件有些场景会需要在两个组件间来回切换,比如Tab界面...
- 前端流行框架Vue3教程:12. 组件的注册方式
-
组件的注册方式一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册...
- 焦虑!Vue3 组件频繁假死?6 个奇招让页面流畅度狂飙 500%!
-
前端圈的朋友们,谁还没在Vue3项目上踩过性能的坑?满心期待开发出的组件,一到高并发场景就频繁假死,用户反馈页面点不动,产品经理追着问进度,自己调试到心态炸裂!别以为这是个例,不少人在电商大促、数...
- 前端流行框架Vue3教程:26. 异步组件
-
根据上节课的代码,我们在切换到B组件的时候,发现并没有网络请求:异步组件:...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)