Vue element-ui form 表单 前端提交和后端的接收

一、前端

1、新建弹窗dialog

<el-dialog
        title="添加用户"
        :visible.sync="addDialog"
        width="30%"
        :before-close="handleClose"
        v-dragDialog>
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.pwd" autocomplete="off"  placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="form.role" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialog = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
       </span>
    </el-dialog>

2、在数据（data）里面绑定（return）数据

options: [{
          value: 'user',
          label: '用户'
        }, {
          value: 'admin',
          label: '管理员'
        }],
        role: 'user',
      form: {
        name: '',
        pwd: '',
        role: '',
      },
      formLabelWidth: '120px'

3、在method里新建方法

 addUser() {
      request.post("http://localhost:9090/user/add",this.form).then( res=> {
      console.log(res);
      if (res) {
        this.$message.success("新增成功")
        this.addDialog=false
      }
      else{
        this.$message.error("新增失败")
      }
      // this.tableData = res.records
    })
    },

二、后端

1、在配置好mybatis-plus的前提下

2、在控制类中添加方法

@PostMapping("add")
    public boolean addUser(@RequestBody User user) {
        return userService.saveUser(user);
    }

3、@RequestBody注解的使用

@requestBody注解的使用 - 西风恶 - 博客园 (cnblogs.com)