53-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色批量删除

大家好，前面呢咱们完成了角色的列表添加修改以及删除功能，那咱们下面呢，完成最后一个功能，角色的批量删除功能，批量删除功能怎么做？给各位同学先做个分析，然后咱们进行详细的实现，那这里边给大家来分析一下。首先我在图里边给大家画一下这个功能咱们到底该怎么去做，我现在来到图里边，首先大家想一下啊，我们在平时普通的系统中应该见过很多这种批量删除过程，也就是说我们之前做的功能呢，每次只能删一条记录，而我现在想一次性删多条记录，这个叫批量删除，那怎么做呢？咱们来分析一下，首先我们的第一部分各位应该都见过啊，咱们在每条记录前面是可以加上一个复选框，我就简单画一下，加上一个复选框，然后加上之后呢，我们在页面上可以加上一个按钮，咱们就叫批量删除。

这是我们页面上的效果，那这功能该怎么做呢？给大家说明，比如说我现在我选择了某个复选框，假如说我选择了第一个，选择了第二个，然后咱们点击批量删除，那怎么做，把我选择复选框的两条记录是不是都进行删除，这个过程就叫批量删除，所以咱们先做个分析，而批量删除之前我们写的接口，这个接口我们先看一下。就是这个接口咱们怎么做？首先传入多个ID值，咱们通过Jason形式传递，也就是传成Jason的速度格式，因为Jason速度对应Java中的历次集合，得到你的多个ID值，最后调方法根据ID进行批量删除，这是我们做了一个基本分析，那下面呢，咱们开始把这功能进行实现，这个功能提前说明很多地方用的还是element UI中的组件进行视线。

那咱们下面来做一下，首先第一部分咱们还是来到这个肉点JS里边，把批量删除的接口先做个定义，我在里边写一下。批量删除，然后结构跟那个删除应该类似，咱用它快速改一下，这部分我们直接复制过来。放到这里，低档删除，我们给它起个名字，我们就叫这个bench。然后在里边呢，加上这个就是多个ID，其实就是一个数组形式，对应扎va中的一个集合，咱们叫ID list，这是写的一个方法，然后方法下面首先加上路径，路径呢我们从接口中复制一下半尺，这个咱们来拿过来。

这是第一部分，然后第二部分提交方式是底delete提交，并且它用的是瑞快的body底，咱们之前提到过啊，快的bodyy表示Json形式传递，那这里边怎么写，大家想一下怎么做，咱是不是加上一个date，然后date后面加上你这个参数ID list，它就会把ID list转换成Jason格式，然后进行传递，最终在接口中咱们得到封装调方法进行删除，所以以上就是批量删除接口的定义，特别强调这些名字不要写错，包括提交方式，包括这些一定要写正确。这个第一部分完成，完成之后我们进入到第二部分，看我刚才图里边啊，咱做法就是在每条记录前面是不是要加个复选框啊，并且加上一个批量删除的按钮，那咱们先把按钮加上，这个按钮呢，我从课件中直接复制一下。

咱们之前呢，有一个添加按钮，那我在添加的后面加上这个批量删除，咱们找到添加应该是在这个位置。OK，找一下啊，是在这里。然后在下面我们加上一个叫批量删除，现在这个按钮就加上了，到页面中咱们看一下是不是这个批量删除。按钮加上之后，下面呢，咱就在每条记录前面加上一个复选框，那我们来加一下，怎么加，从课件中我直接复制一下啊，大家看这一行代码。在IVUI中呢，给咱们封装了一个类型叫selection selection代表你的复选框，那我现在在我的table里边加上这个selection，加到这个下边，你看啊，里边有很多yellow table column，咱这么做，在每条记录前面就会多一个复选框，它的类型叫selection，那咱们看一下。

大家看是不是有分享框，这样的话就可以了，然后这个分享框中它给我们封装了一个功能，大家看这功能什么功能是不是全选，全部选就不需要我们再去写了，它里边已经做到了，所以以上复选框我们就做了添加。复选框添加之后，我们继续来做，下面做什么呢？大家注意啊，比如说我现在选择某个复选框，咱们最终是不是得到我选择这行的ID址，比如现在选第一行，我选第二行，再选第三行，把这三行ID值咱们是不是都要得到，也就是说我每次选择和不选择，我要知道这里边这个ID值到底是多少，咱们传递才能删除。那怎么做呢？给各位强调啊，在UI中给咱们封装了一个事件，这个事件叫selection change，然后在里边呢加上一个方法，这个事件是什么意思呢？大家看这单词，Selection理解为就是复选框趁至是不是要改变呀，也就是说你每次复向框只要发生变化，它就会触发事件调方法，什么叫发生变化？大家看啊。

