前后端分离&ApiFox(mock数据)&Swagger(后端)

前后端分离

前后端分离图片

• 
• 黑马的瑞吉项目是个齐纳后端不分离开发

前后端开发流程图

• 

1. 定制接口: 这里所说的接口不是我们之前在service， mapper层定义的interface； 这里的接口(API接口)就是一个http的请求地址，主要就是去定义：请求路径、请求方式、请求参数、响应数据等内容。(具体接口文档描述的信息, 如上图)

2. 前后端并行开发: 依据定义好的接口信息，前端人员开发前端的代码，服务端人员开发服务端的接口； 在开发中前后端都需要进行测试，后端需要通过对应的工具来进行接口的测试，前端需要根据接口定义的参数进行Mock数据模拟测试。

3. 联调: 当前后端都开发完毕并且自测通过之后，就可以进行前后端的联调测试了，在这一阶段主要就是校验接口的参数格式。

4). 提测: 前后端联调测试通过之后，就可以将项目部署到测试服务器，进行自动化测试了。

前端技术框架

1. Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。(类似于java语言中的JDK)。

2. Vue : 目前最火的的一个前端javaScript框架。

3. ElementUI: 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，通过ElementUI组件可以快速构建项目页面。

4. Mock: 生成随机数据，拦截 Ajax 请求，前端可以借助于Mock生成测试数据进行功能测试。

5. Webpack: webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

ApiFox

• ApiFox概述：通常是前端开发者，用于管理和调试API的工具
• 我的Mac中有安装，后端开发不常用，可以去大致了解下教程
• 可以自定义请求接口，或者批量导入，可以由Swagger生成的OpenAPI文件进行导入

Swagger

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

• 功能主要包含以下几点:
• 1. 使得前后端分离开发更加方便，有利于团队协作
• 2. 接口文档在线自动生成，降低后端开发人员编写接口文档的负担
• 3. 接口功能测试

使用Swagger

• 使用前概述：
  • 直接使用Swagger, 需要按照Swagger的规范定义接口, 实际上就是编写Json文件，编写起来比较繁琐、并不方便, 。而在项目中使用，我们一般会选择一些现成的框架来简化文档的编写，而这些框架是基于Swagger的，如knife4j。
  • knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。

1. 添加knife4依赖

<dependency>
    <groupId>com.github.xiaoymingroupId>
    <artifactId>knife4j-spring-boot-starterartifactId>
    <version>3.0.2version>
dependency>
1
2
3
4
5

2. 导入knife4相关配置类

@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
	
    /**
     * 设置静态资源映射
     * @param registry
     */
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("开始进行静态资源映射...");
        registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
        registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
        /*
        由于Swagger生成的在线文档中，涉及到很多静态资源，这些静态资源需要添加静态资源映射，否则接口文档页面无法访问。
        因此需要在 WebMvcConfig类中的addResourceHandlers方法中增加如下配置。
        下面这些文件在knife4的jar包中已经提供
         */
        registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
    }
	
	
    @Bean
    public Docket createRestApi() {
        // 文档类型
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.itheima.reggie.controller"))
                .paths(PathSelectors.any())
                .build();
    }
	
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("项目名称")
                .version("版本号")
                .description("项目名称接口文档说明")
                .build();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

注意：注意： Docket声明时，指定的有一个包扫描的路径，该路径指定的是Controller所在包的路径。因为Swagger在生成接口文档时，就是根据这里指定的包路径，自动的扫描该包下的@Controller， @RestController， @RequestMapping等SpringMVC的注解，依据这些注解来生成对应的接口文档。
1

3. 添加不需要过滤处理的路径（用于访问Swagger）

// 不需要过滤的路径有以下
"/doc.html",
"/webjars/**",
"/swagger-resources",
"/v2/api-docs"
1
2
3
4
5

• LoginCheckFilter.class

String[] urls = new String[]{
                "/employee/login",
                "/employee/logout",
                "/backend/**",
                "/front/**",
                "/common/**",
                "/user/sendMsg",
                "/user/login",
                //需要将Swagger及Knife4j相关的静态资源直接放行，无需登录即可访问
                "/doc.html",
                "/webjars/**",
                "/swagger-resources",
                "/v2/api-docs"

        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.启动项目 访问http://localhost:8080/doc.html

• 可以参看接口、测试、导出各种形式
  
• 我们可以看到，在所有的Controller中提供的所有的业务增删改查的接口，全部都已经自动生成了，我们通过接口文档可以看到请求的url、请求方式、请求参数、请求实例、响应的参数，响应的示例。 并且呢，我们也可以通过这份在线的接口文档，对接口进行测试。

Swagger注解

为什么需要使用Swagger呢？

• 因为在访问localhost:8080/doc.html时，对controller类，controller类中方法参数，实体类，实体类中参数等，说明的不够详细，我们需要直接添加注解进行说明，也方便导出给开发人员查看

注解说明：

注解使用例子：

实体类：

@Data
@ApiModel(value = "套餐实体类")
public class Setmeal implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "套餐id")
    private Long id;
1
2
3
4
5
6
7
8

Controller类：

@Slf4j
@RestController
@RequestMapping("/setmeal")
@Api(tags = "套餐相关接口")
public class SetmealController {

    @Autowired
    private SetmealService setmealService;
    @Autowired
    private SetmealDishService setmealDishService;
    @Autowired
    private CategoryService categoryService;

    @GetMapping("/page")
    @ApiOperation(value = "套餐分页接口")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "page",value = "页码",required = true),
            @ApiImplicitParam(name = "pageSize",value = "每页记录数",required = true),
            @ApiImplicitParam(name = "name",value = "套餐名称",required = false)
    }
    )
    public R<Page> page(int page, int pageSize, String name) {
        log.info("套餐分页方法被调用:page{},pageSize{},name{}", page,pageSize,name);
        //构造分页器
        Page<Setmeal> setmealPage = new Page<>(page, pageSize);
        Page<SetmealDto> setmealDtoPage = new Page<>();
        //构造条件构造器
        LambdaQueryWrapper<Setmeal> setmealLambdaQueryWrapper = new LambdaQueryWrapper<>();
        //添加过滤条件
        setmealLambdaQueryWrapper.like(name != null, Setmeal::getName, name);
        //添加排序条件
        setmealLambdaQueryWrapper.orderByDesc(Setmeal::getUpdateTime);
        //执行分页查询
        setmealService.page(setmealPage, setmealLambdaQueryWrapper);

        //对象拷贝(不要复制page中的records属性)
        BeanUtils.copyProperties(setmealPage, setmealDtoPage, "records");
        List<Setmeal> records = setmealPage.getRecords();

        List<SetmealDto> setmealDtoList = records.stream().map((item) -> {
            SetmealDto setmealDto = new SetmealDto();
            //对象拷贝
            BeanUtils.copyProperties(item, setmealDto);
            //获取到当前setmeal的categoryId用于查询categoryName
            Long categoryId = item.getCategoryId();
            Category category = categoryService.getById(categoryId);

            if (category != null) {
                //设置categoryName
                setmealDto.setCategoryName(category.getName());
                //返回setmealDto
            }
            return setmealDto;

        }).collect(Collectors.toList());

        setmealDtoPage.setRecords(setmealDtoList);

        return R.success(setmealDtoPage);
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

使用注解后的Swagger 示例：

可见对类、方法、参数有了具体的描述，同样导出的接口文件也会有描述