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方法

小结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/846541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈Qt:跨平台开发的现在与未来

在软件开发领域,跨平台框架一直是热门话题。Qt作为一个成熟且功能丰富的跨平台C开发库,自从1991年由挪威Trolltech公司开发以来,已经走过了30多年的历程。Qt主要用于开发图形用户界面(GUI)程序,同时也支持开…

Educational Codeforces Round 166 (Rated for Div. 2) (A~C)

A. Verify Password 思路:按照ASCLL值进行比较就行(因为字母的ASCLL本来就在数字后面),所以,只要找到前面比后面的数大就输出NO,反之YES 代码实现: #include<bits/stdc.h> using namespace std; #define N 100005 typedef long long ll; ll n, m, num, sum, t; ll a[N]…

[力扣题解] 257. 二叉树的所有路径

题目&#xff1a;257. 二叉树的所有路径 思路 前序遍历 代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x)…

电脑死机问题排查

情况描述&#xff1a;2024年6月2日下午16&#xff1a;04分电脑突然花屏死机&#xff0c;此情况之前遇到过三次&#xff0c;认为是腾讯会议录屏和系统自带录屏软件冲突导致。 报错信息&#xff1a;应用程序-特定 权限设置并未向在应用程序容器 不可用 SID (不可用)中运行的地址…

整理好了!2024年最常见 20 道 Kafka面试题(二)

上一篇地址&#xff1a;整理好了&#xff01;2024年最常见 20 道 Kafka面试题&#xff08;一&#xff09;-CSDN博客 三、请解释Kafka中的生产者&#xff08;Producer&#xff09;和消费者&#xff08;Consumer&#xff09;。 在Kafka中&#xff0c;生产者&#xff08;Produce…

微信小程序的优劣势

微信小程序的优劣势可以归纳如下&#xff1a; 优势&#xff1a; 快速部署与低成本&#xff1a; 微信小程序允许商家快速搭建线上店铺&#xff0c;大大缩短了上线时间和开发周期&#xff0c;降低了初期投入成本。商家可以根据自身需求选择合适的模板&#xff0c;并进行个性化设…

C++设计模式|结构型 代理模式

1.什么是代理模式&#xff1f; 代理模式Proxy Pattern是一种结构型设计模式&#xff0c;用于控制对其他对象的访问。 在代理模式中&#xff0c;允许一个对象&#xff08;代理&#xff09;充当另一个对象&#xff08;真实对象&#xff09;的接口&#xff0c;以控制对这个对象的…

牛客周赛 Round 45VP

这场应该是十分仁慈的一场了 1.签到&#xff1a;https://ac.nowcoder.com/acm/contest/84244/A AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int a,b,c,d,e; int main() {cin>>a>>b>>c>>d>>e;int sabcde;if(s>1…

【Hive SQL 每日一题】统计每月用户购买商品的种类分布

文章目录 测试数据需求说明需求实现 测试数据 -- 创建 orders 表 DROP TABLE IF EXISTS orders; CREATE TABLE orders (order_id INT,user_id INT,product_id INT,order_date STRING );-- 插入 orders 数据 INSERT INTO orders VALUES (101, 1, 1001, 2023-01-01), (102, 1, 1…

张大哥笔记:下一个风口是什么?

我们经常会问&#xff0c;下一个风口是什么&#xff1f;我们可以大胆预测一下&#xff0c;2024年的风口是什么呢&#xff1f; 40年前&#xff0c;如果你会开车&#xff0c;那就是响当当的铁饭碗&#xff1b; 30年前&#xff0c;如果你会英语和电脑&#xff0c;那也绝对是个人才…

装饰器,状态管理和if判断(HarmonyOS学习第六课)

Builder装饰器-自定义构建函数 前面介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定&#xff0c;仅与使方法进行数据传递。ArkUI还提供了一种更轻量的UI 元素复用机制Builder&#xff0c;Builder 所装饰的函数遵循build( )函数语法规则&#xff0c;开发者可以将重…

网络遗忘权的实现方法

网络遗忘权的实现方法 目录 从禁书说起 从销毁硬件信息的方法得到的启示 现在网络遗忘权的实现方法 从禁书说起 古代有禁书的需求,直接的方法就是贴出告示,强行收缴,然后付之一炬. 这个方法的问题在于只要有一个人敢冒死藏书,再次手抄或者是印刷,就 会让之前的禁书努力,付…

nrf52832 esb 2.4G通信 一对多 改频道

若想支持更多客户端&#xff0c;可通过修改通道号及频率的方式&#xff0c; 同频道下&#xff0c;最多支持8个通道&#xff0c;若想支持更多的设备&#xff0c;接收端需要修改频道&#xff0c;与发送端保持一致&#xff1b; 常用函数&#xff1a; bool nrf_esb_set_enabled_p…

制作ChatPDF之后端Node搭建(三)

后端Node搭建 接上篇:制作ChatPDF之前端Vue搭建&#xff08;二&#xff09; 项目结构 下面是项目的结构图&#xff0c;包括前端 (Vue.js) 和后端 (Node.js) 的项目结构。 pdf-query-app/ ├── frontend/ │ ├── public/ │ │ ├── index.html │ ├── sr…

[Qt学习笔记]Qtxlsx在Qt下的配置和调用

背景分析 Qt操作Excel文件一般有QAxObject和QtXlsx两种方法&#xff0c;前者需要调用wps或office组件进行读写操作&#xff0c;具有一定的局限性&#xff0c;下面列出两种方法的优缺点对比 QAxObject&#xff1a; 优点&#xff1a;支持xls和xlsx等版本。office组件读写速度快&…

Java Map遍历方法(Map的Iterator原理)

Map中存放数据的Key-Value实质上就是Node节点&#xff0c;而 底层是hash数组和链表(或树)&#xff0c;不容易遍历。 一、containsKey() 和 get()查找元素 这两个方法可以获得信息&#xff0c;但是依旧不能轻松遍历。 containsKey()方法判断对应的key是否存在&#xff1b; get()…

unsigned char*和const char*的一些问题

1.可以返回字符串常量&#xff0c;但是不能返回char buf[BUF_SIZE] char* get_str(){char* str "hello world";return str; }char* get_str(){char str[32] {0};strcpy(str, "hello world");return str; }//err 2.联合体不能用指针&#xff0c;也…

franka panda 使用moveit 进行规划时经常出现规划路径错误的问题

在Python程序中使用MoveIt进行机器人运动规划时&#xff0c;可以通过moveit_commander和moveit_msgs等库来修改规划参数。以下是一些可以设置的关键参数&#xff1a; Planning Time (allowed_planning_time): 指定规划算法可以运行的最大时间。 Goal Constraints (goal_constr…

浔川python社获得全网博主原力月度排名泸州地区第二名!

今日&#xff0c;浔川python社在查看全网博主原力月度排名泸州地区时&#xff0c;一看就震惊啦&#xff01; 全网博主原力月度排名泸州地区排名榜单 全网博主原力月度排名泸州地区第二名为&#xff1a;浔川python社。 感谢粉丝们的支持&#xff01;浔川python社还会继续努力&a…