在当下这个先后端分离的技术趋势下,前端工程师过分依赖后端工程师的接口和数据,给开发带来了两大问题:html
这是不少公司先后端分离以后带来的困扰,那怎么来解决这些问题?前端
问题一的通常解决方案:后端团队共同维护一个在线文档,每次改接口再去改对应的文档,但不免会遗漏,花的大力气但却效果平平。java
问题二的通常解决方案:本身搭建一个Mock服务器,而后一个接口一个接口手动去录规则,仍是一个费力的体力活。git
那有没有最优的解决方案,来解决以上两个问题呢?答案是确定的,那就是将要登场的“Swagger”和“Easy Mock”。github
Swagger是全球最流行的接口文档自动生成和测试的框架,几乎支持全部的开发语言。web
Swagger官网地址:https://swagger.io/spring
Easy Mock是一个可视化,而且能快速生成 模拟数据 的持久化服务。后端
Easy Mock能一键导入Swagger全部接口,省去了手动录制接口的麻烦,并且可以完美的适配Swagger中的代码注释,可谓开发利器。api
Easy Mock数据是保存在云端的,并且能够建立团队项目,能够真正的实现前端脱离后端进行项目开发。浏览器
接下来一块儿来看看怎么在项目中集成Swagger和Easy Mock吧。
本文介绍的Swagger是基于Spring Boot框架的,一块儿来看具体的实现步骤。
配置pom.xml,添加以下代码:
<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>
其中:
更多版本请访问:
springfox-swagger2:http://mvnrepository.com/artifact/io.springfox/springfox-swagger2
springfox-swagger-ui:http://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui
在源码的根目录也就是Appliction.java的同级目录,建立Java类“SwaggerConfig.java”(命名无所谓),代码以下:
import org.springframework.boot.autoconfigure.condition.ConditionalOnExpression; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import springfox.documentation.service.ApiInfo; import springfox.documentation.spi.DocumentationType; import springfox.documentation.spring.web.plugins.Docket; import springfox.documentation.swagger2.annotations.EnableSwagger2; import static springfox.documentation.builders.PathSelectors.regex; @Configuration @EnableSwagger2 @ConditionalOnExpression("${swagger.enable:true}") public class SwaggerConfig { @Bean public Docket swaggerSpringMvcPlugin() { ApiInfo apiInfo = new ApiInfo( "Spring Boot APIs", "Spring Boot + Swagger2", "1.0.0", null, "王磊的博客", "做者:王磊", "http://www.apigo.cn/"); Docket docket = new Docket(DocumentationType.SWAGGER_2) .select() .paths(regex("/api/.*")) .build() .apiInfo(apiInfo) .useDefaultResponseMessages(false); return docket; } }
其中“@ConditionalOnExpression”为Spring的注解,用户是否实例化本类,用因而否启用Swagger的判断(生产环境须要屏蔽Swagger)。
是否启用Swagger是在application.properties文件里配置的,配置以下:
swagger.enable=true
生产环境禁用,设置为false便可。
完成以上三个步骤,已经完成了Spring Boot对Swagger的集成,可是文档不够友好,好比类、接口的中文说明、参数的说明,是没有的,须要在代码中完成。
以下代码:
@RestController @RequestMapping("/api/user") @Api(tags = "用户控制器") public class UserController { @ApiOperation(value = "打招呼", notes = "测试方法") @ApiImplicitParam(name = "name", value = "姓名") @RequestMapping(value = "/sayhi", method = RequestMethod.POST) public String sayHi(String name) { return "Hello," + name; } @ApiOperation(value = "获取全部用户", notes = "查询分页数据") @RequestMapping(value = "/getall", method = RequestMethod.POST) public String getAll() { return "全部用户"; } }
写完代码运行项目,在浏览器输入:http://localhost:8080/swagger-ui.html 查看添加注释的效果,以下图:
其中@Api是用来描述类的,@ApiOperation是用来描述方法的,@ApiImplicitParam是用来描述参数的,更多注解说明请看下文。
示例源码下载:https://github.com/vipstone/springboot-example/tree/master/springboot-swagger
咱们如今已经对Swagger有了初步的认识,本节重点来看Swagger注解的使用。
Swagger注解的做用是给接口添加注释的。
@Api:用来描述类的,属性以下:
代码示例:
@Api(tags = "文章接口")
@ApiOperation:用来描述方法的,属性以下:
代码示例:
@ApiOperation(value = "获取全部文章", notes = "查询分页数据")
效果以下图:
@ApiImplicitParams:描述多参数
@ApiImplicitParam:描述单参数
属性以下:
代码示例:
@ApiImplicitParams({
@ApiImplicitParam(name = "name", value = "姓名", required = true, paramType = "form"),
@ApiImplicitParam(name = "age", value = "年龄", required = true, paramType = "form"),
})
效果以下图:
@ApiModel:实体类名描述,属性以下:
@ApiModelProperty:字段描述,属性以下:
示例以下:
@ApiModel(description= "返回响应数据") public class RestMessage implements Serializable{ @ApiModelProperty(value = "是否成功") private boolean success=true; @ApiModelProperty(value = "返回对象") private Object data; @ApiModelProperty(value = "错误编号") private Integer errCode; @ApiModelProperty(value = "错误信息") private String message; /* getter/setter */ }
Easy Mock是在线的Mock(模拟)服务器,注册帐号便可使用,数据存储云端,使用简单不须要在本地进行任何配置,具体操做步骤以下文。
浏览器输入:https://easy-mock.com/login 注册帐号
进入管理页面以后,点击演示我的演示项目(默认建立的能够直接拿来用),以下图:
进入接口列表,点击设置=>点击Swagger Docs API选择Upload(本地文件上传),以下图:
浏览器访问:http://localhost:8080/v2/api-docs 就看到项目的全部接口JSON格式的,右键另存为文件,以下图:
继续4.2的操做,上传刚刚保存的JSON文件到Easy Mock。
保存完JSON数据以后就返回到项目的设置页了,这个时候点击“同步Swagger”就看到全部接口了。以下图:
到此为全部的接口已经导入了,能够点击接口列表右侧的复制按钮,进行愉快的调用了。
这个时候就能够彻底脱离后端了,点击接口详情,能够看出Easy Mock完美识别了Swagger注释也有了,以下图:
接口的调用没问题,接下来就是修改操做数据了,点击右侧的相应接口的修改按钮,以下图:
进入编辑页面,你如今编辑的数据就是接口要返回的数据,数据是JSON格式的,而且是在线保存云端,无须担忧数据丢失,以下图:
编辑完直接点击更新接口便可,注意编辑页面还有一个预览按钮,点入能够模拟请求,这下连Postman都省了,效果以下:
到此为止全部内容已经演示完了,咱们解决先后端分离带来接口管理难、数据操做难的问题。自动生成接口文档、一键模拟数据,让咱们再也不依赖后端,只专一前端的业务,等后端把接口写完以后,再进行联合调试就能够了,这样咱们就不费吹灰之力搞定了全部难题,而且灵活的配置让咱们能够不影响和污染生产环境,生产环境设置禁用Swagger便可,而且有了预览功能以后咱们甚至连Postman都省了。
参考资料
swagger2 注解说明:https://blog.csdn.net/xiaojin21cen/article/details/78654652