vue如何把一个表单里的两个实体类分开传参，后端的控制层又该如何接收

在 Vue 中，可以使用 v-model 绑定表单元素的数据，例如：

<template>
  <form>
    <label>
      名字：
      <input type="text" v-model="user.name">
    </label>
    <label>
      年龄：
      <input type="number" v-model="user.age">
    </label>
    <label>
      书籍：
      <input type="text" v-model="book.title">
    </label>
  </form>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: ''
      },
      book: {
        title: ''
      }
    }
  },
  methods: {
    submit() {
      this.$http.post('/api/add', {
        user: this.user,
        book: this.book
      }).then(response => {
        console.log(response.data)
      })
    }
  }
}
</script>

在后端控制层，可以使用注解或者直接在参数中声明实体类接收参数，例如：

@RestController
@RequestMapping("/api")
public class ApiController {

    @PostMapping("/add")
    public void add(@RequestBody AddForm form) {
        User user = form.getUser();
        Book book = form.getBook();
        // ...
    }
    
    public static class AddForm {
        private User user;
        private Book book;
        
        // getters and setters
    }
    
    public static class User {
        private String name;
        private Integer age;
        
        // getters and setters
    }
    
    public static class Book {
        private String title;
        
        // getters and setters
    }
}