vue_前后端分离-增删改操作_vue删除功能连接后端数据-CSDN博客

本文链接：https://blog.csdn.net/jgxc152/article/details/131506554

本文描述了在Vue.js应用中如何在一个页面上同时处理增加和修改操作。通过插槽获取列表数据，利用row.id判断添加或修改。在表单中使用数据验证，如邮箱验证，确保用户输入的有效性。提交数据时，使用axios进行POST请求，并用QS模块转换数据格式。删除操作通过GET请求传递ID并重新加载数据。对话框的显示和隐藏由v-if控制。

摘要由CSDN通过智能技术生成

增加操作和修改操作:

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

使用插槽(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"**控制表单的显示和隐藏