前后端分离(前端删除数据库数据)

1.实现思路前端把用户Id用axios请求发送给后端,后端获取id,把用户数据删除并返回给前端一个删除成功响应

2.编写axios请求代码

复制代码
const deleteEmployee = async (empNo) => {
  try {
    const response = await axios.delete(`http://localhost:8080/api/delEmp`, {
      params: {
        empNo: empNo
      }
    });
    console.log('Employee deleted successfully:', response.data.message);
    ElMessage({
      message: response.data.message,
      type: response.data.success ? 'success' : 'error'
    });
    // 刷新表格数据
    fetchData();
  } catch (error) {
    console.error('Error deleting employee:', error);
    ElMessage({
      message: '删除员工时出错',
      type: 'error'
    });
  }
};

3.获取用户输入员工Id

复制代码
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="danger" @click="deleteEmployee(scope.row.empNo)">删除</el-button>
          </template>
        </el-table-column>
  • @click="deleteEmployee(scope.row.empNo)":

    • 绑定了点击事件处理器。当用户点击此按钮时,会调用名为 deleteEmployee 的方法,并将当前行的 empNo(员工编号)作为参数传递给它。

4.最后前端把用户的员工传给后端删除即可

  • 前端根据后端返回的数据判断,数据是否删除成功,并给用户提示

5.ElMessage的使用

复制代码
<template>  
  <button @click="showMessage">显示消息</button>  
</template>  
  
<script>  
import { ElMessage } from 'element-plus';  
  
export default {  
  methods: {  
    showMessage() {  
    //使用
      ElMessage({  
        message: '这是一条消息',  
        type: 'success',  
      });  
    },  
  },  
};  
</script>
​

在上面的代码中,当用户点击按钮时,showMessage 方法会被调用,然后 ElMessage 会显示一个成功的消息提示。请注意,ElMessage 接受的参数是一个对象,你可以根据需要配置不同的属性,比如 message(消息内容)、type(消息类型,如 'success'、'warning'、'info'、'error' 等)、duration(显示时间)等。具体可配置的属性请参考 Element Plus 的官方文档。

相关推荐
bikong72 分钟前
一种高效绘制余晖波形的方法Qt/C++
数据库·c++·qt
渣哥4 分钟前
Java Set 不会重复?原来它有“记仇”的本事!
java
一叶飘零_sweeeet4 分钟前
从 0 到 1 攻克订单表分表分库:亿级流量下的数据库架构实战指南
java·数据库·mysql·数据库架构·分库分表
苹果醋37 分钟前
数据库索引设计:在 MongoDB 中创建高效索引的策略
java·运维·spring boot·mysql·nginx
Dontla18 分钟前
Dockerfile解析器指令(Parser Directive)指定语法版本,如:# syntax=docker/dockerfile:1
java·docker·eureka
xianyinsuifeng18 分钟前
Oracle 10g → Oracle 19c 升级后问题解决方案(Pro*C 项目)
c语言·数据库·oracle
彭于晏Yan21 分钟前
SpringBoot优化树形结构数据查询
java·spring boot·后端
TDengine (老段)25 分钟前
TDengine 选择函数 First 用户手册
大数据·数据库·物联网·时序数据库·iot·tdengine·涛思数据
AAA修煤气灶刘哥37 分钟前
缓存这「加速神器」从入门到填坑,看完再也不被产品怼慢
java·redis·spring cloud
练习时长一年43 分钟前
Spring事件监听机制(三)
java·后端·spring