SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改

本文主要是介绍SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

新增操作

正常我们都是从新增功能书写

查看源码

显示的是这个

在vue里面开下来

这样就能显示

点击确定

就能把数据发送到后台进行保存

 //弹出添加窗口handleCreate() {this.dialogFormVisible = true;},//重置表单resetForm() {},//添加handleAdd() {//绑定的是确定按钮 发起请求axios.post("/users", this.formData).then((res) => {//判断当前操作是否成功if (res.data.flag) {//关闭弹层this.dialogFormVisible = false;}}).finally(()=>{//重新加载页面this.getAll();})},

给用户信息展示

//添加
handleAdd() {//绑定的是确定按钮 发起请求axios.post("/users", this.formData).then((res) => {//判断当前操作是否成功if (res.data.flag=true) {//关闭弹层this.dialogFormVisible = false;this.$message.success("人员数据添加成功");}else {this.$message.error("人员数据添加失败");}}).finally(()=>{//重新加载页面this.getAll();})
},

每次添加的时候都要清理数据

//弹出添加窗口
handleCreate() {this.dialogFormVisible = true;this.resetForm();
},//重置表单
resetForm() {this.formData={};
},

不然数据就会一直留着

让取消按钮绑定功能

//取消
cancel() {//关闭弹窗this.dialogFormVisible = false;//消息提示this.$message.info("操作取消");
},

小结

设置数据库添加数据的时候主键自增

axios发送post请求

请求路径是/users

请求参数是this.formData

主要是异步调用

删除操作

首先找入口

然后书写

// 删除
handleDelete(row) {axios.delete("/users/"+row.id).then((res)=>{if (res.data.flag) {this.$message.success("人员数据删除成功");}else {this.$message.error("人员数据删除失败");}}).finally(()=>{//重新加载页面this.getAll();});;
},

我们要加判定提醒

// 删除
handleDelete(row) {this.$confirm("此操作永久删除当前信息,是否继续?","警告",{type:"info"}).then(()=>{axios.delete("/users/"+row.id).then((res)=>{if(res.data.flag){this.$message.success("删除成功");}else{this.$message.error("删除失败");}}).finally(()=>{this.getAll();});}).catch(()=>{this.$message.info("取消操作");});
},

confirm加提醒

then是成功 catch是失败

修改操作 加载数据

修改功能就是一个列表功能加一个新增功能

首先我们要做的是列表 弹出数据

与上面的html代码进行了数据绑定

动态数据

如果访问此网页

别人修改然后你打不开了

所以我们要加一个flag的判定

//弹出编辑窗口
handleUpdate(row) {axios.get("/users/"+row.id).then((res)=>{if(res.data.flag && res.data.data !=null){this.dialogFormVisible4Edit=true;this.formData = res.data.data;}else{this.$message.error("数据同步失败,自动刷新")}}).finally(()=>{//刷新数据this.getAll();});
},

加载数据很关键

修改操作

数据加载上来了

接下来我们进行修改吧

查看静态页面弹层绑定的数据模型

绑定的数据模型是formData

与添加操作绑定的是一个数据模型

我们只需要改axios的请求方式和关闭哪个图层就行

//修改
handleEdit() {//与添加功能绑定的是一个数据模型//绑定的是确定按钮 发起请求axios.put("/users", this.formData).then((res) => {//判断当前操作是否成功if (res.data.flag) {//关闭弹层this.dialogFormVisible4Edit = false;this.$message.success("人员数据修改成功");}else {this.$message.error("人员数据修改失败");}}).finally(()=>{//重新加载页面this.getAll();});
},

为了方便我们统一书写弹层方法

cancel方法

小结

这篇关于SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1025816

相关文章

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu