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

i7uq4tfw  于 2021-07-13  发布在  Java
关注(0)|答案(1)|浏览(341)

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

{
    "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”时,我得到一个错误消息“cannotreadproperty'postalcode'of undefined:我需要在哪里定义这个属性,或者在哪里定义object city,怎么做?

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",
          });
        });
    }

抱歉,我是新来的。。。

<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>
yuvru6vn

yuvru6vn1#

你已经 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

      })

相关问题