JZTXT

前后端分离项目中传值问题

发布时间 2023-11-20 15:53:16作者: OriginCat
在上个月写项目的时候遇到了一个极其离谱的问题就是在前端在向后端提交表单后,后端可以接收到表单,但是表单内容是空的,当时我有限的经验告诉我这是实体对象属性名没有对应导致的,因为我其中一个参数是可以 " 正常接收 " 到数据的,然后我开始修改前后端的实体对象的参数信息,无论我如何修改都没有作用,依然是空数据,于是我开始网络上查询,收到的结果确只有一个 "  驼峰命名  " ,但我也尝试进行了修改,无果后开始静下心来思考问题,于是我开始从PostMan开始测试后端接口,在PostMan测试后发现,测试没有任何问题,可以正常完成功能,于是我开始排查前端代码,由于之前我已经排查过了前后端表单内对象的参数,所以排除参数名的问题,那么问题只有数据传输过程的问题,提交表单的函数使用的是外部函数导入,先贴一下一开始的代码: 
export function feedback(form) {
  return axios.post("/t-feedback/setUp", {
    form}
    )
}

　　由于我之前一直使用的是@RequestParam来传参,所以写习惯了后面的参数加括号,而且再加上我一直学习的是后端,刚开始学习Vue3框架,对于Vue.js不熟悉,导致了这次的眼瞎事件,先贴一下修改后的,再进行解释,

export function feedback(form) {
  return axios.post("/t-feedback/setUp", 
    form
    )
}

由于我们传的是一个对象,不是多个参数属性,不需要使用{}来包裹,包裹之后后端无法识别包裹的数据,它会将这个按属性来与后端第一个参数进行匹配,后端对象根本没有这个属性,所以导致了接受值为空,之前提到过的有一个是属性可以 " 正常接收 ",其实是因为那个属性是整形,当整形接收为空时会默认为0.

总结:

　　当我们进行开发时若要传输一整个对象,则不需要在函数中使用括号将对象包裹,在传输一个或多个属性参数时,则需要使用{}进行包裹.