Spring 如何将包含对象的对象发送到服务器Vue.js 3

我需要将对象发送到服务器：

{
    "id": "null",
    "indexNumber": "1454",
    "indexYear": "2021",
    "firstName": "John",
    "lastName": "Doe",
    "email": "john@doe.com",
    "address": "John Doe Street 1231",
   
    "city": {
        "postalCode": 10000,
        "name": "New York"
    } ,
    "currentYearOfStudy": 1
}

当我使用postman测试它时，一切正常，但当我尝试从前端发送对象“student”时，我收到错误消息“无法读取未定义的属性'postalCode'： 我需要在哪里定义此属性，或者在哪里定义对象城市，如何定义

 inserStudent() {
      StudentService.insertStudent({

        indexNumber: this.indexNumber,
        indexYear: this.indexYear,
        firstName: this.firstName,
        lastName: this.lastName,
        email: this.email,
        address: this.address,
        postalCode: this.city.postalCode,
        name: this.city.name,
        currentYearOfStudy: this.currentYearOfStudy

      })
        .then((response) => {
          console.log("Student inserted!" + response);
          addMessage({
            message: "Student inserted!",
            type: "success",
            title: "STUDENT",
          });
        })
        .catch((error) => {
          addMessage({
            message: "Insert was not successful:" + error,
            type: "danger",
            title: "Insert student",
          });
        });
    }

对不起，我是vue的新手

<template>
  <div class="form-container m-4 col-6 col-md-8 col-sm-10 mx-auto" display-inline-block>
    <h3 v-if="actionType === 'new'">New Student</h3>
    <h3 v-else>Edit Student</h3>
    <MyInputComponent
      name="indexNumber"
      label="Index Number"
      v-model="indexNumber"
      :vcomp="v$.indexNumber"
    ></MyInputComponent>

    <MyInputComponent
      name="indexYear"
      label="Index Year"
      v-model="indexYear"
      :vcomp="v$.indexYear" >
    </MyInputComponent>

    <MyInputComponent
      name="firstName"
      label="First Name"
      v-model="firstName"
      :vcomp="v$.firstName"
    >
    </MyInputComponent>
    <MyInputComponent
      name="lastName"
      label="Last Name"
      v-model="lastName"
      :vcomp="v$.lastName"
    >
    </MyInputComponent>
    <MyInputComponent
      name="email"
      label="Email"
      v-model="email"
      :vcomp="v$.email"
    >
    </MyInputComponent>
    <MyInputComponent
      name="address"
      label="Address"
      v-model="address"
      :vcomp="v$.address"
    >
      </MyInputComponent>
     <MyInputComponent
      name="postalCode"
      label="Postal Code"
      v-model="postalCode"
      :vcomp="v$.postalCode"
    >
      </MyInputComponent>
     <MyInputComponent
      name="name"
      label="City Name"
      v-model="name"
      :vcomp="v$.name"
    >
  </MyInputComponent>
    <MyInputComponent
      name="currentYearOfStudy"
      label="Curent Year Of Study"
      v-model="currentYearOfStudy"
      :vcomp="v$.currentYearOfStudy"
    >
    </MyInputComponent>
    <div class="d-flex flex-row-reverse">
      <button class="btn btn-outline-primary" @click="saveStudent">Save</button>
    </div>
  </div>
</template>

<script>
import useValidate from "@vuelidate/core";
import {
  required,
  minLength,
  maxLength,
  email,
  maxValue,
  minValue,
} from "@vuelidate/validators";
import MyInputComponent from "@/components/inputs/MyInputControl.vue";
import StudentService from "@/services/StudentService.js";
import { addMessage } from "@/main.js";

export default {
   components: { MyInputComponent },
  props: {
    studentId: {
      type: String,    
    },
    
    actionType: {
      type: String,
    },
    
  },
  created() {
    if (this.studentId) {
      StudentService.getStudent(this.studentId).then((response) => {
        const student = response.data;
        this.indexNumber = student.indexNumber;
        this.indexYear = student.indexYear;
        this.firstName = student.firstName;
        this.lastName = student.lastName;
        this.email = student.email;
        this.address = student.address;
        this.postalCode = student.city.postalCode;
        this.name = student.city.name;
        this.currentYearOfStudy = student.currentYearOfStudy;
        
      });
    }
  },
  data() {
    
    return {
      v$: useValidate(),
      id:null,
      indexNumber: "",
      indexYear: "",
      firstName: "",
      lastName: "",
      email: "",
      address: "",
      postalCode: "",
      name: "",
      currentYearOfStudy: null,
      randomNumber:''
    };
  },
  validations() {
    return {
       
      indexNumber: {
        required,
        minLength: minLength(4),
        maxLength: maxLength(4),

      },
      indexYear: {
        required,
        minLength: minLength(4),
        maxLength: maxLength(4),

      },
      firstName: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(30),
      },
      lastName: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(30),
      },
      email: {
        required,
        email,
      },
      address: {
        required,
        minLength: minLength(3),
      },
      postalCode:{
        required,
        minValue: minValue(9999),
        maxValue: maxValue(100000),
      },
      name:{
        required,
        minLength: minLength(3),
        maxLength: maxLength(30)
      },
      currentYearOfStudy: {
        required,
        minValue: minValue(1),
        maxValue: maxValue(5),
      },
    };
  },
  methods: {
   

    saveStudent() {
      if (this.actionType && this.actionType === "new") {
        this.inserStudent();
      } else {
        this.updateStudent();
      }
    },
    inserStudent() {
      StudentService.insertStudent({

        indexNumber: this.indexNumber,
        indexYear: this.indexYear,
        firstName: this.firstName,
        lastName: this.lastName,
        email: this.email,
        address: this.address,
        postalCode: this.city.postalCode,
        name: this.city.name,
        currentYearOfStudy: this.currentYearOfStudy

      })
        .then((response) => {
          console.log("Student inserted!" + response);
          addMessage({
            message: "Student inserted!",
            type: "success",
            title: "STUDENT",
          });
        })
        .catch((error) => {
          addMessage({
            message: "Insert was not successful:" + error,
            type: "danger",
            title: "Insert student",
          });
        });
    },
    updateStudent() {
      StudentService.editStudent({
       
        id: this.studentId,
        indexNumber: this.indexNumber,
        indexYear: this.indexYear,
        firstName: this.firstName,
        lastName: this.lastName,
        email: this.email,
        address: this.address,
        postalCode: this.city.postalCode,
        name: this.city.name,
        currentYearOfStudy: this.currentYearOfStudy,
        
      })
        .then((response) => {
          
          console.log("Student inserted" + response);
          addMessage({
            message: "Student updated",
            type: "success",
            title: "STUDENT",
          });
        })
        .catch((error) => {
         
          addMessage({
            
            message: "Update was not successful:" + error,
            type: "danger",
            title: "Update student",
          });
        });
    },
  },
};
</script>

