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

这篇具有很好参考价值的文章主要介绍了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)文章来源地址https://www.toymoban.com/news/detail-609821.html

到了这里，关于Vue element-ui form 表单前端提交和后端的接收的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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

相关文章