day07/下午/140-尚硅谷-尚融宝-删除功能的实现和断点调试

下一个内容呢，咱们就是完善这个积分等级的这个模块，那完善积分等级这个模块呢，首先我们呢，要呃看一看还有什么其他的功能要做，那肯定这里面除了列表功能的话，还有其这个增加功能对吧？删除功能啊，点按钮删除功能，然后呢，就是啊编辑功能啊，数据回显功能以及保存功能是吧，这么老多我们一个一个来做，首先呢，我们来看删除功能。那删除功能的话呢，第一个步骤我们呢，先确认一下咱们后台的删除接口是好使的，这是第一个步骤，有些同学后端的接口还不好使呢，然后就来调前端怎么调都不好使，那你就本末倒置了，你先把根本解决了，接口先确定它是好使的，好。然后所以呢，我们来到积分等级管理，你先来检查一下你的接口是好使的啊，我这个肯定是好使就不检查了，好这面SQ的如果成功了之后呢，我们再来写前端，好写前端的话呢，和前面我们写的那个列表接口是一样的。

也就是说在API靠integro grade里面，这面呢，我们是定义了啊，获取积分等级列表，那我们再来定义一个方法，就是根据ID删除积分等级，怒来ID好，然后呢，跟上面一样啊，一葫芦还飘写return test，圆括号，打括号，URL冒号。然后前面的这个地址把它粘过来，好，当然了，我们这个应该是删除，所以呢，删除这块就是remove by ID，把类似换成remove，把后面这个ID呢换成ID对吧？ID在哪来呢？肯定是前端到时候点删除按钮的时候传过来，所以呢这块传个参数过来，然后接下来呢，这个方式my third，好，然后这块呢，跟后端一定要保持一致，后端呢叫delete啊，这面呢，我们就写delete对不对，好，那这块呢就是我们的。

Remove by ID了，所以大家看一看它是不是和我们前面的这个list基本上是一样的，就是我们要处理一下，比如说名字你得换一个吧，啊，如果有参数的话得传一下吧，URL地址根据实际的接口写一写呀，Method third，根据实际的接口改一改啊对不对？好这块呢，就是我们的API的一个定义了，那API定义好了之后呢，我们还是在我们的页面当中去调用这个API，那我们要思考一下在哪个页面中调用，是不是还是在这个列表页呀，因为我们是打算在这个列表页的后面呢，加一个删除按钮啊，然后一点击这个删除按钮呢，就调用刚才那个API，所以呢，我们先来到这个列表页。

那还是找到我们的views里面的这个列表。好，在这个列表里面呢，咱们先写一个方法啊，就是要调用刚才那个API的一个方法，那么比如说就就叫RA木白ID，好，然后接下来呢，还是调用刚才那个API里面呢，我们写的removed方法，那这面呢，我们就egalrate API，然后呢，这里面我们写的是remove by ID对吧？啊，点一下啊，它没有自动提示啊，你把它复制过来，然后接下来呢，传一个IDID从哪传过来呢？因为这个地方是不是要一个ID啊好，你这个地方是不是就得给他传一个ID，那这个ID从哪来呢？不知道，那我先在这块先定义一下，一会谁来调用它，我就再想办法给它传过来，是不是啊，所以这样写，写完了之后呢。他们跟上面一样啊，写第二，那然后接下来呢，瑞棒好这个地方呢，我们就啊先写一下。

它有一个叫做那个山成功啊，啊，就是this啊在啊我们的element UI啊，它已经整合到我们当前的这个项目的上下文当中了，怎么整合的呢？简单来看一下，问JS里边你看这块是不是import了一个element UI模块啊，好，那这样的话，我们的element UI呢，实际上就直接整合到我们的项目当中了，包括就是element UI element UI的这个CSS element UI的国际化设置啊，都整合到我们的项目当中了，他如果是通过这种import的形式整合的话，就是模块化的形式整合啊，那么我们呢，就可以直接在我们的这个页面当中，通过this.dollar message的形式来调用里面的模块Dollar message，这是个固定的用法啊，就大家记住就行了，好，this.dollar message调用的是哪个功能呢？我们打开element UI的组件库。

