Vue实现新增操作

最新推荐文章于 2024-07-23 21:45:00 发布

封心心心心

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量1.5k

点赞数 1

分类专栏： SpringBoot + Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/longlong0412/article/details/128403003

版权

SpringBoot + Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue实现新增操作

新增的逻辑：

前端页面上，点击新增按钮，对应一个handleadd方法，该方法创建一个空的form对象，并打开一个对话框，对话框里有各种输入框，输入框里通过v-model绑定输入的内容和form对象的各种属性
在输入框里填写各种字段
点击“确认”按钮，绑定一个@click的save事件，生成所需的form对象，并将该对象发送至后端
后端接收到前端传过来的数据，封装成一个input对象。
在后端的新增方法里面，将input对象的数据提取出来，封装进所对应的实体类对象。
利用mybatisPlus里的mapper方法，将封装好的实体类对象插入数据库中。
执行load操作，刷新页面

实现代码

<!-- el-button 按钮 -->
<el-button type="primary" @click="handleadd">新增用户</el-button>


<el-dialog title="用户信息" :visible.sync="dialogFormVisible">
          <el-form label-width="120px">
            <el-form-item label="用户名" >
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" >
              <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" >
              <el-input v-model="form.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学校" >
              <el-input v-model="form.schoolName" autocomplete="off"></el-input>
            </el-form-item>   
            <el-form-item label="国家" >
              <el-input v-model="form.country" autocomplete="off"></el-input>
            </el-form-item>      
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
 <script>
    method: {
    load(){
        this.request.get("/user/page", {  //这里填的是传进后端的参数
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.username,

        }
      }).then(res => {
        console.log(res)

        this.tableData = res.data.data.records
        this.total = res.data.data.total

      })
      },  
    handleadd(){
        this.dialogFormVisible = true
        this.form = {}
      },
      //新增
      save() {
      this.request.post("/user/adduser", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      }
</script>