day05【讲师管理模块前端开发】/09-尚硅谷-谷粒学院-讲师管理前端-讲师删除

就是刚才提安查询带分页的列表功能完成了，下面呢，咱先做里边的这个功能。就是它要做删除功能，把这功能我们先做到，然后咱们再做添加和就改功能啊，所以第二个再来做一个叫删除功能。那给大家啊，先也是先做一个分析。讲师。删除功能，那咱怎么分析，我来说一下啊，首先第一个呢，大家看我的页面中，这我已经写好了，但一会儿咱来详细看一下啊，那咱怎么删除呢？我现在有很多条记录，比如我们要做个删除，那我们的做法怎么来做呢？首先第一步。咱就可以在我们的每条的记录的后面添加上这么一个删除的一个按钮，这是它的第一步，也就是咱们目前看到这个效果，你看啊，在每条记录后面是不是有一个删除按钮啊，所以咱们第一步就是来先做这个事情，加上一个按钮。

那这按钮怎么加的，咱们看一下我那个就是代码中啊，这个各位直接复制改就可以了，不需要你去敲一遍，那我们找到啊，在咱的列表中大家看啊，列表就这位置，然后他在最后有这么一部分。这部分呢，首先咱们先看它有一个叫to里啊，加上这个里面有一个叫button button表示是不是按钮，而这个按钮我们加的就是一个什么。删除按钮啊，这就删除修改，咱一会儿说先看删除就是一个普通的八寸。然后在button里边，因为咱要做删除，所以按钮上我们就是绑定了这么一个事件啊，在按钮上绑定了一个删除的一个事件，这是我们要做的这么一个特点啊。给大家演示。截过来啊。我写这个位置，咱们第一步添加上这么一个删除的按钮，然后加完之后，我们的第二步操作在这个按钮上边。

绑定这么一个事件啊，就是一个叫click，然后里边写上你的删除方法，这是它的第二步操作啊，这各位知道啊。然后这个写完之后，咱们继续往下来写，我们写它的第三步。小D位置啊，第三步，那第三步做什么呢。首先希望各位考虑能考虑到啊，大家注意，比如说我现在啊，咱们把这表打开，我想删表中的某一条记录，比如我现在想把里面这个就是ID是二条记录删掉，那咱怎么删？咱是不是要根据ID进行删除，也就是说如果说写语句的话，大家肯定写一个delete。From加上这个表，然后where ID等于是不是一个值，肯定是这个结构啊，虽然咱做逻辑删除，逻辑删除它也是根据ID把它那值是不是改成一啊，所以咱们你做不管是物理删除还是逻辑删除，我这个ID是不是要得到，所以咱做法第三步干什么呢？写下啊，咱就在我们那个绑定事件个方法里边传递组，你要删除的讲师的那个ID址，把ID址需要传进去，也就是在这个方法中我们要传个ID。

我先重新写啊，那这ID怎么传给大家写一下啊，给咱上午曾经说过一点。所以各位是否记得啊，就是这个地方要用它来做到。因为这个地方表示啊，有一个东西叫slope scope，我们起个名字叫scope，这scope代表你整个这个表格，咱通过scope能得到每一行中的内容，那我们用它可以得到，那怎么写，我们来写一下啊，它也在scope里边，那我们写一个就叫做scope。

点上肉这表得到每一行，得到每行中那个ID值，就是点ID，因为在咱们那个实体类中，咱看到啊讲师那个就是它那个第一个值应该叫ID嘛，就是把它得到。这就是怎么得到每一行中的ID值，用Co点肉点ID，得到表格中的每一行中的ID值。啊，这是我们写的第三步，传它的ID值。我把这个啊给大家。截过来啊，就是这么一个东西啊。所以各位把这个知道，这是第三步。然后这个写完之后，咱们下面给它稍微测试一下啊，因为现在呢，这方法中要传个ID。所以咱们啊，就是下面。我们在就是下面这个位置中往下找啊，在我们的这个里边，咱要定义这么一个方法，就是在method中把那方法我们定义一下这些方法，我这里名字叫remove date白地啊，但是名字你可以改。