新生
编辑学生
拯救
从“@vuelidate/core”导入useValidate；
进口{
必修的，
minLength，
最大长度，
电子邮件，
maxValue，
minValue，
}来自“@vuelidate/validators”；
从“@/components/inputs/MyInputControl.vue”导入MyInputComponent；
从“@/services/StudentService.js”导入StudentService；
从“@/main.js”导入{addMessage}；
导出默认值{
组件：{MyInputComponent}，
道具：{
学生ID：{
类型：字符串，
},
动作类型：{
类型：字符串，
},
},
创建（）{
如果（这个学生ID）{
StudentService.getStudent（this.studentId）.then（（响应）=>{
const student=response.data；
this.indexNumber=student.indexNumber；
this.indexeer=student.indexeer；
this.firstName=student.firstName；
this.lastName=student.lastName；
this.email=student.email；
this.address=student.address；
this.postalCode=student.city.postalCode；
this.name=student.city.name；
this.currentYearOfStudy=student.currentYearOfStudy；
});
}
},
数据（）{
返回{
v$：useValidate（），
id:null，
索引编号：“”，
指数：“，
名字：“，
姓氏：“，
电邮：“，
地址：“，
后代码：“，
姓名：“，
currentYearOfStudy:空，
随机数：“”
};
},
验证（）{
返回{
索引编号：{
必修的，
minLength:minLength（4），
maxLength:maxLength（4），
},
指数：{
必修的，
minLength:minLength（4），
maxLength:maxLength（4），
},
名字：{
必修的，
minLength:minLength（3），
maxLength:maxLength（30），
},
姓氏：{
必修的，
minLength:minLength（3），
maxLength:maxLength（30），
},
电邮：{
必修的，
电子邮件，
},
地址:{
必修的，
minLength:minLength（3），
},
后代码：{
必修的，
minValue:minValue（9999），
maxValue:maxValue（100000），
},
姓名：{
必修的，
minLength:minLength（3），
maxLength:maxLength（30）
},
研究的当前年份：{
必修的，
minValue:minValue（1），
最大值：最大值（5），
},
};
},
方法：{
saveStudent（）{
if（this.actionType&&this.actionType==“新建”）{
这个。inserStudent（）；
}否则{
this.updateStudent（）；
}
},
见习生{
StudentService.insertStudent({
indexNumber:this.indexNumber，
这个，
名字：这个，名字，
lastName:this.lastName，
电子邮件：this.email，
地址：这个地址，
postalCode:this.city.postalCode，
姓名：this.city.name，
currentYearOfStudy:this.currentYearOfStudy
})
。然后（（响应）=>{
日志（“插入学生！”+响应）；
添加消息({
信息：“插入学生！”，
键入：“成功”，
标题：“学生”，
});
})
.catch（（错误）=>{
添加消息({
消息：“插入未成功：”+错误，
类型：“危险”，
标题：“插入学生”，
});
});
},
updateStudent（）{
学生服务({
id:这个是学生id，
indexNumber:this.indexNumber，
这个，
名字：这个，名字，
lastName:this.lastName，
电子邮件：this.email，
地址：这个地址，
postalCode:this.city.postalCode，
姓名：this.city.name，
当前学习年度：这个。当前学习年度，
})
。然后（（响应）=>{
控制台日志（“学生插入”+响应）；
添加消息({
信息：“学生更新”，
键入：“成功”，
标题：“学生”，
});
})
.catch（（错误）=>{
添加消息({
消息：“更新未成功：”+错误，
类型：“危险”，
标题：“更新学生”，
});
});
},
},
};

您已经在数据属性中定义了

postalCode

和

name

，而不嵌套它们，因此您可以在发送请求时将它们嵌套到城市字段：

      StudentService.insertStudent({

        indexNumber: this.indexNumber,
        indexYear: this.indexYear,
        firstName: this.firstName,
        lastName: this.lastName,
        email: this.email,
        address: this.address,
         city:{
            postalCode: this.postalCode,
            name: this.name,
          },
        currentYearOfStudy: this.currentYearOfStudy

      })