前后端分离的方式开发

是前端由前端团队负责开发,后端负责接口的开发,这种开发方式有2点好处:


  • 扬长避短,每个团队做自己擅长的事情
  • 前后端并行开发,需要事先约定好接口地址以及各种参数、响应数据结构等
    YApi和Swagger前后端分离开发_前后端分离

对于接口的定义我们采用YApi进行管理,YApi是一个开源的接口定义、管理、提供mock数据的管理平台。


地址:https://mock-java.itheima.net/


接口定义:

mock数据,YApi提供了mock功能,就是模拟服务端返回测试数据:

YApi和Swagger前后端分离开发_接口文档_02

YApi和Swagger前后端分离开发_数据_03

YApi和Swagger前后端分离开发_前后端分离_04

YApi和Swagger前后端分离开发_数据_05

还可以运行http请求(需要在Chrome中安装支持跨域扩展 ​javascript:void(0)">​javascript:void(0)​):

YApi和Swagger前后端分离开发_前后端分离_06

YApi和Swagger前后端分离开发_接口文档_07

一、Swagger2介绍

https://swagger.io/

前后端分离开发模式中,api文档是最好的沟通方式。

YApi和Swagger前后端分离开发_微服务_08

Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。

及时性 (接口变更后,能够及时准确地通知相关前后端开发人员)规范性 (并且保证接口的规范性,如接口的地址,请求方式,参数及响应格式和错误信息)一致性 (接口信息一致,不会出现因开发人员拿到的文档版本不一致,而出现分歧)可测性 (直接在接口文档上进行测试,以方便理解业务)


  • 前端工程师编写接口文档(使用swagger2编辑器或其他接口生成工具)
  • 交给后端工程师
  • 根据swagger文档编写后端接口
  • 最终根据生成的swagger文件进行接口联调

配置Swagger2

1、依赖

common中添加依赖

<!--swagger-->
<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>

2、创建Swagger2配置文件

在service_base中创建Swagger2Config

package com.atguigu.guli.service.base.config;
@Configuration
@EnableSwagger2
public class Swagger2Config {
@Bean
public Docket webApiConfig(){
return new Docket(DocumentationType.SWAGGER_2)
.groupName("webApi")
.apiInfo(webApiInfo())
.select()
//只显示api路径下的页面
.paths(Predicates.and(PathSelectors.regex("/api/.*")))
.build();
}
@Bean
public Docket adminApiConfig(){
return new Docket(DocumentationType.SWAGGER_2)
.groupName("adminApi")
.apiInfo(adminApiInfo())
.select()
//只显示admin路径下的页面
.paths(Predicates.and(PathSelectors.regex("/admin/.*")))
.build();
}
private ApiInfo webApiInfo(){
return new ApiInfoBuilder()
.title("网站-API文档")
.description("本文档描述了网站微服务接口定义")
.version("1.0")
.contact(new Contact("Helen", "http://atguigu.com", "55317332@qq.com"))
.build();
}
private ApiInfo adminApiInfo(){
return new ApiInfoBuilder()
.title("后台管理系统-API文档")
.description("本文档描述了后台管理系统微服务接口定义")
.version("1.0")
.contact(new Contact("Helen", "http://atguigu.com", "55317332@qq.com"))
.build();
}
}

3、重启服务器查看接口

​http://localhost:8110/swagger-ui.html​

三、常见注解

1、API模型

entity的实体类中可以添加一些自定义设置,例如:

定义样例数据

@ApiModelProperty(value = "入驻时间", example = "2010-01-01")
@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
private Date joinDate;
@ApiModelProperty(value = "创建时间", example = "2019-01-01 8:00:00")
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@ApiModelProperty(value = "更新时间", example = "2019-01-01 8:00:00")
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;

2、定义接口说明和参数说明

定义在类上:@Api

定义在方法上:@ApiOperation

定义在参数上:@ApiParam

package com.atguigu.guli.service.edu.controller.admin;
@Api(description = "讲师管理")
@RestController
@RequestMapping("/admin/edu/teacher")
public class TeacherController {
@Autowired
private TeacherService teacherService;
@ApiOperation("所有讲师列表")
@GetMapping("list")
public List<Teacher> list(){
return teacherService.list(null);
}
@ApiOperation(value = "根据ID删除讲师", notes = "根据ID删除讲师")
@DeleteMapping("remove/{id}")
public boolean removeById(@ApiParam(value = "讲师ID", required = true) @PathVariable String id){
return teacherService.removeById(id);
}
}