00:00
刚才呢,咱们完成了讲师管理前端的列表删除,添加,修改,那最后呢,咱来完成讲师管理里边的批量删除功能,把这个我们最终做个实现,那我们看一下这个该怎么去做,按照过程我们写一下啊,首先第一步在JS文件中,咱把接口做过定义,这个我就直接复制了,因为刚才我们写过很多次了,然后把路径我们改一下,在TS里边。我们定义这个接口叫批量删除。我写到这里,然后路径咱们对照接口给它改一下,不要写错,咱们看一下啊,批量删除,我这里叫remove delete提交方式。改下。然后这里边用的是request body底传的list集合,所以在里边加上这么一个ID list加上date,现在接口就完成定义,然后完成定义之后,下面呢,在页面中我们加上这个批量删除这个按钮,按钮我就复制一下,用IUI中的组件实现这个按钮加咱是加到肯定是我们的讲师的列表页面中加上这么一个按钮,那我现在来到这个例子voe里边,我就加里面去,比如加到这个就这个位置。
01:26
啊,当然别的位置也可以啊,我就放到这里,然后在里边有这么一个结构,那咱们先看一下地面中的特点。大家看啊,数据列表有添加有删除,点添加应该是到这个页面,那能把添加方法先写一下,最后再写偏向删除,我们看一下啊,添加它调的方法名字叫A的,那我在这个就是method中加上一个方法叫A。这个方法。然后A的方法做的事情就一个事情跳转到你添加到表单页面中去。
02:02
写下跳转到添加到表单页面,那怎么做?咱们讲过用路由跳转实现这次点router,点上push。加上pass,加上路径,路径应该是vod。Teacher。这些路径你可以到路由里边找到,就是这个,第一层是vod,第二层是teacher,加上create,然后它就能跳转到。乙的这个添加到一文中去,这个咱就完成,完成之后试一下啊。点添加数据过来了啊,现在这个事情,然后下面呢,咱们做这个批量删除,看这个该怎么去做,那我们来看一下啊,首先第一个批量删除,在每条记录前面咱们加上一个复选框,这之前已经加过了,用的是element UI中的组件,那咱看一下啊,这么来做法就是这句话。
03:04
EL table column type等于selection,这是加上小框,然后在table里边呢,我绑定一个事件叫select change,这里边是一个方法。那我说一下这什么意思啊。当你复选框发生了变化,这事件会触发,然后发会调用,什么叫变化,比如现在我选中不选中是不是都会变化,那这个方法都会进行调用,当你选中的话,他会把你选这一行的内容就传到方法中来,那我下面来写一下,咱做个测试啊,这方法我写到这个位置。就这里。这个方法,然后这个方法做的事情,刚才说过。就是咱们的复选框选中不选中,或者说叫发生了变化,然后它都会调用这个方法,它会把你选中的复选框这一行的内容给你传递过来,这是它一个特点,所以在方法里边咱可以得到传递过来那个就是这一行的数据。
04:13
比如说我给它起个名字啊,我们叫这个selection。这个名字随便起啊,因为咱们现在选的话,我可以选择一行,也可以选择多行,为了咱能接收到多行数据,我在初始值里边加上一个数组结构,为了能接收到多行的数据,我从里面复制啊,就这个。你做批量删除,可以选择多个,所以在里边加上一个数组,为了介绍到你的多个值,这是我们写到的啊,然后写完之后在这里边我们做一个封装,把你每次选中的数据放到这个数组里面去,加上一个叫。Selection。所以现在啊,这个代码就完成了,完成之后我们做个测试,看一下这个效果怎么样,因为刚才这么说很多同学不太理解啊,那咱们测试一下,看他什么意思。
05:05
我加上一个叫conso.log,然后在里边把这个输出。就是我们的这个纸啊,给他输出一下啊,咱们看一下这个效果到底是怎么样的,我们来试一下啊。然后现在我们来看一下。首先我在页面中把F12先点开,然后点开之后我们看啊,当然里边有些警告,这咱可以忽略,这框架本身一些问题,咱看主要的,比如现在你看啊,我选择第一个。各位看啊,在我下面是不是有个输出啊,它就表示我们在里边,就是这个事件触发了,就是这个事件往上看啊在这里。这位置这个事件触发了,然后他调了这个方法,方法里边得到了你选中这一行的值,把值复制给这个数组,然后数组中目前有你这个行的内容,那咱看什么内容啊,里面就是一条数据。
06:03
然后数据中你看是不是就这行内容,包括你的讲师的ID名称等等内容里边都存在。这是里边的第一个,那大家看啊,比如现在我再选择一个,你看里边啊,数组中是不是有两个值,把这两行内容都放进去了,比如现在我去掉一个,又输出这里边是不是还是一个,所以你发现啊,它的特点就是会把你每次选中复选框所在这行的值给你传过来,然后这里边咱可以得到在我这数组中有咱们选中的复选框这个值,所以目前这个咱就完成了,这都是由IUY给咱们封装的。然后这个之后我们进步来看啊,比如现在我选中复选框,然后咱们点批量删除,那把你选中复选框的数据是不是要删掉,所以最后咱们写这个批量删除的方法,批量删除我这里边绑定事件加了方法叫半尺幕。
07:06
那最后再来写这个方法。我想这里啊。批量删除的这个方法。饭吃。瑞,然后在里边我们做一下它具体的这么一个实现,那咱来写一下啊,我这个写的完整点,首先第一个咱先做一个就是飞空的一个判断。啊,什么叫非公判断呢?比如现在我什么都不选,点批量删除,肯定是不能删,因为你没有选择,当你选中之后才可以删,所以判断是否咱们选中了复选框,那我现在判断一下啊,很简单,判断数组中的这个值有没有,如果它的长度是零,是不是就没有选中,如果不是零就选中了,那我写一下啊,加上if。然后在里边写一下这次点这个数组,也就是我们的这个数组。
08:01
然后点上这个叫应该,它那个属性叫做Les。如果它等于零,表示它乘等于零,那等于零的时候,那表示没有选中,那咱做个提示,这个提示我从里面复利下啊,用element UI中的组件进行提示,说请选择要删除记录,最终退让它结束,如果说你选中的话,那咱再往下执行。而选中执行的话,咱做删除,那删除的时候呢,我也是。加上这么一个确认框。用这个结构进行实现,我把这个拿过来啊,咱用它快速整合一下小这里。到这里啊,咱们看啊,比如现在我选中了,那咱们确认说此操作将删除该讲师信息,确定调用Z方法,在Z方里边,咱们就调用接口中的方法进行实现,接口中刚才我写的这个方法,这个方法。
09:04
叫这个,呃,在这里它叫做半尺remove这个方法咱们进行这么一个删除,然后删除的时候呢,里边要传的应该是一个就是Jason的数组格式,所以我在外边的我先定一个变量,比如咱们做一个处理,比如说叫ID list是一个数组形式。其实这个数组形式呢,最终变成的应该是这个样子,加上中括号里边加上你的多个ID值,这咱们一会儿实现,我在里边先给他做一个处理啊,就把这值给它先传过来。所以现在啊,咱们完成了这个过程,然后这个传上来之后,下面呢,咱们就调用接口中的方法把它传过来,然最后在里边我们删除之后,提示用户删除成功,然后最终并且刷新页面,这个过程不变,而关键就在这里,这ID list咱怎么得到这个数据,就是你选中复选框,把它的ID值要得到,那这过程给大家写一下啊。
10:11
首先第一个各位明确,咱们每次选中复选框的值是不是都是在这个数组里边有,所以咱做法就是把数组变历,然后得到里面的每个ID就可以了。我写一下便利数组。我加上这么一个负循环,然后咱们遍历一下啊,就是YI等于零,I小于这点数组点上这个叫Les。再来一个二。加加,然后得到里边的每个数组中这个对象,那我起个名字啊,Y,我叫OBD等于这点,这个数组数组用下标得到,把它每个对象得到,然后得到之后得到里边的每个idobg.id可以得到。
11:04
包括大家看啊,它这个值里边有多个值,然后多个值里边有ID,所以把这个渠道,所以现在这就可以了,可以之后把ID放到咱的数组里面去。那怎么放呢?数组叫爱地丽斯,里边有个方法叫push push里边可以放入I地,这句话就表示把你的遍历之后的多个ID放到你的数组中去,最终数组里边就会变成咱们的这个样子。所以现在这就完成了,把数组遍历得到每个ID,把多个ID的值放到数组中,最终传递接口中,根据它进行一个批量删除。所以现在啊,咱就把这个批量删除的前端最终就完成了,就是里边的这个过程。然后完成之后,最后咱们把这个最终的代码,我们来做个测试,看一下最终的结果是怎么样的,咱们来试一下啊。
12:06
首先我点击批量删除,大家看是不是有了一个提示,因为目前咱没有选择任何风险框,它做了一个提示,比如现在啊,我就选择第一个和第二个两个负向框,然后咱们点删除提示我们是否删除点确定。大家看两条数据就都删掉了,所以现在我们就完成了批量删除的实现,也就是说啊,以上咱就把这个讲师管理模块的前端部分就完成整合,通过这个模块要各位同学掌握前后端分离开发的过程,后端编写接口,前端调用接口,最终做功能的处理,希望大家通过它把前端后端开发的流程要进一步掌握,咱们这个模块中前端后端都是从零去写的,后面模块中呢,咱们重点都放到后端,前端咱就直接复制这些整合了,但是要求各位同学第一个模块前端后端都给它好好去练习一遍,所以现在这个模块我们就最终完成了。
我来说两句