深夜灵感——解决Vue+ajax向SpringMVC中传递嵌套JSON对象报400异常的问题

项目架构：Vue+Ajax+SpringMVC+....

涉及表：学生表+班级表

面临的问题：ajax向SpringMVC方法传递学生对象时（学生对象中有个Clazz类型的属性，表示班级信息），提示400异常，Tomcat控制台提示信息如下：

Field error in object 'stu' on field 'clazz': rejected value [{"id":2,"name":null}]; 
codes [typeMismatch.stu.clazz,typeMismatch.clazz,typeMismatch.com.baiz.entity.Clazz,typeMismatch]; 
arguments[
org.springframework.context.support.DefaultMessageSourceResolvable: codes [stu.clazz,clazz]; 
arguments []; 
default message [clazz]]; 
default message [Failed to convert property value of type 'java.lang.String' to required type 'com.baiz.entity.Clazz' for property 'clazz'; 
nested exception is java.lang.IllegalStateException: 
    Cannot convert value of type 'java.lang.String' to required type 'com.baiz.entity.Clazz' for property 'clazz': no matching editors or conversion strategy found]]

 

 经过了多次尝试，小编发现请求路径写成下面这种形式可以实现

http://localhost:8989/backend/stu/update.do?id=1&name=qq&age=20&sex=1&cid=1&clazz.id=1&clazz.name=2009班

 

解决方案

应用需求：希望stu中Clazz类型的属性值，传到后台控制层中

代码如下：

this.axios({
            method:"get",
            url:"/stu/update.do",
            params:{
              id:this.stu.id,
              name:this.stu.name,
              age:this.stu.age,
              sex:this.stu.sex,
              cid:this.stu.cid,
             // 将属性用单引号引住，后台即可接收到
             'clazz.id':this.stu.clazz.id,
              //同上
             'clazz.name':this.stu.clazz.name
            }
          }).then((resp)=>{
            this.$router.push("/StuList")
          })

哈哈哈，不瞒你说，虽然有点麻烦，但是目前小编觉得挺有效果的。由于小编的处于起步阶段，暂时只能想出这个方法，看完代码勿喷。如果你有好的方法，欢迎评论区留言

附录：实体类和控制层的核心代码

实体类

//学生 
public class Stu {
     private Integer id;
     private String name;
     private Integer age;
     private Integer sex;
     private Integer cid;
     //班级类
     private Clazz clazz;
     ... ...
  }


//班级
public class Clazz {
    private Integer id;
    private String name;
....
}

控制层方法

....
 @RequestMapping("/stu")
 public class StuController {
 ....
 //修改功能的控制层方法   
    @ResponseBody
    @RequestMapping("/update")
     public boolean update(Stu s){
         //控制台打印接收的学生信息
         System.out.println(s);
        //调用Service层的方法
         ss.update(s);
         //简单的返回true
         return true;
     }
 ....
 }

 

=============================================================================

另外，我在网上搜到可以直接删除属性，小编觉得也是不错的

应用需求：不需要传递班级属性的信息到后台

代码实现：传之前，简单粗暴直接删除clazz属性。代码如下：

 1 save(){
 2     　　//此处打印，clazz有
 3         console.log(this.stu);          
 4     　　//直接删除 clazz
 5         delete this.stu.clazz;
 6     　　//这时候，在看clazz就没有了，请求后台不会报400
 7         console.log(this.stu);
 8         this.axios({
 9             method:"get",
10             url:"/stu/update.do",
11             params:this.stu
12         }).then((resp)=>{
13             this.$router.push("/StuList")
14         })
15 }