咱这里边几个方法啊。这方法我想这位置啊，它就叫做删除。讲师的方法，然后方法名字叫这个remove date，白D里边我就写个ID。JD啊，就是咱要得到的传过来那个ID。这个啊是咱的方法，然后这一写完之后，我们先做个测试，开ID有没有啊，我就直接加个alert了，白ID咱做个输出了啊传ID那我们先试一下啊，也就说怎么试，在表单就是在我们那个列表页面中，当我点删除，它肯定会触发事件调离方法，在方法中咱就把我点的讲师的ID能给他呃了了出来，因为上面这个咱已经做了绑定。那咱们来试一下啊。比如说我现在点第一个就是李刚这个点删除。

大家看。ID是不是有了啊，这出来了，比如说咱再试一个这个李四ID是不是也有啊，这5746啊，这是那个什么9762，每个ID都不一样啊，现在就得到了，然后得到之后下面咱就来做这个删除，那怎么删除给大家说一下啊，按照我们就是上午说那个列表步骤。因为删除呢，咱肯定要调这个接口，就是调我们的啊，找到那个删除这个接口，那这删除接口咱们也是在我们的这个teachers里边，就是teacher.JS里边把方法定义，然后页面中做调用啊，咱肯定是做这个过程。那我来写一下啊，第一步第二步第三步做到了，然后咱写第四步。脚的位置。第四步，我们要做的事情就是。在我们的API的文件夹里边那个teacher.JS里边，定义你删除的接口的那个地址，把这个定出来，这是它的第四步。

那咱来定一下啊，步骤都是固定的，咱来到这里边就是在API中的。E Du teacher里边那这个方法再用它，其实改一下就可以了，里面结构都差不多啊，那我写下一个啊，我加个注，加个逗号，然后第二个叫删除，比如说删除我起个名字，我就叫这个delete teacher ID。删除的时候呢，咱肯定有一个那个讲师的idd反过来，然后传完之后里边的结构，就这个结构再用它改一下啊，就这个结构不变。这个方法加个注释，它叫删除讲师，那我们怎么做用它来做个修改啊。首先第一部分加上你的接口那个地址，那地址在到里边复制一下啊，它就是edu service teacher。

然后在这上边没有加值，它就直接有ID，那我们写法就是edu teacher。后面写上你那个ID。就是直接用这个表达式加飘的符号，把这给它拼接上，它也是路径传值啊，就是一个ID，然后写完之后咱看第二部分，因为现在这个删除方法不是POS提交它是不是这个。底delete的提交，那我们写个底delete。这个提交方式，第三个它没这个参数，这个可以去掉，因为它只有一个ID，没有别的参数，所以这样的话，咱就把这个删除的方法定义出来了，就这么做。啊，这是一个写法，仿照它会能写出来，然后别忘记这里边加个逗号，这是删除，然后传个ID，这里边路径要写对，传入ID值，它是比例的提交，提交方式不能写错。

我们就是这么来做啊。我把这个代码给大家接过来，在里边定义了。这么一个方法。这是第四步操作，我们就完成了啊。然后这个完成之后，下面我们进入到第五步，那就是在页面中咱做个调用了这第五步。在我们的页面中。调用方法实现这个删除。那咱们最后来写一下啊，看这怎么做。咱来到页面啊，在页面中要调用，首先第一步t.JS需要先引入，因为咱们之前已经引过了，不需要再引入，那我直接调就可以了，那大家看怎么调用啊，到里边我们就写一个叫。Teacher点上那个方法，方法在里边咱复制过来，因为它没有提示出来啊，咱给它复制要delete teacher ID后面传入这么一个ID。

然后传完之后，我们可以写这么一个，就是点赞，包括这个叫点catch。就是这么一个结构，点赞里边呢，咱可以加上一个叫response。然后加上箭头函数。在这个catch里边，我可以加上一个叫I种啊，然后加上一个。箭头函数，这个就是一个删除的一个过程，咱就是调接口可以做到，而这里边如果说删除成功，就这位置，它叫删除成功。那就可以啊，比如说给他来一个提示。然后写一下啊，咱就给他来一个这个提示信息。提示信息，比如提示他这种成功，当然各位要知道啊，大家考虑，比如我现在点删除，只要记录可以删掉，当我删完之后，我们要干什么事情。希望各位能想到啊，咱删完之后是不是还要回到这个页面中，但是页面是不是要重新刷新，有你删掉数据里边是不是应该就不存在了，所以说这里边我们要做的是第一个删除成功，给他一个提示，提示它成功，然后第二个我们就要再回到我们的列表页面，但是列表页面要重新刷新，就是刷新出你删完之后那个结果。