我这个是不是叫选择，这是不是叫没有选择，就是你只要选择或者不选择，它发生变化，这事件都会触发，一触发咱们这个方法就会执行，那现在我把这个给各位复制过来，咱们放到这个table里边，就是这个位置。现在就可以了，然后可以之后呢，下面我把这个方法我们做个创建，咱们写到下边。我写到这个MY里边，注意啊，别写的位置啊，方法都是放到MY里边，这里做个注释。复选框它发生变化。然后就会执行下面的这个方法，咱们起个名字叫handle selection change啊，当然你可以叫别的名字，我就跟课件中保持一致的，然后这个里边呢，它给咱们还封装了一个功能，这是由IUI这个事件做到的，封装什么呢？比如说现在啊，我选择这个分享框，他会把这一行的这个内容给咱们都传到方向中来，我现在选第二行，他又会把这行内容也都传过来，你注意这个过程中啊，我选的第一行应该传一条记录，选第二行是不是传第二条记录，所以最终这两个记录都会在这个里边咱们都能取到，就是你选择了哪行值咱们都能得到，那现在我这里边加上一个参数，再来接收一下这个参数，我就叫selection，然后selection，就是你每行选择的这个那种。

这里特别说明啊，因为咱们可能选一行，也可能选多行，所以说我现在想得到多行的内容，我就这么来实现，在上面呢，咱们建上一个数组，通过数组来得到你选择多行的内容，我起个名字啊叫select value，加上一个数组，然后加个竖式，就是注释啊，复选框选择的那种，它封装的这个数组。

然后在这个位置咱们做做封装，这次点Y6。等于selection，也就是说每次你选择了复选框，它把那行的内容肯定都复制过来，所以咱们通过它最终得到，然后这个咱们做个输出，看一下它的值到底是什么，也验证一下我刚才说的这段话。o.log咱们做个输出，然后咱们下面做个测试，看一下什么样效果。现在我打开浏览器的F12。

打开，然后大家看一遍啊，这里边啊有一些警告，大家给它去掉，这不影响我们运行，然后各位注意我们的效果啊，大家注意看，我选择第一个复选框，大家看下面是不是有输出啊，输出就一个数组，然后这个下边是零，咱们看啊，数组中的值是不是就是这一行的这个内容，你看内容很多，比如咱们找主要的，其实咱们最终用到是不是就是ID，在这是得到的数组是零，那咱们再选一个，大家看啊，又输出了，我们发现啊。数组下标是不是零和一啊，因为咱们选择了两个，所以目前数组中有你第一次的这个值，又有第二次的值，这里边都有，那咱们再来看，比如现在我去掉某一个，再输出是不是就是一个我再去掉，那这数度是不是等于空了，就Le子等于零，所以以上啊，咱就看到了，也就是说的简单点，每次选择复选框，它就会触发事件，触发事件之后把这行的内容给我们传过来，咱用一个数组进行接收，最终从数组中取到多个ID值，调接口方法就能实现这常删除，所以现在这个部分我们就完成了，完成之后呢，我们做最后一步骤，最后做什么呢？就是我们现在选择复选框之后，点批量删除，是不是最终进行删除，那最后再来做这个批量删除过程，咱们来看一下啊，首先找到批量删除。

它是在这个位置。然后他掉了方法叫半尺蕊木，我在下面把这方法给它做个创建，写到这里。批量删除，Remove。在方法中咱们开始编写代码，刚才咱看到了每次选择复选框，数组中是不是有这个值啊，所以第一部分呢，咱们写的完整点，先做个判断，判断什么呢？就是如果说啊，你没有选择附小框，咱点删除是不是应该是不能删除，所以咱们做个判断，那怎么判断，就判断数组的长度是不是等于零，如果它等于零，那咱是不是就不需要删除，因为你没有选择附小框，这是第一个，那我加上一个判断。

我这里写一下啊，就是这次点select y表。啊，歪表。他的认识。如果说等于零，那就表示咱目前没有选择复选框，没有选择的话，我就直接退就结束了，包括咱可以给他来个提示，告诉用户说现在你需要选择复选框，那这个提示我就把这个复制啊，再用它改一下。或者说啊，咱可以用课件中的这个提示，其实都是类似的，是这里边用的是一个警告，刚才我说那是成功的，那我就用它了，把这个咱们拿过来。

