Java的Swagger界面丑、功能弱怎么破？

在做 CRMEB-JAVA开源商城系统时，我们团队用到了uni-app，也是时下比较流行的移动端开发技术，这里边就牵扯到了前后端全部分离的问题，一般在使用java开发前后端分离项目的时候，都会用到Swagger，Swagger 是一个用于生成、描述、调用和可视化 RESTful 风格的 Web api 服务的框架，Swagger 让部署管理和使用功能强大的 API变的简单，但这仅仅是在小型项目里，API接口不多的情况下。

随着，CRMEB-JAVA开源商城系统的不断优化，功能的不断增加，并且前后台都做到了前后端分离，接口数量一度超过了200多个，这就使得系统中一些使用体验变的越来越差，例如：
提交参数为JSON没法格式化，参数错了查找麻烦，返回结果没法折叠，太长了没法看，真是非常的痛苦呀！

但是，作为程序员一定要知道，你遇到的问题别人也一定遇到过，也肯定有热心的大牛解决了这个问题，所以，一个叫knife4j的增强版本Swagger诞生了，他帮我们很好的解决了以上问题，引用一下原作者的话来简单了解下knife4j：

希望knife4j像一把匕首一样小巧,轻量,并且功能强悍,也希望把她做成一个为Swagger接口文档服务的通用性解决方案,而不仅仅只是专注于前端Ui前端.

先上一张项目刚上的knife4j优化过的Swagger的剧照，先睹为快：

看上图是不是一目了然，最重要的是搜索框可以搜索相关api接口快速查询，并且可以在线调试接口，再来张图展示！

knife4j开源项目说明：

结构说明如下：

| 模块名称 | 说明 |
| ---- | ---- |
|knife4j|为Java MVC框架集成Swagger的增强解决方案,明细请参考上面的介绍说明
|knife4j-admin|云端Swagger接口文档注册管理中心,集成gateway网关对任意微服务文档进行组合集成，该模块尚未启动开发
|knife4j-extension|chrome浏览器的增强swagger接口文档ui,快速渲染swagger资源，该模块尚未启动开发
knife4j-service |为swagger服务的一系列接口服务程序 ，该模块尚未启动开发
knife4j-front |knife4j-spring-ui的纯前端静态版本,用于集成非Java语言使用，该模块尚未启动开发
knife4j-vue |该模块是knife4j前端的源码模块,基于Vue框架开发,knife4j-spring-ui中的文件是使用该模块进行打包构建的
swagger-bootstrap-ui|knife4j的前身,最后发布版本是1.9.6
swagger-bootstrap-ui-front|swagger-bootstrap-ui的纯前端版本,基于1.9.3的分支改造而成,其他开发语言体系可以使用,改造后一直未更新

Spring Boot 项目使用knife4j

• 官方给的DOM：knife4j-spring-boot-demo
• 研究CRMEB_JAVA开源商城系统，学习看在实际开发当中，如何集成进项目！

maven引用

第一步： 是在项目的pom.xml文件中引入knife4j的依赖,如下：

    
        com.github.xiaoymin
        knife4j-spring-boot-starter
        
        2.0.2
    

如果你想使用bom的方式引入,请参考Maven Bom方式引用

创建Swagger配置文件

新建Swagger的配置文件SwaggerConfiguration.java文件,创建springfox提供的Docket分组对象,代码如下：

@Configuration
@EnableSwagger2
@EnableKnife4j
@Import(BeanValidatorPluginsConfiguration.class)
public class SwaggerConfiguration {
 

    @Bean(value = "defaultApi2")
    public Docket defaultApi2() {
        Docket docket=new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                //分组名称
                .groupName("2.X版本")
                .select()
                //这里指定Controller扫描包路径
                .apis(RequestHandlerSelectors.basePackage("com.swagger.bootstrap.ui.demo.new2"))
                .paths(PathSelectors.any())
                .build();
        return docket;
    }

}

以上有两个注解需要特别说明，如下表：
| 注解 | 说明 |
| ---- | ---- |
@EnableSwagger2| 该注解是Springfox-swagger框架提供的使用Swagger注解，该注解必须加
@EnableKnife4j |该注解是knife4j提供的增强注解,Ui提供了例如动态参数、参数过滤、接口排序等增强功能,如果你想使用这些增强功能就必须加该注解，否则可以不用加

访问

• 在浏览器输入地址：http://host:port/doc.html
• 点击进入CRMEB-JAVA开源商城项目学习查看：Gitee项目地址

感谢您的阅读，如果对您有帮助，欢迎关注CRMEB掘金号。码云上有我们开源的商城项目，知识付费项目，均是基于PHP+vue+mysql开发，学习研究欢迎使用，大家可以动动发财的小手点点Start哦，关注我不迷路！