vue_前后端分离-增删改操作

增加操作和修改操作:

两个操作放一个页面进行操作

使用插槽(scope.row)的方式获取列表中的每一行数据

<template slot-scope="scope">
  <el-button
      size="mini"
      @click="openEditDialog( scope.row)">编辑</el-button>

在进行添加的时候使用是否传进来row.id判断是否添加还是修改

在添加前需要将表格的数据清空:this.$refs.userFrom.resetFields()

对信息进行修改的时候需要将数据进行回显:this.userData.id=row.id等进行回显;

​ 对数据进行增改操作的时候需要注意的细节

​ 1.对每个输入框的数据输入使用标签rules进行约束

​ 2.使用**{validator:validateEmail,trigger: ‘blur’}**方法对邮箱进行验证,

​ 里面使用一个函数进行正则表达式的书写,在data中,无论是否验证成功,都必须使用callback实现反馈

在表单中使用dialogFormVisible=true/false属性来设置模态框的显示和隐藏

​ 3.使用表单校验防止用户不输入就提交数据

​ 若不输入就给出提示,并无法进行提交

​ //保存数据,使用post请求,js对象的参数会被默认装换成json格式,使用qs模块转换成表单数据格式给后端

//下载安装依赖,使用qs模块转换成表单数据格式
import qs from 'qs';

submitUser(){
      //表单校验,防止用户发送空的数据
      this.$refs["userFrom"].validate(valid=>{
        if(valid){
          //返回值里面可以获取后端传递的成功的信息做弹窗使用
          axios.post("http://localhost:8081/api/user/saveOrUpdate",qs.stringify(this.userData)).then(response => {
            //添加后关闭页面
            this.dialogFormVisible=false;
              //提交后立即执行查询查询
            userList(this);
          })
        }else {
          return false;//阻止提交
        }
      })

    }

删除操作:

删除时需要传递这一行的id,并且之后需要立即重新查询数据

里面的放回值可以携带成功的消息做弹窗使用

deleteUser(row){
  //console.log(arguments);
  // 返回值里面可以获取后端传递的成功的信息做弹窗使用
  axios.get("http://localhost:8081/api/user/delete", {params: {id:row.id}}).then(response => {
    //删除成功后立即执行查询查询
    userList(this);
  })
}

使用:**v-if="false/true"**控制表单的显示和隐藏