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

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 的官方文档。

相关推荐
珹洺1 分钟前
Java-Spring入门指南(十五)SpringMVC注解开发
java·spring·microsoft
小满、1 分钟前
什么是Maven?关于 Maven 的坐标、依赖管理与 Web 项目构建
java·maven
间彧2 分钟前
数据库事务隔离级别详解
数据库
半旧夜夏30 分钟前
【设计模式】核心设计模式实战
java·spring boot·设计模式
fwerfv34534538 分钟前
使用PyTorch构建你的第一个神经网络
jvm·数据库·python
半旧夜夏1 小时前
【Spring】AOP的核心原理配方
java·spring
qiuiuiu4131 小时前
CPrimer Plus第十六章C预处理器和C库总结2-qsort函数
java·c语言·算法
IT学长编程2 小时前
计算机毕设选题 基于SpringBoot的书店管理系统的设计与实现 网上书店系统 前后端分离 Java毕设项目 毕业设计选题 【附源码+文档报告+安装调试】
java·spring boot·毕业设计·课程设计·前后端分离·网上书店系统·书店管理系统
张较瘦_2 小时前
应用型本科计算机类专业毕业设计与论文选题指南
java·开发语言·课程设计