缘由

接口文档想必是许多开发小伙伴的噩梦,不仅要写详细,还要及时维护文档与后端代码保持一致,稍有没及时更新接口文档,前端同学肯定会抱怨后端同学给的文档与实际情况不一致。

于是,引入了Swagger组件,它实现了代码即文档,后端只管写代码,只需要通过几个注解,会自动生成接口文档,前端同学可在线访问。

但是,对界面审美有要求的前端同学,又吐槽Swagger原生界面太low了,而且功能还少。

有压迫就有反抗,后端肯定不服,既然你嫌弃原生Swagger太low,那就给你开通超级VIP - knife4j。

原生Swagger

Springboot集成Swagger,其实很简单,主要是使用常用的几个注解而已。因为在面试他人的过程中,还是有不少人没使用过Swagger,所以这里简单介绍下。

首先在Spingboot工程中引入Swagger依赖,主要是2个,如下:

<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配置类,配置项名都简单易懂,可根据自己情况修改配置,注意一点是apis方法是指定要扫描的包路径,一定要写自己项目的。

package com.nobody.config;

import java.util.ArrayList;
import java.util.List;

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.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.service.Parameter;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class Swagger2Config {

@Value("${swagger.enable:true}")
private boolean swaggerEnable;

@Bean
public Docket createApi() {
// 全局参数
List<Parameter> pars = new ArrayList<>();
return new Docket(DocumentationType.SWAGGER_2).enable(swaggerEnable).apiInfo(apiInfo())
.select().apis(RequestHandlerSelectors.basePackage("com.nobody"))
.paths(PathSelectors.any()).build().globalOperationParameters(pars);
}

private ApiInfo apiInfo() {
return new ApiInfoBuilder().title("XX服务后端API").description("XX服务专用API,其他系统请勿调用!")
.version("1.0").termsOfServiceUrl("https://nobody.com")
.contact(new Contact("陈皮", "https://nobody.com", "chenpi@qq.com")).build();
}
}

下面讲解几个常用的注解,以及如何使用,更多注解以及详细使用可以参考官方文档

  1. @Api:作用于类上,标识此类是Swagger的资源。
  2. @ApiOperation:主要作用于方法上,用于对一个接口进行说明。
  3. @ApiParam:用于方法,参数,字段上,用于对参数进行说明。
  4. @ApiModel:作用于类上,主要用于实体类当接口参数时使用,对实体类进行说明。
  5. @ApiModelProperty:作用于方法和字段上,一般用于实体类的属性说明。
package com.nobody.dto;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

/**
* @Description
* @Author Mr.nobody
* @Date 2021/3/28
* @Version 1.0
*/
@ApiModel(value = "管理员实体")
@Data
public class AdminDTO {
@ApiModelProperty(value = "用户ID", required = true, example = "1548w4dwf7as1a21cv4")
private String personId;
@ApiModelProperty(value = "用户名", example = "陈皮")
private String name;
@ApiModelProperty(value = "用户年龄", required = true, example = "18")
private Integer age;
}
package com.nobody.controller;

import com.nobody.dto.AdminDTO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;
/**
* @Description
* @Author Mr.nobody
* @Date 2021/3/27
* @Version 1.0
*/
@Api(tags = {"管理员相关"})
@RestController
@RequestMapping("admin")
public class AdminController {

@ApiOperation(value = "添加管理员", notes = "注意:只有管理员权限才能添加管理员", produces = "application/json",
consumes = "application/json")
@PostMapping("add")
public AdminDTO add(@ApiParam(value = "参数体", required = true) @RequestBody AdminDTO adminDTO) {
return adminDTO;
}

@ApiOperation(value = "管理员列表", notes = "注意:只有管理员权限才能获取管理员列表", produces = "application/json")
@GetMapping("list")
public List<AdminDTO> list(
@ApiParam(value = "页码,从1开始,1,2,3...", required = true,
example = "1") @RequestParam Integer pageIndex,
@ApiParam(value = "页量", required = true,
example = "10") @RequestParam Integer pageSize) {
return new ArrayList<>();
}
}

Knife4J

Knife4j的前身是swagger-bootstrap-ui,前身swagger-bootstrap-ui是一个纯swagger-ui的ui皮肤项目。

目前已经发行的Knife4j版本,其本身已经引入了springfox,所以我们不需要再单独引入Springfox的具体版本,否则会导致版本冲突。

注意,使用Knife4j2.0.6及以上的版本,SpringBoot的版本必须大于等于2.2.x。

Knife4J的使用极其简单,因为Knife4J将其封装成一个启动器starter,一个可拔插式的组件,只需要引入starter依赖,即可使用。

<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-spring-boot-starter</artifactId>
<version>3.0.2</version>
</dependency>

然后Swagger配置类还是和原生的一模一样,即上面介绍过的Swagger2Config类,注解的使用也是和原生的完全一样。只是项目启动后,接口文档界面的访问地址不一样:

是不是界面比原生的好看多了,还是保持着简洁美观,但是功能更多了。

