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

server/2024/12/27 9:56:37/

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


http://www.ppmy.cn/server/153593.html

相关文章

爬虫代理服务要怎么挑选?

在数据采集的世界里&#xff0c;爬虫代理服务不仅帮助我们高效地收集信息&#xff0c;还能在保护数据安全方面发挥重要作用。但面对市场上琳琅满目的代理服务&#xff0c;我们该如何挑选呢&#xff1f;本文将为你提供一些实用的建议&#xff0c;帮助你找到最适合你的爬虫代理服…

条款14 如果函数不抛出异常请使用noexcept

C11中 内存释放函数 和 析构函数 都是隐式noexcept,除非手动声明noexcept(flase)&#xff0c;但如果是一个对象的析构函数可能被标准库使用&#xff0c;且析构函数有可能抛出异常&#xff0c;那么程序的行为是未定义的std::vector添加新元素如果容量不够&#xff0c;那么vector…

音视频入门知识(四):封装篇

⭐四、封装篇 H264封装成mp4、flv等格式&#xff0c;那为什么需要封装&#xff1f; ​ h264也能播放&#xff0c;但是按照帧率进行播放&#xff0c;可能不准 ★FLV **FLV&#xff08;Flash Video&#xff09;**是一种用于传输和播放视频的容器文件格式。FLV 格式广泛应用于流媒…

Virtualbox安装ubuntu20虚拟机无法打开终端

用Virtualbox安装ubuntu20系统&#xff0c;安装好之后&#xff0c;无法打开终端&#xff1b; 原因&#xff1a;语言设置导致的问题&#xff1b; 修改方法&#xff1a;将/etc/default/locale里LANG这行的值修改为&#xff1a;en_US.UTF-8即可&#xff1b; 步骤&#xff1a;先在…

Flutter开发HarmonyOS 鸿蒙App的好处、能力以及把Flutter项目打包成鸿蒙应用

Flutter开发HarmonyOS的好处&#xff1a; Flutter是谷歌公司开发的一款开源、免费的UI框架&#xff0c;可以让我们快速的在Android和iOS上构建高质量App。它最大的特点就是跨平台、以及高性能。 目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发…

数据仓库工具箱—读书笔记02(Kimball维度建模技术概述04、使用一致性维度集成)

Kimball维度建模技术概述 记录一下读《数据仓库工具箱》时的思考&#xff0c;摘录一些书中关于维度建模比较重要的思想与大家分享&#x1f923;&#x1f923;&#x1f923; 第二章前言部分作者提到&#xff1a;技术的介绍应该通过涵盖各种行业的熟悉的用例展开&#xff08;赞同…

短视频运营行业该如何选择服务器?

在互联网快速发展的时代&#xff0c;短视频行业也应运而生&#xff0c;企业为了保证用户能够浏览流畅且稳定的短视频&#xff0c;则需要选择一台合适的服务器来运行相关业务&#xff0c;本文就来探讨一下短视频运营行业该如何选择服务器吧&#xff01; 短视频行业一般需要处理大…

API 接口如何确保数据的安全?

在API接口的对接中&#xff0c;确保数据的安全性是至关重要的。以下是一些关键措施&#xff0c;可以帮助实现这一目标&#xff1a; 一、认证与授权 API密钥&#xff1a;为每个调用方分配唯一的API密钥&#xff0c;客户端在请求时携带该密钥&#xff0c;服务器端验证其有效性。…