前台是vue+element,后台是spring boot搭建的ssm项目,现在的需求是前台表单需要传递相关java bean到后台,因为不熟悉纯前后端分离,所以用的是传统的jsp+Vue+element
通过各种方法和百度,要么是400后台解析错误,要么是传过去的数据都是null,因为页面其他方法都是用axios,所以也不想用ajax,最终想了一个曲线救国的方法:
思路:前台传递json对象,后台接收json对象,通过com.google.gson.Gson把json对象转换成Java bean
这里需要注意几个坑:
1:前台的数据必须转成json对象JSON.parse(JSON.stringify(formData))
2:加上头部信息:
headers:{ 'Content-Type': 'application/json;charset=UTF-8' }
3:后台用@RequestBody接收
下面是源码:标红的是需要注意的地方
前台:
editSubmit:function(){
let formData=this.form;
formData.ROLE_ID=this.role_id;
let adminInfo=JSON.parse(JSON.stringify(formData));//需要转成json对象
axios.post('${ctx}/updateAdminInfo',adminInfo,
{
headers:{
'Content-Type': 'application/json;charset=UTF-8' //这里加上头部信息
}
}
)
.then(
function (params) {
if(params.data.code=='C1000'){
this.$message.success("更新成功");
//重新加载数据
}else{
this.$message.error("更新失败");
}
})
},
后台:
@RequestMapping(value = "/updateAdminInfo" ,method = RequestMethod.POST)
public String update( @RequestBody String adminStr) {Gson gson= new Gson();
AdminInfo admin = gson.fromJson(adminStr, AdminInfo.class);
//相关代码实现省略
//..................
return null;}
目前这种方法可行,刚接触Vue,其他的不清楚了