【22-业务开发-基础业务-商品模块-分类管理-商品系统三级分类拖拽页面的功能-前后端代码的逻辑实现-访问测试-拖拽开关的开启和关系-批量更新拖拽数据-批量删除选定数据】

一.知识回顾

【0.三高商城系统的专题专栏都帮你整理好了，请点击这里！】
【1-系统架构演进过程】
【2-微服务系统架构需求】
【3-高性能、高并发、高可用的三高商城系统项目介绍】
【4-Linux云服务器上安装Docker】
【5-Docker安装部署MySQL和Redis服务】
【6-Git安装与配置过程、Gitee码云上创建项目、IDEA关联克隆的项目】
【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
【8-数据库表结构的创建&后台管理系统的搭建】
【9-前端项目的搭建部署、Node安装、VSCode安装】
【10-Node的安装以及全局环境变量的相关配置&解决启动报错的问题(1.Error: Cannot find module ‘fs/promises)(2.npm安装node-sass报错)】
【11-导入人人generator项目并自动生成相关的文件&商品子模块的调试&公共模块common子模块的抽离与实现&Lombok插件的安装】
【12-商品子模块整合MyBatisPlus技术&其它模块通过generator的自动生成与补充完善】
【13-项目中微服务组件的学习-SpringCloudAlibaba微服务生态体系的学习&SpringCloudAlibaba的依赖管理&项目中SpringBoot和SpringCloud版本的统一】
【14-微服务的注册中心与配置中心Nacos&Windows操作系统上安装Nacos和Linux操作系统上用Docker中安装Nacos&每个子项目模块使用Nacos进行服务注册与发现】
【15-项目中服务的远程调用之OpenFeign&订单模块与商品模块集成使用OpenFeign的案例】
【16-配置中心之Nacos的基本使用&Nacos服务之命令空间、Nacos服务之配置组、Nacos服务之配置拆分】
【17-微服务网关之Spring Cloud Gateway&Spring Cloud Gateway网关服务搭建】
【18-业务开发-基础业务-商品模块-分类管理-前后端管理系统的启动-为分类管理表增加数据-Json插件的下载-返回具有层级目录、父子关系结构的数据】
【19-业务开发-基础业务-商品模块-分类管理-管理系统新建菜单-后端项目renren注册到Nacos注册中心和配置中心去-项目gateway网关模块的搭建-浏览器的同源策略与解决跨域问题实操案例】
【20-业务开发-基础业务-商品模块-分类管理-前端展示后端具有层级关系的目录数据-商品系统三级分类的逻辑删除前后端代码实现】
【21-业务开发-基础业务-商品模块-分类管理-商品系统三级分类的新增类别前后端代码实现-商品系统三级分类的更新类别前后端代码实现-之前错误的Bug修正】

二.商品系统三级分类拖拽页面的功能

2.1 前端代码的逻辑实现1—实现拖拽效果

实现拖拽效果要设置对应的节点允许拖拽的属性功能—》通过ElementUI–》Tree组件—》对应如下的属性

我们需要将 draggable设置为true即可

然后就是要控制拖拽的位置是否可行，因为我们不能破坏三级分类的规则，我们不能拖拽后整个分类变成了4级5级分类等，控制的条件是在ElementUI中给你我们提供了一个allow-drop属性，该属性接收一个方法，方法返回true表示可放置，返回false表示不可放置，我们要做的就是在这个方法中添加我们的放置逻辑。

设置拖拽函数

设置记录最大深度，也就是最大的节点数maxLevel属性值，默认为0：

实现拖拽逻辑功能的函数:

拖拽函数的三个参数:
Function(draggingNode 要拖拽的节点,dropNode 目标节点,type 参数有三种情况：‘prev’、‘inner’ 和 ‘next’)
1.首先找到当前节点所处的最大深度，也就是当前节点下共有多少个子节点。记录当前节点的最大深度。
2.获得目标节点属性中的curLevel，如果符合下面的逻辑，可以拖拽，否则不可以

实现拖拽功能的整体代码:

小小的访问测试一下:----》验证一下实现效果

2.2 前端代码的逻辑实现2----拖拽成功后触发事件来收集整理要发送给后端的数据

查找拖拽成功触发的事件

设置拖拽后实现的事件函数

补充完善前端触发拖拽函数事件的代码

2.3 后端代码的逻辑实现

实现拖拽功能后台整体的逻辑:—》也就是后台一定要接收到前端处理后如下所示的数据

1.当前商品系统分类的parentId发生改变
2.当前分类的curLevel发生改变
3.对于新插入的数据类别，排序发生改变

对应的实现拖拽功能的controller接口层

2.4 拖拽功能前后端的访问测试

将bbb拖动到aaa中

更新成功

三.拖拽开关的开启和关系

选择组件switch开关

添加到页面当中

定义变量属性，设置数据的绑定

但是并没有和我们是树形结构当中的拖拽关联上，所以需要设置数据的双向绑定。

四.批量更新拖拽数据

因为我们在实现拖拽的过程中，可能会触发很多无用的操作，这会对我们服务端的数据库造成一定的压力，所以我们设置一个批量更新拖拽数据的按钮，当我们确定了最终要拖拽的结果后再点击该按钮，才会执行更新的操作。这样相对就会较少服务端的一些压力。

前端代码实现，并设置和拖拽效果的双向绑定，如果为true那么就显示生效，否则就不会显示生效。

当我们点击了批量保存后，会触发一个editSort事件，定义并完善我们的事件

五.批量删除选定数据

因为类别比较多，在操作的时候也可以能面临批量删除的操作。

定义ref引用

然后就是触发删除的方法后，我们需要找到所有的被选中的节点。结合ElementUI官方的信息来获取。

然后定义batchDelete批量删除的方法

启动测试效果如下:

删除效果展示:

好了，关于【22-业务开发-基础业务-商品模块-分类管理-商品系统三级分类拖拽页面的功能-前后端代码的逻辑实现-访问测试-拖拽开关的开启和关系-批量更新拖拽数据-批量删除选定数据】就先学习到这里，一定要动手实操一些，千万不要眼高手低哟，后面的内容更加精彩，敬请期待。