那怎么刷新，注意咱们有这个方法，那我再调次这个方法是不是就回来了啊，咱们可以再调一下啊，就是这点get list就可以了，然后这里边加个提示啊，这单一会到UI中可以找到啊，主要这么一个结构啊，咱就可以这么来做。但是这么做呀，其实删除是能做到的，是没有问题的，但是目前从就是有一个角度考虑，有这么一个缺陷。这个角度叫什么呢？它叫做。用户体验。这个词不知各位是否有感受啊，什么叫用户体验呢？就是我们给用户做的任何的功能，让它就是更友好，更符合用户的使用习惯，这叫用户体验，那我这里边我这么做就会有用户体验问题，什么问题给大家说一下啊，希望各位应该能想到，我觉得各应该都见过这种情况，比如我现在点删除，大家要知道咱们一般的系统中，我点删除不是直接删吧。

他是不是要先来个提示啊，说你是否删除数据，点确定再删，点取消是不是就不删，所以咱要给他来个友好性的提示，让他先确认一下，假如说他点错了，咱们给提示那就删掉，他也看不到那个删掉，所以我这里边点删除给他来个提示，当他点确定再删掉，咱要加上一个用户提示，就是从用户体验角度考虑，看他这里边就是更加符合用户的要求。所以大家注意啊，不要这么来做，但是就是按照我这种方式写功能绝对没有问题，只是用户体验很差，因为用户没有看到是否删对，是否删错，这些数据就没了，所以咱们要来个用户提示，那怎么来个用户提示？

这里边啊，咱们来到MUI中找到这么一个提示框，里边都有啊，咱找一下啊。然后往下找。啊往下边啊，在下面呢，应该有这么一个叫做弹框的这么一个地方，咱找个弹框啊，这里边啊弹框，然后弹框里边咱找一个啊，首先比如我们看一个。这个应该不太合适，大家看这个弹框。就是他。我把这个啊给大家先截过来啊，咱给它加一个弹框，而这弹框什么意思呢？它叫做确认消息，那我们点一下大家看啊，比如现在我一点。看到这种效果了吗？答案是不是可以做这个效果就是当我用户点删除，它就弹购框，当你点确定删除，当你点取消是不是就不删除，所以咱们啊，就给它加上这么一个确认框，这么做用户体验肯定更加好，当我点删除就弹这个框，我一点确定删掉，点取消肯定就不删。

啊，这个啊是我们要实验的这么一个基本效果啊，然后把这个截过来，然后咱给他就加上啊，怎么加这个代码不需要各位去挑，咱从它代码中复制改就可以了，因为里边你发现啊，这代码写到特别的详细，他把每步都给咱们写到了，那我现在就把它复制过来，然后咱们改成我们的效果就可以了啊，咱就做个复制就可以了。咱看一下啊，上面是三个括号，大括号，下面去掉三个大括号，然后是中间这个位置，我把这部分我就复制过来。注意啊，这个用法啊，不需要你敲，直接复制就可以了，因为你敲很容易错啊。

然后给它拿到这里边，呃，这一段我先给他先注掉啊，一会咱再改。然后拿过来啊，拿回来之后我把格式稍微调整一下啊。这个格式。然后咱们看一下啊，就是现在这里边呢，有这么一个叫确认框，当咱们点删除，它会调方法，方法中来个提示，叫这个confirm，就是确认。这个信息改一下啊，说此操作，比如将永久删除这个讲师的这个记录。然后你是否继续点确定，还有取消啊，这是它那个提示，然后大家看啊，在下面呢，有两个方法，一个叫点赞，一个点开，那什么意思解释一下啊，就是如果说啊，你点击这个确定。他会执行这个。正方法。如果说你现在。点击这个取消，他会凭这个。

Catch方法啊，就这个特点，但是目前呢，咱这个取消应该不需要做什么事情，就是取消就没必要给他一个提示，咱没必要做成这种情况，然后你看它的原始代码中确定咱可以删除成功，但是取消咱没必要来个提示，所以这个咱就可以不写，写上也没有错啊，但是没这个必要，没必要取消再提示一下，那么这个给他就去掉了，咱就要保留这么一个。Cash就是点赞一东cash给它就去掉。啊，这我给他就删掉了啊，咱不需要它啊，如果你加上也没有错啊，现在这个结构当咱点确定就执行点赞，那我现在在点赞里边，咱是不是就去调用咱那个删除方法。啊，调用删除的方法，然后实现删除方法，就是咱们写的这个东西啊，咱们刚才刚写过，然后把它给大家也是复制过来。啊，就这个代码。咱们把它拿过来，当你确定掉删除。

