00:00
各位同学大家好,下面呢,咱们继续来完成讲师管理的前端功能整合,刚才咱们完成了讲师的列表功能,那下面呢,我们继续来完成,在里边呢,其实我们主要完成这么几个功能,我把功能先列出来,然后咱们慢慢来实现。首先第一个功能咱们已经做到了讲师的列表功能。具体说是条件查询带分页的这个功能,这咱们已经完成了,然后这个之后我们马上完成的第二功能,咱们做一个讲师的删除功能,具体说就是逻辑删除功能,然后逻辑删除完成之后,第三个咱们完成一个讲师的添加功能。这咱们马上做到讲师添加之后,咱们到第四个我们要完成就是讲师的修改功能,包括数据回写,包括最终修改,然后这个完成之后,咱们的最后一个功能完成,就是讲师的批量删除功能。
01:03
我想这里第五个。讲师的批量删除,就是你一次性能删除多个讲师,所以以上是咱们要完成的几个功能,目前咱们已经完成的第一个功能。那下面呢,咱们来做第二个功能,讲师的删除功能,看这个功能该怎么去做,我们来做个实现。那咱们来看一下啊,首先第一部分,因为咱要删除大家看啊,在页面中呢,这里边已经写好了,有一个删除的按钮或者超链接,当咱们点它进行删除,删除的话呢,因为它要调用接口,所以按照咱们的过程,咱们同样在我们这个API中的JS文件中,把删除的接口在里边,我们先做一个定义,那下面我们来定义一下。讲师的删除的接口。咱们写一下啊,我按照这个咱们复制快速改成我们的效果就可以了,首先我们起个名字,这个名字比如我叫这个。
02:11
Teacher。ID就根据ID删除讲师,然后在里边呢,传入讲师的那个ID,这是咱们写的一个结构,然后下面写上我们的方法,这个方法我到接口中咱们复制找一下,各位写的时候也是到接口中找一下,不要写错,那我们找一下啊,讲师删除的接口这个。咱们是后面传个ID,那我写一下啊,前面部分咱都抽取的是固定的,后面加这个值。木。呃,重新复制一下啊,没复制过来就是要。我再复制一下。后面加上我们这个ID。所以现在路径就写出来了,洗完之后它的提交方式,注意啊,是底delete的提交,这个需要改一下。
03:07
然后它里边呢,没有其他参数,所以这部分我们就去掉了,因为它没有别的参数,它只是传个ID,根据ID最后删除,所以现在这个方法就完成了定义,然后定义之后下面呢,我们在页面中做一个调用,大家看怎么做啊,首先第一步先引入JS文件,引入了,然后第二步大家看。这位置有一个按钮,里边有一个事件,然后这个方法,当咱们点按钮,它会传入当前你这行的ID,这个我之前提到过啊,此扣代表整个表格,肉代表每行ID,表示每行的ID,所以传入,比如点这个传入这行ID,我点它传入这行ID,把ID传过来,所以咱就直接根据ID做个删除就可以了。
04:00
那我在下面写下啊,我写到这个位置。讲师的删除蕊木白帝里边得到传来的I地址,现在在里边咱们调用接口就可以了。但是各位注意啊,各位同学呢,我觉得应该都见过这么一种场景,当咱们点删除,并不是马上删吧,他要干什么。是不是要弹个框啊,这个框里边一般会有这么一个提示,说你是否删除,或者删除之后不能恢复,确定删除取消是不删除,所以咱一般要弹个框,这个框我们叫一个确认框,就是确定和取消,所以现在咱们同样可以这么做,而确认框到UI中咱可以找一下,因为这里边都有相应的这个操作。那我们找一下啊,大家看这里。有一个叫弹框,然后弹框里边有一个叫确认消息,咱们一点就出来了,有确定,包括有取消,当咱们点确定删除成功之后,咱们是不是也可以有这个提示就删除成功,所以现在啊,用这个确认消息框就可以实现,它里边提供了源码,那咱把它复制快速改成我们的效果,因为它里边都写好了,咱就复制一下啊。
05:22
注意啊,复制的时候呢,不要复制错,你看这个括号啊,前面有三个,后面咱们去掉三个,那就是中间部分,把这个拿过来,然后在我们的代码中,咱们快速做修改。就这里边让它弹出一个确认框,然后这个怎么做,咱们看一下啊,首先用这个叫confirm弹框里边的提示改一下,说此操作将删除你这个该讲师的信息。改一下啊,是否继续有确定有取消,各位注意啊,当你点确定它执行的是里面那个Z方法,当你点取消执行的是这个开始方法,但是这里边其实我们取消之后呢,不需要做个提示,就是这个意思,你看啊,它的原生的里边点取消这一个提示,但是其实咱取消不需要提示什么,不做就可以了,所以我们现在这catch其实就不需要了,这就去掉了,而这里边就是当你点确定执行Z方法,Z方法里边咱们就可以调用接口实现删除,那我来调一下啊。
06:34
Teacher API,就咱们起这个名字,点上定义的方法,这个方法刚才写到ID里边传入你的这个ID。加上一个Z方法,然后咱们加上一个response箭头函数来加一啊。Response检测函数then,咱知道表示成功,而我现在当我删除成功之后,所以咱们做两个事情,首先第一个事情。
07:06
咱是可以来一个提示的信息啊,就告诉他说你删除成功,另外删除之后咱是不是可以刷新我的整个页面。啊,就做一个页面的刷新,刷新页面咱们直接调这个fetch data方法就可以了。所以说以上。删除讲师的功能我们就完成了,加上一个确认框,然后调接口成功之后提示信息,刷新页面,这是我们完成的这个功能。然后完成之后,下面呢,咱做个测试,看一下效果怎么样,我们来试一下啊。来到这里边刷新。比如现在啊,我就删除里边的,就是这个上官讲师这条记录,我点删除大家看。是不是弹个框点取消什么都不做,然后现在我点确定,各位看提示我们成功,然后这里边刷新了剩下了五条记录到表里边,咱看一下,看这个上官讲师的值变成是不是就一了,所以现在逻辑删除讲师功能的前端,我们就完成了整合。
08:18
啊,这各位能快速做到,咱们用到了IUI中这个弹出框,或者说确认框这个组件,最终做了一个实现。这个我们就写到这里,讲师的删除功能。
我来说两句