这个里面呢，有一个叫做message。这呢消息提示框，第二呢，是这个消息提示框的这个组件库，然后它在使用的时候，大家看是不是这四点到message啊，啊就这么用的，明白不明白好，然后呢，比如说我们可以打开就是这种，这是一个普通的消息提示啊，还有这种啊，这个内容更复杂的消息提示，然后另外呢，还有就是这种。这个这也是普通的啊，这in for啊，这是成功是吧？啊，这是警告啊，啊这是错误啊，我们想显示一个成功的消息提示，所以就是第二个，第二个的话呢，就是。第二个就这个啊，这就是第二个把它粘过来用一下，你看就粘过来用就行啊好，然后呢，这样的话呢，就恭喜你，这是一条成功的消息，Type等于success，当删除成功的时候，我们就展示这个内容，当然了，我们这个message可能就不想显示这个哈，我们想显示什么，我们想显示后台。

后台给我们返回的消息，后台给我们返回的是什么呢？就接口端哈，我们看一下接口。结果端我们返回的是不是删除成功这个消息啊，所以呢，在这个地方我们就从我们的啊响应结果当中，就是从这个响应的二对象当中拿出message属性，那这个地方呢，我们就写response。第二。行吧，嗯，好，那接下来呢，我们来看一下哈。啊，真的。好，你这怎么看呀，你你你得弄个按钮调用，它现在还没有按钮调用呢，所以这这方法好像没有办法测，那在哪总按钮啊，在这个这个地方再弄个列啊，弄个列，然后在这个列上呢，添加一个按钮，所以呢，我在这个地方呢，复制一份啊，那这个呢，就是我们的啊叫。操作吧，好，操作这个列呢，我先保存一下，操作这个列呢，我这个里面不想显示任何列的内容，我想自定义一个按钮在这个里面，那怎么自定义呢？我们就不写pro了。

写什么呢？写一个内容啊，就不让它字结束，让它有开始有结束，好然后在中间这个地方，注意我们要写一个节点，这个节点呢叫template，这个template节点呢，又出现了一次了哈，啊，在最外层有这个叫模板，那这个地方也是一样的，我们想自定义这个列的内容，而不是说根据pro来自动的填充这个列的值，那你自定义写在模板里面呢，你这里面就就可以写内容了，明白吧，好，然后接下来呢，你看。你自定义的内容是不是在模板当中，你想定义什么就定义什么，明不明白啊，那我现在呢，想在这个地方呢，展示一个删除按钮，那就是dl button啊，然后呢，这块写删除啊，然后这个按钮呢，我想让它type等于。

Danger就红色的按钮啊，Size等于mini，这个咱们学element UI的时候都学过哈，然后e icon一个图标等于ER，当然了，这个不用背就写了哈，背不下来好，然后呢，这个图标等于这个啊。好，那这样的话呢，我就在这儿呢，展示了一个删除按钮。你看它就有一个删除图标的小的红色的删除按钮是不是，嗯，好，然后当我一点击这个删除按钮的时候呢，我就想调用刚才我那个方法，想调用哪个方法呀，想调用这个remove把ID这个方法，所以怎么做呀，在这个位置。给他注册一个试件，你看把我们之前学的东西全都穿起来了啊。

注册一个事件remove版ID好，然后这样的话呢，它其实就能调它了，但是有个问题，我们呢，得把这个ID传过来好，这个ID呢，我们希望在这传，那怎么传这个ID，我们希望呢，在这个地方呢，能获取到我们当前这个表格当中当前那行的ID，也就是说现在呢，我们其实这个是一个循环，是不是啊，它它它自己在这个table啊，还有EL table column里面，它实际上做的内部做了一个循环，便利便利了每一个行，然后把每一行呢都分别展示到了这个位置，然后在每一行的后面呢，都分别给我们加了一个删除按钮，所以呢，我们就希望点击特定的删除按钮的时候呢，直接把当前这一行的ID取出来，那就可以把这个ID传过去了，那怎么取呢？注意，在element UI里面，它给我们提供了一个。接口这个这个这个属性啊，就相当于一个啊帮你取ID的地方，在这个地方我们写一个slot，这是固定的啊，就是关键字slo scope，然后呢，写一个SCO，诶这个slot scope，这个这个scope是什么呢？通过scope我们能够拿到scope点肉。

这个scope点肉就是当前这行的所有数据，包括这一行的所有数据的所有属性，好，那当然也包括ID，所以呢，在这个地方我就可以拿到当前这个数据的ID了。能不能理解好。关键点在这啊，Sloter scope啊，这个呢，就相当于我们便利的时候，便利的时候当前这行的一个啊数数据的上下对象，好，然后在scope当前这一行的数据的上下文对象当中拿到肉，这个肉是什么呢？就是当前这一行的所有的属性的数据都封装到这个肉里面了，然后呢，我们再从这个肉里面拿到ID，那就是我们要的当前这一行的数据的ID，所以呢，当你点第一条记录的时候，它就第一条记录的ID，当点第二条记录的时候，它就第二条记录的ID，第三条是第三条的ID啊，以此类推，然后那怎么去看这个ID是不是传过来了呢？我们可以在这个位置。

写一个pencil.lo ID呢给他打印一下啊，然后呢，后面这块你如果先不想调的话，你先给他屏蔽一下，总之看看ID是不是传过来了。然后呢，我们F12啊啊定位到这个cancel，大家要学会调试哈，然后点删除，大家看是不是ID等于二啊啊点第二个是不是ID等于三呀，点最后一个是不是ID等于五啊，这样的话，我这ID是不是就传过来了，好再教大家一种方法啊。

第二种方法呢，就是啊，看一下啊，比如说我后面再随便写点内容吧，就是随便写啊好，然后写一个第八个，写个第八个，对第八个有什么用呢？自动设置断点，你看前端我一点删除，大家看是不是进入到刚才这个第八个所在的位置，进入断点啊，进入断点，然后接下来呢，这几个按钮跟Java里面的那个ID里面的那个断点调试是一模一样的，首先现在程序已经停到这个48行了，然后这个参数就是ID，你把鼠标往上一放，或者是不放，它后面自动给你想出来了，是不是已经告诉你ID等于二了啊，所以这个就是断点调试的一个技巧，然后接下来呢，就就点击这个。那step下一步就走下一行，下一步走下一行对不对啊，如果要是这个的话呢，就是如果这块是一个方法的调用啊，Step into进入到方法中啊，好，然后接下来呢，这个就是到下一个断点啊，或者是直接结束，如果下一个断点没有了，就直接结束当天的调试，跟我们的idea里面的端点调试一模一样，比如说你呢，还可以在这块点这啊来设置断点，然后呢，我们直接点这，诶它就会到下一个端点看见了吧，那现在没有下一个端点了，我们点这，好，直接这个方法就执行完了，那下一次你就不想执行这端点了，你就把它给它啊，给这个给它取消掉啊，把这个断点，也就说在这个地方我们可以临时设置一些断点，然后那另外呢，源代码当中这个第八个呢，你可以给它屏蔽掉，省得下回再进入到这个断点，所以这个是一个断点调试的技巧，好，现在我们通过这个方式呢，已经把整个的这个ID呢就传过来了，现在呢，我们再把这个呢给。

它还原一下，还原一下之后我们再来测一下哈。大家测一下呢，我们来看一下这个点击删除啊，大家看是不是展示的删除成功，这个删除成功是在哪展示的，就是在刚才咱们这个地方展示的。

啊展示，然后接下来呢，只不过你看好像这数据不咋还在这呢吗？其实不是，是只不过是我们的页面没有刷新，如果你刷新一下，他重新获取数据了，你会发现数据就删除成功了，所以这个应该怎么处理啊，就是一旦他删除成功了之后，我们呢，就要干嘛呢，就要去把这个列表啊再刷新一下，那什么叫刷新列表，就重新调用一下它就行了，所以在这个地方，一旦它删除成功了，我们这点再data。就可以了啊，那我们再来试一下。好，然后点击这个删除啊，删除好，大家看这个数页面是不是刷新了，然后弹出删除成功了，同时后面有个叉啊，你可以点啊，如果在这个地方你不写这个show close等于true的话，那它就没有那个叉，明白吧？啊，你这个就随意了。

好，然后接下来呢，我们点删除就又没了啊，然后如果不写close，它就没有那个叉，没有那个叉的话，它隔几秒的时候，它自己就消失了，嗯。稍微等一会儿你看就没了是不是，嗯，所以这块呢，是我们的一个删除功能，数据都被删没了，我再给它还原回来啊，这个是删除功能的一个初步的实现，当然了，一会儿呢，我们会再把这个删除功能的前端的这个代码呢，再给它做一个优化，我先把数据还原回来。好，数据又回来了，刷新一下，好，这个就是刚才咱们整个做的删除功能的第一个步骤。