前后端对接，就得有一个好的的接口文档，具体到：接口的名称，说明，入参字段，出参字段，是否必传，参数类型等等，这里记录一下使用的swagger ui组件 knife4j-spring-ui。knife4j-spring-ui 是swagger的一个增强版，相比官方ui，其界面更美观，功能更强大，字段说明更清晰直观，测试起来更方便

对比一下：

官方UI：

全新UI：

集成在sprintboot项目中

使用Knife4j有两种方式：

官网地址：Knife4j · 集Swagger2及OpenAPI3为一体的增强解决方案. | Knife4j

第一种：

一、pom文件添加依赖

        <!-- Swagger2增强版，全新UI 引入Knife4j的官方start包,Swagger2基于Springfox2.10.5项目--><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>2.0.9</version></dependency>

二、配置文件添加配置（可以不配）

配置基本的文档说明信息，如果不配置，就是默认的

#####  swagger文档的部分配置 ####
knife4j:# 生产环境可改为 false（改为false后 swagger将不能使用）enable: true

三、配置swagger静态页面访问路径

如果不配置，访问swagger页面时可能出现404

package com.zhh.demo.config;import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2WebMvc;/*** @Description: swagger全新UI* @Author: zhaoheng*/
@Configuration
@EnableSwagger2WebMvc
public class Knife4jConfiguration {/** 生产环境可改为 false（改为false后 swagger将不能使用）*/@Value("${knife4j.enable:true}")private boolean knife4jEnable;/*** 初始化配置，注入到容器* swagger访问地址：http://127.0.0.1:8080/demo/doc.html#/home*/@Bean(value = "dockerBean")public Docket dockerBean() {//指定使用Swagger2规范Docket docket = new Docket(DocumentationType.SWAGGER_2).apiInfo(new ApiInfoBuilder()//描述字段支持Markdown语法.description("# xxx管理平台接口api").termsOfServiceUrl("https://doc.xiaominfo.com/").contact(new Contact("zhaoheng", "https://blog.csdn.net/Muscleheng", "xxx@163.com")).version("1.0").build())//分组名称.groupName("xxx服务").enable(knife4jEnable).select()//这里指定Controller扫描包路径.apis(RequestHandlerSelectors.basePackage("com.zhh.demo.controller")).paths(PathSelectors.any()).build();return docket;}
}

第二种：

一、pom文件添加依赖