你没有选择复选框做个提示，说请选择要删除记录，然后直接结束，如果说咱们选择了的话，那咱就调接口进行删除，这个删除呢，咱们还是跟之前一样，加上这个就是确认框的效果，我把这个咱们复制过来，把这个给它还是改一下。确认框的效果放到这里。比如说咱们看这过程啊，如果说没有选择，直接re退提示，如果选择的话，那咱们加个确认框，我们进行删除，说此操作将永久删除该角色是否确定，确定咱们调方法取消，那就catch，那咱现在啊，我们就调方法进行实现，咱们来调一下啊呃，这个结构一会咱们再给他改啊先放到这里。

同学们调一下方法，那怎么调方法呢？肯定是调API中，刚才我们定义的方法就是这个方法叫半尺。然后在里边呢，传入你那个就是多个ID值的数组形式，比如我们起个名字啊叫ID list，这个咱们一会儿再处理，我先放到这里啊，来个y ID list，先等一个空的数组，然后咱们马上再进行处理。先放到这里啊，然后现在我们调方法传入你的多个ID值的数组，最终我们进行这个删除，咱们加上一个Z。然后里边加上这个response箭头函数，这样的话就完成了删除，删除之后跟之前一样，咱们还是提示信息，然后刷新页面，这部分我直接拿过来。

所以大家看啊，以上咱就完成这么一个基本结构，咱们再看一遍，然后把那个ID部分，我们最终给它完善出来，那咱们快速看一下啊这个流程。首先我们的第一部分选择复选框，它会触发咱们刚才看到这个事件，也就是这个事件selection，然后调用我们的方法，在方法中把每行选择那个值给它复制到这个数组中去，然后下面我们点批量删除，先判断是否选择，如果没有选择直接提示，如果选择的话，我们调接口方法请删除，删除之后提示信息，并且刷新页面。这个我们就完成，完成之后呢，最后看这里，这里干什么呢？咱就做一件事情，获取多个复选框对应的ID值，给它封装到一个数组里面去，因为咱们最终要的应该是这个效果，是不是一个数组，咱们接口中用的是这个叫request body，最终接收应该是这种形式，给咱最后想办法把ID变成这个样子就可以了。

然后这个怎么做，我们来写一下啊，过程应该并不复杂，大家看一下啊，目前咱的ID在哪里。大家想一下在哪里，是不是在这个数组中了，所以咱做法怎么做，把数组咱做个便利，得到每个ID，把ID直接放进去就可以了，所以下面我们来做一下啊，我们写一个数组的便利。咱直接啊，用这个普通负循环就便利了。这里啊，给大家写一下啊，就一个便利的代码，咱们写一个YI等于零，I小于这个就是这次点select value，点上lengths，再写一个叫I加加。然后写上之后，咱们获取里面的每个那个对象select value，然后咱们通过下标得到每个对象，我起个名字就叫OBD，得到每个对象之后再获取里边的ID值，那咱们就是来个YID。

等于OBG.id现在ID值得到，得到之后呢，把多个ID值放到咱的数组里边可以了，就是这个，这是一个数组。那怎么放，注意啊，如果各位不知道，现在给他记住啊，数组中有个方法，这方法名字叫push，就是推的意思或者放的意思，通过push把这个ID址咱们给他就最终放进去，所以现在就完成了，最终在数组中有我们的所有的ID。以上咱们就完成了批量删除前端的实现，这是我们写的最终的代码，然后这个写完之后，咱们把这个再说一遍啊，最后我们做个测试，我们的做法就是从数组里边得到每个对象，每个对象中把ID值取到，把多个ID值放到数组中，最终传到接口中，咱们进行批量删除，这样的话在这功能就最终完成了批量删除，那完成之后呢，最后咱们把功能试一下，看一下最后结果怎么样。

咱做个测试，比如说我现在我就是选第一个，选第二个，然后咱们点批量删除，大家看弹个框点确定提示我们是不是删除成功，包括啊，你看现在应该只剩下了六条记录，呃，咱再看一点，比如现在我再删一个，我现在点批量删除。是不是就是五条记录，所以现在这个功能我们就做到了，包括啊，我现在如果说我什么都不选择，直接点批量删除，是不是一个提示说请选择要删除记录，因为你没有选择肯定不能删除，所以以上就是批量删除实现，也就是咱们到这里呢，就完成了我们这个项目中的第一个功能模块，角色管理的前端和后端开发，通过这个模块的开发，各位要掌握前后端开发的流程，包括。

接口该怎么编写，包括前端该怎么编写。