4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/27-尚硅谷-云尚办公系统-角色管理前端-删除.mp4原创

各位同学大家好，刚才呢咱们完成了角色的列表功能，下面呢，我们开始整合角色的删除功能，把这个功能进行实现，那咱们看怎么来做，首先按照咱们刚才分析的过程，因为路由我们已经创建了，而咱的做法就是大家看啊，在每条记录后面是不是有一个删除按钮，当我点按钮是不是一个删除，所以咱们做的就这么一个效果。那怎么实现，我们看具体过程，首先第一部分咱们来在A个接口进行定义，那我写到下。角色删除，然后接口，我们给接口起个名字，比如说为了各位看的更明确，我跟课件中保持一致，叫by ID，根据ID进行删除，传入ID值。在里边加上具体内容，我把这部分复制，咱用它快速改一下，首先加上删除的路径，咱们到接口中找一下删除。

删除应该在这位置加上remove传ID，它是比例提交，我们给他快速改一下。瑞沃。传入ID，通过表达式取到它，用的是比例的提交。然后它没有其他参数，所以现在删除的接口我们就完成定义，完成定义之后，下面呢，我们来到页面中，在页面中开始进行调用。大家来看啊，在页面中的这个位置有一个EL button是个按钮，然后按钮里边呢，我们加了一个删除。方法，咱们起个名字remove date，当前这行的ID值点方法进行删除，所以咱们在下面来加上这个方法，我写到这个位置。

这里。删除。调用方法里边传入ID，然后方法里边咱就调接口进行实现就可以了，但是实现的时候呢，大家考虑这么一个问题啊，各位同学在日常的应用中应该都见过删除怎么删除，咱们删除按钮应该不是马上删他要做什么事情，这各位应该都见过啊。他是不是要弹个框啊，给我们做个提示，说你是否删除，点确定删，点取消，是不是就不删，所以咱们也这么做，让他弹出一个确认框，有确定和取消，那这个怎么做？I的UI中有相关的组件可以实现，大家看我课件中啊，我把这组件直接复制，这是UI中做到的，这也不是我写的，是他提供出来的，封装好这么一个写法，大他把这个拿过来。

大家看啊，它叫this Dollar，符号confirm，然后加上一个提示说此操作将永久删除该记录是否继续，然后你确定或者取消，在这过程中我强调啊，如果说你点确定，它会进行一个方法叫Z方法，如果你点击取消，会执行一个叫catch方法，但是因为咱们点取消应该什么都不需要做，所以咱们只需要写个Z方法就可以了。这个我应该说明白了啊，我再说一遍，这是由IUI中做到的，当你提示信息中点确定会执行方法，当你点取消会执行一个catch方法，但是取消的时候呢，咱们应该是什么都不需要做，所以咱们直接写个Z就可以了，当点确定执行在这里边呢，加上我们固定的写法。咱们加上一个箭头函数，然后里边调用接口进行实现，我们来做一个调用。

咱们写一下啊，加上A片，点上刚才的方法白地。入ID值就可以了，然后这个写法呢，咱们就换一种写法，其实你可以这么做里再点啊，我现这么来写啊，大家我现在这个写法我再加个。什么意思呢？就表示啊，你调用接口成功之后，你re退会执行下一个Z方法，然后在这个Z里边得到接口，返回到内容，我可以这么来写啊，当然你可以不这么写，按照我们之前写法不加，直接后面写Z也一样，我就换一种写法，Response，那就是借口反映数据，咱们提到当它是表示成功。那大家想一下啊，删除重之后要干什么？做什么？他是不是要刷新我们的页面？

然后有一个提示的信息，应该做这个事情，那咱来刷新页面，就是调用我们这个列表的方法，Fetch date，然后有一个提示信息在U中给我们提供好了，这我就直接复制啊，就是一个操作成功的提示，提示它删除成功。以上删除的整合我们就完成了，有这么一个结构，咱们用这个确认框，确定取消点，确定执行Z调用接口，最终刷新页面提示信息。这咱们就写到这里，然后写完之后我们到这里边做一个测试啊，因为数据比较少，所以我把这数据库里面数据啊稍微改一下，之前咱都测试给他删掉了，我把这值啊都给它改成零。让他多几条数据，方便咱测试，现在啊，我在刷新。你看里边是混合数据，比如现在啊，我这边我就把这个，呃。

管理员的这条数据给它删掉，咱就删它了啊，我点删除，大家看是不是弹个框取消什么都不需要做，但是我现在点确定，你看啊，当前是五条记录，我现在点确定。提示我们成功变成几条是四条了，证明咱的删除就完成了，到数据库里边我们刷新来看一下。这值是不是一表示已经正确删除了，所以以上就是删除前端的整合，这个咱们就完成到这里。