Vue用axios post传递Javabean到后台

前台是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,其他的不清楚了

猜你喜欢

转载自blog.csdn.net/carrybest/article/details/80079364
今日推荐