vue+springboot，如何实现前端提交一张表单，后端控制层接收两个实体类插入数据到两张数据表中

我把用户信息分成了账号表和信息表，如图

我在前端中想用一张表单填完所有的信息点击保存后把数据提交到后端插入两张数据库表，但不知道为什么数据库里的数据都为null，如图

我的前端代码是这样的

<el-button class="color2" icon="el-icon-circle-plus" @click="addUserFormShow = true">添加用户el-button>

      <el-dialog title="添加用户信息" :visible.sync="addUserFormShow">
        <el-form :model="adduserform">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="adduserform.username" autocomplete="off">el-input>
          el-form-item>
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="adduserform.account" autocomplete="off">el-input>
          el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="adduserform.password" autocomplete="off">el-input>
          el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="adduserform.gender" autocomplete="off">el-input>
          el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="adduserform.tel" autocomplete="off">el-input>
          el-form-item>
          <el-form-item label="用户类型" :label-width="formLabelWidth">
            <el-select v-model="adduserform.position_id" placeholder="请选择用户的类型">
              <el-option label="管理员" value="1">el-option>
              <el-option label="普通用户" value="2">el-option>
            el-select>
          el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input v-model="adduserform.status" autocomplete="off">el-input>
          el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="adduserform.remark" autocomplete="off">el-input>
          el-form-item>
        el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addUserFormShow = false">取 消el-button>
          <el-button type="primary" @click="saveUser">保存el-button>
        div>
      el-dialog>
<script>
export default {
  data() {
    return {
      
      addUserFormShow: false,
      
      adduserform: {
        username: "",
        account: "",
        password: "",
        gender: "",
        tel: "",
        position_id: 0,
        status: "",
        remark: "",
      },

    };
  },
  methods: {
   
    async saveUser() {
      const res = await this.$axios.post(
        "http://localhost:8801/saveUser",
        this.adduserform
      );
      if (res) {
        this.$message({
          message: "用户信息添加成功",
          type: "success",
        });
        this.addUserFormShow = false;
        this.loadUser();
        this.adduserform = {};
      }
    },

后端代码是这样的
UserAccount以及User的实体类省略
getter，setter省略,

public class AccountAndUser {
    private UserAccount userAccount;
    private User user;
}

控制器层

@Controller
public class UserAccountController {
@Autowired
        private UserAccountService userAccountService;
//添加新用户
        @PostMapping(value = "saveUser",produces = "application/json;charset=UTF-8")
        @ResponseBody
        public boolean saveUser(@RequestBody AccountAndUser accountAndUser){
            UserAccount userAccount = accountAndUser.getUserAccount();
            User user = accountAndUser.getUser();
            boolean flag = userAccountService.addUser(userAccount,user);
            return flag;
        }
}

service层

@Override
    @Transactional
    public boolean addUser(UserAccount userAccount, User user) {
       try{
           //先添加账户
           userAccountMapper.insertUserAccount(userAccount);
           //再添加用户的其它信息
           userMapper.insertUser(user);
           return true;
       }catch (Exception e){
           e.printStackTrace();
       }
       return false;
    }

两个mapper层

<insert id="insertUserAccount" parameterType="UserAccount">
        insert into user_account (account, password, position_id, status)
        values (#{account},#{password},#{position_id},#{status})
    insert>

<insert id="insertUser" parameterType="User">
        insert into user (username, gender, tel, remark)
        values (#{username},#{gender},#{tel},#{remark})
    insert>

这样做不行吗？要怎么做才可以呢？

前端传参不对，user和userAccount要分开

是前端的问题，现已解决，附上解决代码

<el-button class="color2" icon="el-icon-circle-plus" @click="addUserFormShow = true">添加用户</el-button>
<!-- 添加用户对话框 -->
      <el-dialog title="添加用户信息" :visible.sync="addUserFormShow">
        <el-form :model="adduserform">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="adduserform.user.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="adduserform.userAccount.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="adduserform.userAccount.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="adduserform.user.gender" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="adduserform.user.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户类型" :label-width="formLabelWidth">
            <el-select v-model="adduserform.userAccount.position_id" placeholder="请选择用户的类型">
              <el-option label="管理员" value="1"></el-option>
              <el-option label="普通用户" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input v-model="adduserform.userAccount.status" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="adduserform.user.remark" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addUserFormShow = false">取 消</el-button>
          <el-button type="primary" @click="saveUser">保存</el-button>
        </div>
      </el-dialog>
<script>
export default {
  data() {
    return {
addUserFormShow: false,
adduserform: {
        userAccount:{
          account: "",
          password: "",
          position_id: 0,
          status: "",
        },
        user:{
          username: "",
          gender: "",
          tel: "",
          remark: "",
        }
      },
}；
}，
methods: {
async saveUser() {
      const res = await this.$axios.post(
        "http://localhost:8801/saveUser",
        {
          userAccount:this.adduserform.userAccount,
          user:this.adduserform.user
        }
        
      );
      if (res) {
        this.$message({
          message: "用户信息添加成功",
          type: "success",
        });
        this.addUserFormShow = false;
        this.loadUser();
        this.adduserform.userAccount = {};
        this.adduserform.user = {};
      }
    },
}，
}；