当我们打开一个接口,显示的界面信息更全了,而且分为3个页面,文档,调试和Open,​如下所示:

支持全局搜索,不用在众多接口中一个一个查找,节省时间。

Knife4j 提供全局参数Debug功能,目前默认提供header(请求头)、query(form)两种方式的入参。添加全局参数后,默认Debug调试tab页会带上该参数。

Knife4j提供导出4种格式的离线文档(Html/Markdown/Word/OpenAPI)

启用个性化配置后,接口Tab标签需关闭后重新打开或者刷新当前页面。

更多Knife4J的详细介绍,可以查看官方介绍文档,很详细​。​https://xiaoym.gitee.io/knife4j/documentation/description.html

前端嫌弃原生Swagger界面太low,于是我给她开通了超级VIP的更多相关文章

  1. 女朋友看了我的博客,说太LOW了,于是我搞了一天~

    持续原创输出,点击上方蓝字关注我 原创博客+1,点击左下角阅读原文进入 目录 前言 如何下载? 配置文件的分类 基本信息配置 修改主题 Next主题样式设置 添加动态背景 修改链接的样式 添加文章搜索 ...

  2. 【转】NGUI研究院之为什么打开界面太慢(十三)

    NGUI打开界面太慢了,起初一直以为是unity的问题,最近经过我的全面测试我发现这和unity没有关系.一般一个比较复杂的界面大概需要150个GameObject  或者 UISprite .我用N ...

  3. 关于 pyspider Web预览界面太小的解决方法

    本人最近在学习pyspider时,遇到Web预览界面太小而无法很好的进行开发,于是在网上搜索解决方法. 准备: css代码: body{margin:;padding:;height:%;overfl ...

  4. java太low,又舍不得jvm平台的丰富资源?试试kotlin吧(一)

    尝试kotlin的起因 因为各种原因(版权,人员招聘),公司的技术体系从c#转到了java,我花了大概两周的时间来上手java,发现java的语法还是非常简单的,基本看着代码就知道什么意思.学习jav ...

  5. 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router

    开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

  6. 前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)

    前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...

  7. 你别告诉我你还在用Excel做数据透视分析吧,太low了!

    来到大数据分析的时代,大量的大数据分析软件涌现,尽管如此,如果今天有人问起最常用的数据透视分析工具是什么的时候,我猜想Excel应该是大家的不二之选. 但是其实我想说,用现在的手机来打比方,Excel ...

  8. 前端面试(原生js篇) - DOM

    根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力 但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重 于是我总结了一些关于 js 基础的面试对话,有的当时 ...

  9. 前端 ajax 改写登录界面

    SSM 整合项目开发到一个阶段,想慢慢地把前台框架等技术引入进来 突然碰到一个困惑好久的问题: ajax 替换原本 form 表单 post 提交登录: 一直 404 错误,心塞.... 最后发现原来 ...

随机推荐

  1. js array & unshift === push head

    js array & unshift === push head const arr = [1, 2, 3]; console.log(arr.unshift(4, 5)); // 5 con ...

  2. TypeScript 4.x Tutorials

    TypeScript 4.x Tutorials TypeScript 4.x 最新教程 https://typescript-4x-tutorials.xgqfrms.xyz/ https://gi ...

  3. TS & error

    TS & error Function implementation is missing or not immediately following the declaration.ts ht ...

  4. iPad pro & Mac mini

    iPad pro & Mac mini

  5. PAUL ADAMS ARCHITECT :阿联酋和美国富人推动英国高端房地产市场

    来自2020年前三季度的数据显示,在英国高端市场上,由国际买家担保的抵押贷款交易数量最多,阿联酋目前处于领先地位.到目前为止,在2020年完成的所有交易中,有35%来自阿联酋. PAUL ADAMS ...

  6. 「NGK每日快讯」12.11日NGK公链第38期官方快讯!

  7. 对DevOps的九大误解,是时候纠正了!

    DevOps是开发和运维的结合,有助于集成和自动化测试过程以及部署存储库,还提供了透明度以及灵活性.DevOps的目标如下: ●更快的上市时间(TTM). ●减少各种修复之间的前置时间.●提高部署频率 ...

  8. Java的稀疏数组的简单代码实现

    目录 Java的稀疏数组的简单代码实现 一.稀疏数组的基本概念 二.稀疏数组的Java代码实现思路 三.稀释数组的Java代码实现 四.结语 Java的稀疏数组的简单代码实现 一.稀疏数组的基本概念 ...

  9. c# winform中窗体切换后释放及防止重复生成

    问题1:窗体切换后如何关闭,并释放资? c# winform中,2个窗体,form1和form2,互相切换的时候执行 this.Hide(); Form2 form2 = new Form2(); f ...

  10. HBase 数据存储结构

    在HBase中, 从逻辑上来讲数据大概就长这样: 单从图中的逻辑模型来看, HBase 和 MySQL 的区别就是: 将不同的列归属与同一个列族下 支持多版本数据 这看着感觉也没有那么太大的区别呀, ...