欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > 前后端分离(前端删除数据库数据)

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

2025/2/21 3:09:34 来源:https://blog.csdn.net/m0_67244960/article/details/144747988  浏览:    关键词:前后端分离(前端删除数据库数据)

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词