初次尝试rest风格的前后端分离项目体验总结

记录一下第一次开发前后端分离项目的一些感悟吧,防止以后再踩坑(虽然都是写明显的坑,博主比较笨)
背景:项目使用的是Vue+Spring Boot的模式,接口实现rest风格,数据库框架整合Mybatis

实现前后端的数据对接(端口不一致、接口与请求一致,接口的定义唯一,json类型返回)

该项目是一个前后端分离且rest风格的项目,前后端分离的特点是前端和后端的工作完全分离,不互相依赖,后端为前端提供获取json数据的接口,前端要给后端传入请求必要的参数,关于如何正确的匹配到接口成功传输数据成为我们一开始的问题,以下是我们总结出来的实现注意事项:

  1. 在同一个设备下进行结合测试时,注意前后端的运行端口不能一致,各自运行。
  2. 前端发送的请求有两个注意点,一个是请求方式,要与后端目标接口的请求方式一致遵守rest风格;二是请求地址也要与后端目标接口的接受地址一致。只有以上两点满足时,前端和后端才能正确的对接数据。
  3. 后端接口的是springBoot中标注了@RequestMapper的方法,rest风格定制时,使用的是@GetMapper(以及其他三种对应的注解),在rest风格下,接口的请求地址和请求方式必须唯一,不能出现两个接口的请求方法和地址一致,否则引发前端找到多个相同接口的情况。
  4. 后端接口在给前端发送数据时,一定要将数据以json的形式发送,实现方式是在对应接口上添加@ResponseBody或者在整个类上将@Controller改为@RestController即可
  5. 由于前后端的端口不一致,会出现跨域问题,因此需要在springboot中编写一个配置类,实现WebMvcConfigurer接口,主要是实现addCorsMappings方法, 在其中配置允许跨域的请求地址以及请求类型即可,记得在配置类上加@Configuration注解。

没有前后端模拟测试,工作效率低

在项目开始阶段,由于习惯了以前前后端耦合的开发模式,在前后端各自完成某个模块时,需要进行前后端结合测试就无法快速进行,十分的麻烦

随后解决的方式是利用一些工具来模拟数据:

​ 后端借用postman等请求模拟数据自定义发送某个请求,模拟前端获取数据的操作,来检查项目接口返回的数据是否为我们期望的结果,以便做出调整更改,无需再使用前端来发送请求测试。

​ 前端Vue框架支持后台数据模拟功能,不过我不会,还要学习。

get请求的数据类型引发的问题

在各个模块测试过程中,我们发现多次出现空指针异常和转换异常,数据的返回以及前端的发送都没有问题,究其原因,发现问题出现在后端接受请求获取参数的时候,出现数据类型转换的问题

  1. 后端接受请求时,从前端请求体中获取参数的方法和请求方式有关,当请求是一个put、delete、post时,参数的获取要使用@RequestBody得到参数集合Map,而get请求需要使用@RequestParam获取指定的参数,如果定义错了,那就会出现空指针
  2. 当请求是一个put、delete、post时,内部元素的数据类型保持前端赋予一个数据类型,取出来是一个Object进行强转就好了,而当请求是get请求时,一样的操作会出现转换异常,因为get请求是附着在地址上发送的,无论前端添加时是什么类型,都会变成String型,所以要先强转为String再将他转化为后端需要的类型,就可以解决数据类型转换的问题

你可能感兴趣的:(初次尝试rest风格的前后端分离项目体验总结)