新手初次尝试前后端分离项目的开发,记记心得

记录一下第一次开发前后端分离项目的一些感悟吧,防止以后再踩坑(虽然都是写明显的坑,博主比较笨)
背景:项目使用的是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再将他转化为后端需要的类型,就可以解决数据类型转换的问题
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于前后端分离项目的运行,有几种常见的方法。 一种方法是将前端和后端分别开发为两个独立的项目,并在开发环境中使用不同的端口来运行。这种方法适合简单的项目或者新手,因为它相对简单易懂。你可以单独运行前端项目和后端项目的jar包,分别启动前端和后端服务器。这种方法的缺点是需要占用两个端口,前端使用一个端口,后端使用另一个端口。 另一种方法是将前端项目打包成静态文件,然后将其作为后端项目的一部分。这样可以将前后端合并为一个项目,并在同一个端口上运行。首先,你需要编好前端和后端的代码,并定义好前后端的接口。接下来,你可以将前端项目打包成静态文件,然后将其放在后端项目中的静态文件夹中。最后,将整个后端项目部署到应用服务器中。这种方法的优点是可以减少端口的使用,但缺点是相对复杂一些。 还有一种方法是使用Nginx来实现前后端分离项目的运行。首先,你需要配置好Nginx,将前端项目和后端项目分别设置为不同的访问路径。然后,运行Nginx,访问指定的路径即可进入主页。这种方法的优点是可以更方便地管理前后端的访问路径,但需要一定的配置和管理。 综上所述,前后端分离项目的运行方法有多种选择,根据项目的需求和个人偏好选择适合的方法即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [前后端分离项目的部署方法——vue cli4+springboot](https://blog.csdn.net/jiyuzzz/article/details/121298192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值