就是这个啊。我把这个往右边稍微调整一下格式啊。就是它，然后删除之后点赞成功，成功之后呢，咱们可以来个提示信息，这提示信息。是不是就是它呀，这里边都有啊，那我们给他做一个提示，把这个信息我就截到上面来提示他，比如叫删除成功。这个哈，然后提示之后，咱们再刷新页面，就回到力网页院中来，这样的话哈，把这个效果我们就最终做到了，主要就这么一个结构啊，这就是加了一个友好性的提示。然后咱再看一遍啊，最后咱来测试它的做法，就是当我点这个删除，调这个方法，先弹个确认框，在确认框中有确定有取消，当我点确定进行点赞，点取消进行catch，当然catch取消不需要提示，咱不需要写，直接点赞就可以了，在点赞里边确定我就调方法做删除，删除之后我们提示成功，然后回到列页面。

啊，这个我们就做到了，就加了这么一个确认框，把这个就能实现出来啊，所以大家知道这么一个过程啊，主要是加上这部分，其他的跟咱之前写的一样。这个代码啊，我先截过来，然后咱们来试一下最终的这个效果是什么样的啊，咱们把最终的结果我们来试一下啊。这么一段啊，基本的代码。这个啊。然后咱们啊，把这个加上之后，最后咱们把效果我们就最终来试一下啊，看一下最终的结果，这是删除功能，那再来测试啊。我先刷新。然后刷新之后，比如我现在就删这个李刚的这条记录，李刚这条记录在我这里边应该是他啊这条记录他现在这个值是零，然后后面删完之后应该会变成一，那大来试一下啊，大家看效果啊，现在我点删除。

看到效果了吧，是不是就是弹购框了，当我点取消是什么都不做，因为你不删除吗？而我现在我点确定，大家看结果啊，我一点。你看这里边提示我们是不是成功，并且页面是不是刷新了，那里刚应该是没了，到表里边咱刷新。这值是变成了一啊，所以咱们要做的就这个情况啊，就这个效果，点删除，弹个框，点取消，什么都不做，点确定，把记录给他删掉，然后他再刷新页面，最终啊，显示出你删完之后的最终结果，在表里边，它那个删除标记也变成了一，咱们做的是逻辑删除情况。这是啊，删除的这么一个实现。

所以咱把它就最终做到了啊。我把这张图给大家。写一下啊，就是第六个。我们刚才做的是讲师删除功能。他这个。前端的一个实现这个啊，我们就做到了啊，所以大家把这过程能给它现出来，主要是用到UI中这个渲染框。然后在过程中有这么一个细节给大家强调啊，大家发现啊，我这里边呢，写这个点赞。咱是不是没有写点开我强调啊，点开你可以写，但也可以不写，为什么可以不写呢？写上没有错，比如你看我这里边写没有错，但我其实不写也没有问题，而为什么不写，因为就是咱们在这个里边，我在引这个蕊块的时候，它里边是给咱们做了封装。咱再看一下啊，看它的封装是就是这个位置。如果说你现在是失败，就是不等于2万，他会把我们这个失败信息给咱们做输出，所以这个K咱就不写也是对的，所以你看我这里边就没写catch，效果都是一样的，就算你有错误信息，他会帮我们把信息输出，因为它这个里边给咱们做了封装，所以咱后边再写的时候，这K就不需要写了。

这个各位注意啊，而这开要写的话就可能会有问题。这问题呢，针对浏览器的原因，我这里没有这问题我演示不出来啊，我说一下这问题就是建议各位T，咱统一都不去写，因为你写的话，在有些浏览器中，这开部分会执行两次，它框架本身进行一次，然后你的这个又进行一次，执行两次跟其实两次都叫错误，所以咱们就都不写，这绝对没有问题啊，包括你看我这里边成功是这样，失败它里边也会做输出。啊，所以这是啊一个记问题咱都统一后面不写开始，因为他确实不需要里边都有。

这是啊，咱们这个最终的功能，讲师的删除功能咱们完成了啊，就按照我这个流程，各位能把这功能就能做到，里边每一步应该我都写到了。啊，就是这么一个。基本结构啊。对，咱们完成啊。