YApi和Swagger前后端分离开发

前后端分离的方式开发

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

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

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

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

接口定义：

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




还可以运行http请求（需要在Chrome中安装支持跨域扩展 https://juejin.im/post/6844904057707085832）：

一、Swagger2介绍

https://swagger.io/

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

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);
    }
}