【java_web_vue】修改 删除 (自用)

修改

前端表格 要自己做
【java_web_vue】修改 删除 (自用)_第1张图片

修改功能比添加多一个选择数据的功能

要确定到某一条数据,再对他进行修改

在后面添加 修改 删除 摁钮

还有选择框

【java_web_vue】修改 删除 (自用)_第2张图片

通过元素的点选,就是直接在数据上 点击

【java_web_vue】修改 删除 (自用)_第3张图片

添加属性

higlight-current-row

【java_web_vue】修改 删除 (自用)_第4张图片

配置事件

【java_web_vue】修改 删除 (自用)_第5张图片

事件名冲突,好像和分页的冲突,自己修改一下

【java_web_vue】修改 删除 (自用)_第6张图片

为什么没有使用 setCurrent(row) 因为这个是干这个的

【java_web_vue】修改 删除 (自用)_第7张图片
【java_web_vue】修改 删除 (自用)_第8张图片

之后由current-change事件来管理选中时触发的事件,它会传入currentRow,oldCurrentRow。

1、我知道 currentRow
2、oldCurrentRow 这个怎么用我不知道

选中可以传入 当前参数的原理

vue()

@click=“fun”
不带括号、不写实参的fun默认传event (事件对象)

@click=“fun(value)”
只要加括号,无论是否传值,都属于传实参给函数,event (事件对象)就接收不到。
如果需要实参、又需要event (事件对象),就需要手动传入 event (事件对象),如下:
@click=“fun($event, value)”

这个函数里面有一个参数 val 叫做入参 vue方法不加括号,默认那啥

【java_web_vue】修改 删除 (自用)_第9张图片

这个参数就是我们当前选中的行

当前选中的行数据有很多,为了方便调用 数据,所以有一个变量接收

【java_web_vue】修改 删除 (自用)_第10张图片

就是这种结构

【java_web_vue】修改 删除 (自用)_第11张图片

老师那个不好使,是因为他绑定的方法 加了括号,不传默认参数了

【java_web_vue】修改 删除 (自用)_第12张图片

打印出来了

【java_web_vue】修改 删除 (自用)_第13张图片

添加业务逻辑

通过选中的参数 可以获取他的一堆值

不要用这堆值,因为这堆值 可能上一秒是还这个,下一秒就被修改了,不要偷懒,去数据库里面直接查

通过这里的一堆值 获取到他的 主键

根据主键 去数据库查完整数据

在vue建立并绑定 一个对象data

把完整数据 对象data 绑定 放到 修改的表格里面

提交发送到后台

摁提交摁钮之后,重新获取main数据

好像不用清空 修改列表里面的值

实践阶段

添加摁钮

【java_web_vue】修改 删除 (自用)_第14张图片

添加一份新表单

这些记得都改了

【java_web_vue】修改 删除 (自用)_第15张图片

老师使用替换,把add都换成了edit

【java_web_vue】修改 删除 (自用)_第16张图片

修改后

【java_web_vue】修改 删除 (自用)_第17张图片

数据也添加一份

【java_web_vue】修改 删除 (自用)_第18张图片

输入框的 主键不能修改 要加只读

【java_web_vue】修改 删除 (自用)_第19张图片
【java_web_vue】修改 删除 (自用)_第20张图片

别忘了,点击修改 和 点击提交的方法 控制那个显示的值

【java_web_vue】修改 删除 (自用)_第21张图片

业务逻辑,从页面直接取值

!!注意必须是不会频繁改变的值

因为数据 字段 都一样,可以直接 从页面取值,赋给表格

【java_web_vue】修改 删除 (自用)_第22张图片

直接赋值对象 其实传递的是引用

【java_web_vue】修改 删除 (自用)_第23张图片

我在修改框里填东西,还没有发请求,数据就变了

【java_web_vue】修改 删除 (自用)_第24张图片

直接赋值对象 其实传递的是引用 证明:

对象身上的id一样

打印这两个属性

【java_web_vue】修改 删除 (自用)_第25张图片

对象身上的id一样

【java_web_vue】修改 删除 (自用)_第26张图片

解决办法 我们现在做的是对象可引用 那么们可以做一个对象的克隆

就额可以把对象的关系断开了

深克隆的方法,笑死我了

