前后端分离如何提高开发测试效率
三丰 soft张三丰
前后端分离项目
开发步骤:
项目是基于前后端分离的架构进行开发,前后端分离架构总体上包括前端和服务端,通常是多人协作并行开发,对于不同职位的人来说,有不同的侧重点。
1、需求分析
梳理用户的需求,分析业务流程
2、接口定义
根据需求分析定义接口
3、服务端和前端并行开发
依据接口进行服务端接口开发。
前端开发用户操作界面,并请求服务端接口完成业务处理。
4、前后端集成测试
最终前端调用服务端接口完成业务。
详细解读:
架构师工作:
1.需求分析:
是一个必备的技能,通常项目负责人会根据客户的要求详细的了解业务流程,将客户要求的功能转化成自己如何实现的伪代码。
例如:客户:你们的项目需要做一个查询功能:
架构师:首先根据功能设计出来详细的表结构,然后写需求分析。
2.定义接口:
第一步完成数据模型:
完成实体类
做请求类型的模型
package com.zf.framework.domain.cms.request;
import com.zf.framework.model.request.RequestData;
import lombok.Data;
@Data
public class QueryPageRequest extends RequestData {
//站点id
private String siteId;
//页面ID
private String pageId;
//页面名称
private String pageName;
//别名
private String pageAliase;
//模版id
private String templateId;
做响应类型的模型:
第二步设计接口:
例如如下所示:
程序员工作:
3.服务端和前端并行开发
前端:
前端的配置
模块化开发
后端:
后端的配置
模块化开发
4.前后端集成测试
1.swagger
2.postman
前后端请求流程:
前后端分离项目测试
前后端分离后,前端页面默认会访问localhost:{前端ng serve启动的端口号}
http访问的后台默认也是上述前缀地址。
本地连接后台自测时,
要把http访问的后台地址配置加上localhost:{后台启动接口服务的端口}
从而实现本地前后端连接成功。
Swagger进行接口测试
首先,我们先对swagger做一个介绍
在现在前后端分离开发模式中,api文档是最好的沟通方式.所以swagger成了炙手可热的工具了.Swagger是一个规范的和完整的框架,用于生成,描述,调用和可视化RestFul风格的web服务.
特性:
1.及时性(接口变更后,能够及时的准确的通知相关前后端的开发人员)
2.规范性(并且保持接口的规范性,比如说,接口的地址,请求方式,参数及其响应格式和错误信息)
一致性(接口信息一致,不会出现因为开发人员拿到的版本不一致,而出现分歧)
可测性(直接在接口文档上进行测试,以方便理解业务)
整合swagger进行接口测试:
首先我们创建一个公共模块:
以一个maven项目创建.接下来引入依赖:
io.springfox
springfox-swagger2
provided
io.springfox
springfox-swagger-ui
provided
接下来再建一个模块做为common的子模块service_base.
创建包,结构如下:
编写SwaggerConfig代码
import com.google.common.base.Predicates;
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.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
@Configuration //配置类
@EnableSwagger2 //引入Swagger注解
public class SwaggerConfig {
@Bean
public Docket webApiConfig(){
return new Docket(DocumentationType.SWAGGER_2)
.groupName("webApi")
.apiInfo(webApiInfo())
.select()
.paths(Predicates.not(PathSelectors.regex("/admin/.*")))
.paths(Predicates.not(PathSelectors.regex("/error.*")))
.build();
}
private ApiInfo webApiInfo(){
return new ApiInfoBuilder()
.title("中心API文档")
.description("本文档描述了课程中心微服务接口定义")
.version("1.0")
.contact(new Contact("java", "", ""))
.build();
}
}
由于我们的Swager并不在同一个模块中,这么做就是好做一个全局的Swagger,所以我们可以将需要用到Swagger的地方进行配置即可
并且在需要用到的启动类中加上注解:
这样就整合好了,但是我们需要更友好的界面,所以我们就使用一些注解进行swagger中文化.
import com.qiu.eduservice.entity.EduTeacher;
import com.qiu.eduservice.service.EduTeacherService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
*
* 讲师 前端控制器
*
*
* @since 2020-07-23
*/
@Api(description = "讲师管理")
@RestController
@RequestMapping("/eduservice/eduteacher")
public class EduTeacherController {
@Autowired
private EduTeacherService teacherService;
//查询所有的老师的信息,rest风格
@ApiOperation("所有讲师列表")
@GetMapping("findAll")
public List findAllTeacher(){
List list = teacherService.list(null);
return list;
}
//2.逻辑删除讲师的方法,ID需要通过路径传递,@PathVa...就是指明id为path下的
@ApiOperation("逻辑删除讲师")
@DeleteMapping("{id}")
public boolean removeTeacher(@ApiParam(name = "id",value = "讲师ID",required = true)
@PathVariable String id){
boolean flag = teacherService.removeById(id);
return flag;
}
}
这样我们写的方法就在这里面出现了.记住网址;
localhost:(你的端口号)/swagger-ui.html
接触mock
最近在进行项目重构,需要实现前后端分离,所以在开发的过程中就接触到了mock,在使用过程中,也发现它有一些好处,
1. 团队可以并行工作
有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来密切;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试过程中如果遇到依赖接口没有准备好,同样可以借助Mock;不会出现一个团队等待另一个团队的情况。这样的话,开发自测阶段就可以及早开展,从而发现缺陷的时机也提前了,有利于整个产品质量以及进度的保证。
2. 开启TDD模式,即测试驱动开发
单元测试是TDD实现的基石,而TDD经常会碰到协同模块尚未开发完成的情况,但是有了mock,这些一切都不是问题。当接口定义好后,测试人员就可以创建一个Mock,把接口添加到自动化测试环境,提前创建测试。
3. 可以模拟那些无法访问的资源
比如说,你需要调用一个“墙”外的资源来方便自己调试,就可以自己Mock一个。
4. 隔离系统
假如我们需要调用一个post请求,为了获得某个响应,来看当前系统是否能正确处理返回的“响应”,但是这个post请求会造成数据库中数据的污染,那么就可以充分利用Mock,构造一个虚拟的post请求,我们给他指定返回就好了。
5. 可以用来演示
假如我们需要创建一个演示程序,并且做了简单的UI,那么在完全没有开发后端服务的情况下,也可以进行演示。说到演示了,假如你已经做好了一个系统,并且需要给客户进行演示,但是里面有些真实数据并不想让用户看到,那么同样,你可以用Mock接口把这些敏感信息接口全部替换。
6. 测试覆盖度
假如有一个接口,有100个不同类型的返回,我们需要测试它在不同返回下,系统是否能够正常响应,但是有些返回在正常情况下基本不会发生,难道你要千方百计地给系统做各种手脚让他返回以便测试吗?比如,我们需要测试在当接口发生500错误的时候,app是否崩溃,别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock,这一切就都好办了,想要什么返回就模拟什么返回,妈妈再也不用担心我的测试覆盖度了!