zoukankan      html  css  js  c++  java
  • 初次尝试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<String , Object>,而get请求需要使用@RequestParam获取指定的参数,如果定义错了,那就会出现空指针
    2. 当请求是一个put、delete、post时,内部元素的数据类型保持前端赋予一个数据类型,取出来是一个Object进行强转就好了,而当请求是get请求时,一样的操作会出现转换异常,因为get请求是附着在地址上发送的,无论前端添加时是什么类型,都会变成String型,所以要先强转为String再将他转化为后端需要的类型,就可以解决数据类型转换的问题
  • 相关阅读:
    java jdk1.8 32/64位 官方绿色版下载附安装教程
    坡度常用的表示方法
    就此道别
    阿里巴巴矢量图标库(iconfont)批量全选的方法
    thinkphp6.0 集成Alipay 手机和电脑端支付的方法
    法定的属于我的第23个年头已经结束,在今天迎来第24年的第一天。
    世界地图展开图,来自 Simon's World Map
    thinkphp6.0 composer 安装 web-token/jwt-framework 常见出错原因分析及解决方法
    thinkphp6 常用方法文档
    Python获取列表中的最后一个或者倒数第几个的方案
  • 原文地址:https://www.cnblogs.com/JIATCODE/p/13220194.html
Copyright © 2011-2022 走看看