     <!-- 封装了swagger2 --><dependency><groupId>io.github.wilson-he</groupId><artifactId>swagger2-spring-boot-starter</artifactId><version>1.1.2</version></dependency><!-- swagger增强版ui，相比官方ui，界面更美观，功能更强大 --><!-- 如果springBoot版本过高，可能会出现错误 --><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-ui</artifactId><version>3.0.2</version></dependency>

二、配置文件添加配置（可以不配）

配置基本的文档说明信息，如果不配置，就是默认的

#####  swagger文档部分配置 ####
swagger:# 生产环境改为false（改为false后swagger-ui.html则无法访问）enabled: truedocket:api-info:title: xxx管理平台接口apidescription: 文件详细说明version: 1.0.0# 维护者信息contact:name: zhaohengurl: https://blog.csdn.net/Muscleheng?type=blog

三、配置swagger静态页面访问路径

如果不配置，访问swagger页面时可能出现404

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {/*** 配置静态资源访问路径*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {// 静态资源访问路径和存放路径配置registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/","classpath:/public/");// swagger访问配置registry.addResourceHandler("/**").addResourceLocations("classpath:/META-INF/resources/","classpath:/META-INF/resources/webjars/");}
}

四、编写代码测试成果

在对应的出入参实体类、字段上添加swagger的注解，就能在接口文档上显示对应的字段说明

1. model实体示例

出参实体：

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;@Data
@ApiModel("用户信息出参实体")
public class UserVO {@ApiModelProperty(value = "编号")private Long id;@ApiModelProperty(value = "姓名")private String name;@ApiModelProperty(value = "年龄")private Integer age;
}

入参实体：

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;@Data
@ApiModel("用户信息查询入参实体")
public class QueryUserRO {@ApiModelProperty(value = "编号",required = true)private Long id;@ApiModelProperty(value = "姓名",required = false)private String name;
}

2. controller示例

@Api(tags = "用户管理-api")
@RestController
@RequestMapping("/demo1")
public class Demo1Controller {@ApiOperation("查询用户接口1")@PostMapping("/getUser")public UserVO getUser(@RequestBody QueryUserRO queryUserRO){return new UserVO();}@ApiOperation("查询用户接口2")@ApiImplicitParams({@ApiImplicitParam(name = "id", value = "用户id", dataType = "Long", required = true),@ApiImplicitParam(name = "name", value = "用户姓名", dataType = "String", required = false)})@PostMapping("/getUser2")public UserVO getUser2(@RequestParam(name = "id",required = true) Long id, @RequestParam(name = "name",required = false) String name){return new UserVO();}
}

启动项目，可通过两个地址访问到swagger文档：

官方文档UI界面：127.0.0.1:8080/swagger-ui.html

增强版UI界面：127.0.0.1:8080/doc.html

swagger2的全新UI组件Knife4j相关推荐

强大的UI组件集Telerik R3 2022支持.NET 7、全新的主题等
Telerik DevCraft包含一个完整的产品栈来构建您下一个Web.移动和桌面应用程序.它使用HTML和每个.NET平台的UI库,加快开发速度.Telerik DevCraft提供最完整的工具箱 ...
WWDC19 苹果宣布全新 UI 框架 SwiftUI
2019 年 WWDC 大会上,苹果在压轴环节向大众宣布了基于 Swift 语言构建的全新 UI 框架 -- SwiftUI.开发者可通过它快速为所有的 Apple 平台创建美观.动态的应用程序. 在 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
红旗 linux界面,红旗Linux桌面系统v11预览版发布：全新UI设计
原标题:红旗Linux桌面系统v11预览版发布:全新UI设计关注来源 | FOSS Lab 如若转载请联系原公众号近日,国产操作系统红旗 Linux 官网上线最新的红旗 Linux 桌面操作系统 ...
SpringMVC+Mybatis+Html5 bootStrap，SOA架构，全新UI商业运营框架
该框架为全新商业运营中的SpringMVC+Mybatis+Html5 bootStrap SOA架构 webservices 模块化框架该框架模拟大型互联网的SOA架构,做到高并发,大数据处理,整 ...
推荐 8 个支持 Vue3 的前端 UI 组件库，免费开源、漂亮美观，涵盖常用的业务组件
Vue3 正式发布已经快2年了,今年2月也正式变成 Vue 项目的默认版本,今天分享8个优秀的 Vue3 UI 组件库. Element Plus 相关网址:https://www.thosefree ...
ueditor上传组件显示乱码_最全面的移动端 UI组件设计详解：中篇
上一期给大家讲解了<最全面的移动端UI组件设计详解:上篇>,主要分享了:布局组件和导航组件2个部分:这次给大家带来:基础组件.表单组件和反馈组件详解,希望你在设计APP.小程序.H5页面中 ...
第一本 Compose 图书上市，联想大咖教你学会 Android 全新 UI 编程
朱江 | 现任联想(北京)有限公司 Android 开发工程师,从事 Android 开发工作多年,有丰富的项目经验,负责和参与开发过多款移动应用程序,同时还是多个开源项目的作者.2017 年开始在 ...
Windows 11 正式官宣：全新 UI、支持安卓 App、应用商店 0 抽成！
整理 | 郑丽媛出品 | CSDN(ID:CSDNnews) "下一代 Windows 即将到来,这是十年来最重要的更新之一." 5 月微软 Build 开发者大会上微软 CEO ...

swagger2的全新UI组件Knife4j

第一种：

一、pom文件添加依赖

二、配置文件添加配置（可以不配）

三、配置swagger静态页面访问路径

第二种：

一、pom文件添加依赖

二、配置文件添加配置（可以不配）

三、配置swagger静态页面访问路径

四、编写代码测试成果

1. model实体示例

2. controller示例

swagger2的全新UI组件Knife4j相关推荐

最新文章

热门文章