00:00
接下来我们编写节点批量删除功能,首先我们需要一个删除按钮,当我们点击批量删除,我们就会删除我们选中的这些节点,我们从组件里边拿到一个按钮,我们这个按删除按钮呢,我们使用红颜色的按钮,我们就使用这个危险按钮把它复制过来。我们放到我们的tree前边,我们这个呢,就叫批量删除,我们为它绑定一个单击事件,比如enter click,当我们点击这个按钮以后呢,就要触发我们的批量删除方法,我们编写这个方法。我们把它呢放在muscles里边,我们多填了一个方法叫批量删除,这个批量删除呢,我们要做的第一个功能就是我们得找到我们当前到底选中了哪些节点,而且这节点呢有不同的状态,那我们这个节点呢叫半选状态,那这样子呢叫全选状态,还有我们这个不选中状态,我们只需要获取我们已经选中的所有节点,半选节点呢就不用获取了。
01:08
但是我们如何能获取到我们tree里边当前被选中的这一节点,我们就需要参照element的文档,我们打开,在文档里边呢,告诉我们这个tree能写哪些属性,还有我们的一些设置属性,这还有我们的方法,那我们这个方法里边呢,就有一个方法叫get check no,它的作用就是如果我们节点可以被选择,就能返回我们当前被选中的所有节点组成的数组,所以我们需要调这个方法,那我们这些方法该怎么调用?我们前边呢有一个这样的实例代码,比如在节点过滤的时候,它呢是调用我们tree实例的filter方法进行过滤的,但是该怎么调,我们来看一下我们要调一个组件提供的这个方法,首先我们给组件要写一个ref,相当于给组件起一个reference,也就是它的唯一标识。那当我们要调用yellow tree封装的方法的时候。
02:09
比如我们看下边,我们可以这么来调用this是使用唯有实例Dollar re FS,那就是当前唯有实例里边所有的组件,我们可能有非常多的组件,比如e button yellow Switch yellow tree等等,我们呢,拿到所有的组件,但是拿到哪个组件呢?这有一个叫tree,那每一个组件我们用ref给它起一个名字,那我们相当于拿到我们e tree这个组件,再来调用e tree这个组件文档里边提供的方法。所以我们的写法呢,我们就在EL tree里边给它给一个ref reference,我们把它呢,就叫menu tree菜单的整个数,那我们想要点击删除按钮调用bench delete方法的时候呢,我们要找到这个里边被选中的节点,那我们就需要这么来找,来到批量删除。
03:04
我们需要调用this是当前唯有实力Dollar res。拿到5U实例里边的所有组件,拿哪个组件是使用我们menu,因为我们刚才给这个EL起名叫menu,那拿到这个组件以后呢,我们想要获取它。选中的这些节点,我们就来参照官方文档。有一个方法叫。Get checked notes复制过来。这个方法呢,可以接收两个参数,我们可以看一下。这两个参数呢,一个叫life on,还有一叫include have checked,而这两个参数分别代表是否只是叶子节点,也就是我们在这获取到被选中的节点,比如我们只获取它的这些叶子节点,而不获取它的负节点,这是第一个参数,第二个参数,它这呢是是否包含半选节点,有我们想要删除的节点,只是我们这些全部被选中的,有一个没被选中,那它的负节点就是半选状态,这个我们是不需要包含的,而且这两个呢,默认都是false,所以我们可以直接调用这个方法,不传任何参数,那它最终呢,返回的是一个数组,来写一下let,那所有的这个数组呢,就叫check no,我们在控制台打印一下我们被选中的元素,conso.log被选中。
04:38
的元素,我们将整个check的路子打印出来保存,我们来看一下页面效果。我们先来刷新。我来选中一些节点,比如我选中生鲜里边的这一节点,我来选中了它,我把整车这个不要了,然后呢,我来打印,批量删除,我们看到被选中的元素有九个,那就是这些,它每一个元素的信息全部在里边封装着,那就是数据库里边当前元素的ID以及它的名字等等等。
05:17
那如果我们将它全选,我们来看一下,我们将生鲜一全选以后,那它里边还包含整车,以及整车里边的其他子元素,当我点击批量删除它呢,就有13个。那分别对应的就是我们来看一下,第一个是我们的生鲜,接下来是产地职工一直有很多,那后三个就应该是整车,全新车,二手车,我们可以看一下后边三个是整车。以及全新整车以及我们的二手车,没问题,那我们就获取到所有被选中的节点了,那想要删除也非常简单,只需要给我们CTRLL发送我们删除请求,我们在删除的时候呢,接收我们需要删除的菜单的整个ID数组,所以我们要做的只是在前端拿到这些元素以后,我们对它进行一个遍历,For,我们来遍历所有被选中的这些节点。
06:17
安。等于零开始到A小于我们所有节点的长度A加加。我们只需要拿出当前元素的ID即可,我们把当前元素拿出来,我们拿到它的看ID,我们最终发给数据库,让它进行删除,那我们将它们呢,最终组装成一个数组。Let,我们就叫can ids,我们要删除的所有菜单的ID,好,我们将它们呢放到这个数组里边,Push。这样呢,我们就终于便利的所有被选中元素的这些ID,那接下来我们就应该发送请求去来删除这些元素,但发送之前我们还是最好给一个确认提示框,毕竟要批量删除好多东西,我们要往下翻,我们以前写过一个确认框,确认框呢就是confirm。
07:17
This confirm,如果确认成功了,我们就使用then,如果点了取消,那就catch,我们将这个复制过来们放到我们的这一块,那先让他确认auto shift f是否批量删除,批量删除。我们指定的这个数组的所有节点,我们可以将整个数组信息取出来,点击确定或者点击取消,如果点击确定就掉then then呢,我们来封装一个箭头函数,这是它确定以后要做的事,如果他点了取消,那就会掉catch。我们还是箭头函数,这是他点了取消以后要做的事情,那当我们点了确定,我们就要发送请求,Http post,那还是发送post请求,将我们所有要删除的批量的这个ID发出去,那发给哪个请求呢?发给我们的delete请求,我们以前测试过的这个删除里边,我们拿过来有一个叫product category delete。
08:26
我们将它复制过来。我们粘贴到请求路径的位置,然后将我们所有要删除的菜单的ID发送出去,那成功了以后,我们就来给一个提示,This,第2DOLLAR message,我们之前的这个提示我们也拿过来。在下边我们来找一下我们之前用过的提示,This message。那我们就提示呢,菜单批量删除成功,Al shift f,我们代码整理。
09:03
当然整个删除完成以后,我们还应该刷新菜单,那我们就调this,我们的菜单刷新,我们封装在了get menu里边。保存,我们来看一下页面效果。现在呢,假设我们来选中了生鲜整个里边的所有内容,当我来点击批量删除,先是确认我们是否批量删除这一菜单,但大家在下边确认的时候呢,可以将取出的这些ID替换为每一个菜单的名字,我来当点击确定,那我们就会发送请求,他就说菜单批量删除成功,删除成功一刷新以后呢,下边就没有了,那以后我们想批量删除哪些,我们只需要将它们选中它里边的子节点,比如我们漏上一个,当我选中批量删除,我点击确定,那大家电里边呢,就只剩空调一个了。至此呢,我们对三级分类的所有增删改查效果我们就基本完成了,那大家在下边呢,可以再继续做里边的一些细化操作,通过编写三级分类的这个增删改查,大家可能体会到了我们整个前后端交互的整个过程,我们前端呢,负责收集数据,组装好各种数据,当然真正增删改查执行功能,那发送给后台,后台将前端收集来的数据拿来转换成自己想要的这些数据以后,再调用service来处理真正的功能。整个期间呢,我们用的非常多的方式就是我们发送HTTP请求,而且是post方式,用post方式呢,将所有数据直接转为杰森,转为杰森来到我们后端,我们使用request body取出请求体里的数据,将它们再转为我们指定的对象。
10:50
但是在开发这个增删改查功能期间,我们发现我们的后台代码并不多,基本上就是前端两小时,后台五分钟。在理想的情况下,我们每天只需要编写后台的这些请求处理功能,也就是我们与前端进行联调的接口。那么将这些请求接口编写好以后,那就应该有一个职业的前端去帮我们完善前端的页面效果,真正的功能再给我们后台发送请求。
11:22
但是实际上呢,职业前端往往会去做面向公众的这些系统,比如整个京东商城的公众访问的,而这些后台管理系统有可能就是我们后台开发人员在开发我们这些功能的时候顺手做出来的,最终我们不仅要会写前端的代码,还要会写后台的代码,那么后来还要参与运维,包括我们自己还要修电脑。所以我们希望通过对这一部分前端代码的编写,让大家先对整个前端的开发有一入门适应的过程。其实基于这种情况,我们就需要一个非常强大的逆向生成工程,将这些基础的增删改、查代码生成起来,来提高我们的生产效率。
12:08
让我们能更多的关注我们核心的业务逻辑,包括我们使用的这个逆向工程,其实不止为我们生成了后台的这些基本增产改查,包括前端的一些基本增删改查代码,比如我们以前生成的。Product里边,在慢里边,Resources里边,我们还帮我们生成了s RC views models product里边的这些view代码,那这就是基本的前端代码,它里边其实有包含我们三级分类的列表,以及三级分类增删改查相关的功能,这些功能的原型呢,都是这样做的,都是参照我们比如这张表的效果,每一个功能呢,其实都是对应数据库的一个增删改查,都是这一套增删改查,如果我们想要用这种形式的增删改查,其实直接可以用逆向生证的这些代码,把它复制粘贴到这就可以了,而我们想要用到自定义的增删改查,比如像我们这种,那我们就需要自己来编写,但是在未来,总之一句话,基本的增删改查我都会使用逆向生成好的这些代码,无论是前端还是我们后台,而我们真正的核心业务逻辑,我们才会自己来。
13:24
在这儿进行编写。当然逆向生成的这些基本增删改查里边的一些细节,大家有需要修改的就自己再来填充就行了。比如我们在删除的时候,先要判断我们当前删除的这些菜单有没有被引用,我们后来呢就可以将这些细节代码填充进去。
我来说两句