【java_web_vue】修改 删除 (自用)_第27张图片

老师从页面取值,就是为了说明这个问题

这样改就没有问题了

【java_web_vue】修改 删除 (自用)_第28张图片

拿到数据

【java_web_vue】修改 删除 (自用)_第29张图片

通过接口

【java_web_vue】修改 删除 (自用)_第30张图片

直接把添加的那套方法,反馈什么的,直接拿过来,

【java_web_vue】修改 删除 (自用)_第31张图片

修改成功

【java_web_vue】修改 删除 (自用)_第32张图片

myCUD

因为添加,修改删除 的方法 除了 请求地址参数不一样

刷新数据,给提示都一样

【java_web_vue】修改 删除 (自用)_第33张图片

就可以提取了

【java_web_vue】修改 删除 (自用)_第34张图片

测试一下

删除

只要能确定到当前这条

向后端接口法请求

配合前端删除摁钮 往后台删除接口发一个请求

要个主键ID就够了

做个提示信息

【java_web_vue】修改 删除 (自用)_第35张图片

老师说这里面用了一个promise对象

【java_web_vue】修改 删除 (自用)_第36张图片

什么是promise对象

添加链接描述

算了,先不理解他是怎么弄出来的了,我就先关注后端把

开始做了

添加删除摁钮

【java_web_vue】修改 删除 (自用)_第37张图片

method

【java_web_vue】修改 删除 (自用)_第38张图片

编写 后台接口

【java_web_vue】修改 删除 (自用)_第39张图片

前台 method 如果点了 确定就直接走axios请求了

【java_web_vue】修改 删除 (自用)_第40张图片

最后一个问题 就是不点数据,空摁摁钮 会无效 或 会报错

【java_web_vue】修改 删除 (自用)_第41张图片

思路,先把这两个摁钮 禁用 起来

当用户点了一行之后 这两个摁钮再启用起来

想要禁用摁钮的话,就是加个

在这里插入图片描述

想要绑定数据,就是:disable=“true”

在这里插入图片描述

把这个boolean值,在下面做一个绑定 做一个修改

【java_web_vue】修改 删除 (自用)_第42张图片

在绑定的时候读这个值 就可以了

在这里插入图片描述

绑定同一个值,控制启用禁用

在这里插入图片描述

现在就要找到,显示选中一行的时机

【java_web_vue】修改 删除 (自用)_第43张图片

删除了之后,摁钮就应该被禁用起来

当有数据刷新的时候,都应该禁用按钮

这里我之前学了,就当复习了吧

【java_web_vue】修改 删除 (自用)_第44张图片

这里会有问题,1、3、5页没问题,2、4、6页摁钮不灭

代码不是不能用,就是启用的时机有点问题

原因是我们没法控制vue代码的执行顺序

加了nextTick 也没用,因为我现在组件里面的 对数据的处理不止一条

会刷新数据,还会发axios请求,掺和进去很多请求,用nextTick效果可能不是太好

所以就有了监控机制

可以更精准的找到数据刷新的时机

每次tableData 被替换的时候,刷新那个值

当数据发生 update 这个声明周期的时候,让我来执行一些操作

【java_web_vue】修改 删除 (自用)_第45张图片
【java_web_vue】修改 删除 (自用)_第46张图片

因为vue是 自动来控制渲染顺序

当我们的请求比较多,页面结果比较复杂之后

开始写了:看我出了什么傻逼错误

update 语句 update 表 set 字段
delete from 表 where

post 请求 只有最外层的过滤器能收到

其他层无法获取参数,我解决不了,之后遇到这种问题,去百度,百度找不到解决办法,直接跳过
,不能在这样了

SQL 导出 语句

添加链接描述

java.lang.Object.wait(Native Method)

添加链接描述

大概懂了,老师那里是直接赋值的,直接赋个 null 应该不会报错

【java_web_vue】修改 删除 (自用)_第47张图片

禁用 是 disabled 不是 disable

watch 怎么写

【java_web_vue】修改 删除 (自用)_第48张图片
【java_web_vue】修改 删除 (自用)_第49张图片

这个table 居然不加this,哈哈

今天给喜欢的主播上了舰,记得把这个每天5块钱 当成一种监督

你可能感兴趣的:(vue)