day10【SpringCloud微服务调用】/03-尚硅谷-谷粒学院-课程管理-删除视频前端

首先页面中呢，要调用的第一部分肯定还是在API中，把这个删除的方法我们先做个定义，那这删除因为是视频嘛，我们就想这个video中啊，就小节里边有视频在这个位置，我们按照上面这种结构把方法做个定义。那我写到这个位置。然后这个方法就是删除阿里中的视频给他。改个名字啊。叫阿里云这个vod，然后里边有个什么ID，写完之后在下面写上它那个删除的接口，就是我们的这个接口，我把这个复制一下啊，E Du vod加上一个叫video。然后后面有个名字，这名字叫木阿林video，然后传一个ID。这个注意啊，这斜杠不能少，ID传进去，最后是一个比例的提交啊，这时候我们写的这么一个步骤。

脑袋。一个课件中写一下啊，咱们的调用的第一部分在API里边定义你接口的那个路径啊，这个我们先做后定义。那这个咱刚才就。D出来了啊，就是这么一个。基本的方法。然后定义之后，下面我们就是在页面中来调用。第二个啊，页面调用，那咱给他就调一下啊，现在我们来到页面中。你这已经写完了，然后页面呢，在我这个capital里边，Capital中第一个这个video咱之前已经引过了，然后咱怎么做呢？往下来看啊，这个是你在点叉先弹个确认框，当咱点确定就调这个叫handle videod remove在这里边再调这接口，然后写一个video，点上咱刚才那个方法叫delete阿里。VD，然后里边传你的视频ID。

那怎么传给大家说一下啊，大家看这个代码。当咱们上传成功之后，在video中的video sod中是不是有ID，所以咱把这ID直接就拿过来，因为上传之后里面有这纸，然后这个写完之后，下面我们加上这么一个叫点赞。然后加一个叫response这么一个电头函数。啊，上面啊，Response箭头函数，然后后面就是我们这个删除一个过程，当我们删除成功之后，在里边啊，咱们可以给它来一个提示。那这提示我用这个，咱们给它就复制过来啊，就是删除成功，先来一个提示，比如提示它叫删除这个。视频成功。然后删除成功之后还要干什么呢？给大家说一下啊，咱注意啊，比如我现在。来到我的一面啊。呃，这个我应该关掉了啊，这个服务器关了，就是现在在页面中的，当咱们做这个删除，就是删除成功之后，咱这个页面中啊，咱直接看这页面在页面中的这个这个位置，这个文件是不是要不显示，所以咱要做这种效果，其实它默认就是不显示，但是这里边会有问题，咱需要手动让它做一个不显示，那怎么不显示呢？给大家说明啊，在咱们这里边呢，有这么一个东西。

这个叫file list，它就表示文件列表，也就是说你显示的这个内容，它叫文件列表，那咱怎么做呢？当你有文件，文件列表中就你的文件内容，而咱们把文件列表清空，这里面不显示了，也就是说让这个feel list等于空就可以了，那咱们等于空，因为它是一个数组，咱就等于这个空数组就可以了。那我在里边写一下啊，就是第一个来一个提示信息，第二个把这个文件列表给他就清空就可以了，那咱来一个叫这点快。

例。等于一个空，这样的话，这就完成了调用啊，就是点确定它调接口，根据视频ID删我们的视频，然后删除之后提示成功，并且把文件列表清空，也就是清空之后这里边就没有东西了，这个啊咱们就完成了关于这个添加小结里边的删除视频啊，就这代码啊，跟我写的一样的啊。然后咱们写完了啊，写完之后，最后咱们把功能我们就最终来测试一下啊，它的代码就这一段代码啊，代码没有特别的啊，有这么一个。基本的过程啊，谢谢各位啊，也是。截过来啊，有这么一段代码。然后这个咱们就写完了啊，写完之后最后咱们把效果我们就最终给他测试一下，看一下最终的结果能不能做到啊，当然这个测试中咱需要把edu启动，Vod启动，后面咱功能很多，当然要启动更多的服务。

那我现在启动一下啊。先请这个edo啊，然后再请vod，最后咱们把这个删除这个功能这种试一下啊。这个功能并不复杂，主要是还是我们之前一直写这个流程，先写接口，然后再写浅层页面调用，页面调用之后反映它的结果，或者说做一些什么其他操作。这个啊，等等的，先请起来。嗯。然后这里边我强调啊，就是因为啊，我们现在这里边需要的这种服务启动比较多，目前应该只有三个8010203，后面会有更多的服务，大家应该会到那个8009 8010或者幺幺这么一个服务，大家会起十几个左右的服务啊，所以这个啊前要还是之前我第一天提到的。对于各位的电脑有一定的要求，如果你的电脑配置比较低，那你服务要启动很多，行不起来啊。

对这些都提前有些准备啊，然后咱们这些都启用之后，咱们看最终结果啊，我现在。先把这个登录进去，然后咱们找到课程中，课程里边为了明显我就重新加到记录，因为他现在里边有这么一些视频啊，就有这些，那我下面再来加一下啊。咱们加个课程随便来一个啊，比如666888。这位置。选一些数据。然后加上描述，最后点保存，并下一步这个课程肯定可以添加，然后在里边我们加小节，比如说0306，这是章节里边的小节。比如030611，然后在小节里边呢，咱们可以上传一个视频，那我现在我来做个上传啊，把F12我也点开报错，大家能看到，然后我现在上传本地一个视频，把它先传上来，这过程肯定没有错，点单测试应该都没有问题。

啊，这里边应该是可以上传的，我们等他上传成功。这个可以了啊，然后上传成功之后，咱们先这么看啊，先看阿林中那个视频，咱就看时间九点啊14分视频是不是有目前是存在的，它下面是08:56，这是09:14，各位先大概记一下，比如咱要删它。然后传完之后，现在我点视频后面的叉我一点。点完之后大家看弹个框，然后弹完框之后，现在我点OK。视频是不是删掉了，提示我们叫删除成功，然后删除成功之后咱们再来看阿里中，我把这个刷新，大家看视频09:14的是不是就没了，所以这样的话删除我们就完成了啊，这是我们这么一个效果，大家要做到就这个效果。

然后这删完之后，比如现在我把这数据做添加，目前会有一个小bug，再来试一下啊，你看我现在啊，这个小结叫030611，但是你注意我目前小节中我没有加视频，然后我点确定。小节肯定可以添加，咱到表中看一下啊，目前有什么问题。找小结表。不知各位是否看到目前的问题啊？你注意啊，我们这个小节里边，咱们刚才是不是没有加视频呀，我视频是不是已经删掉了，但你发现就算我删了视频，最终数据库中的视频是不是还有，还有ID，还有名称。就是各位是否能看到啊，目前我这个问题我视频已经删掉了，但是他把这个删掉视频还加进去，就这个视频已经没了，阿里云中心视频也不存在了。那他为什么这个效果。希望各位能想到啊，里边有这个特点啊，给大家说明啊，咱说这个问题所在。

首先你注意啊，它的最直观描述就是视频我已经删掉了，但是加到数据库中，他还把视频ID名称加进来了，正确效果里边是没有值的，应该为空的，但是目前还加进去了，但是这视频已经咱已经删过了。而它为什么这个效果，咱就要看一下它一个特点啊，大家看。就在代码。就是咱们的过程中是不是先做了上传呀，当咱们上传之后，我们就把上传之后的视频ID和名称是不是给它复制到了video对象中去，就你删完之后，这里边是有值，咱们刚才删除只是删了R0中的东西，但是我的video中的ID是不是还存在呀，它这个并没有给它删掉，或者并没有清空，所以咱们需要把这个解决一下。怎么解决呢？在里边写一下啊，角这位置。也就是说我们删除视频之后，你还需要把这个就是video里边的。

啊，微调里边的视频ID和视频名称的值，给它需要做个清空，因为视频已经没了，如果你不听的话，他还会把你删之后的东西加到数据库中，所以咱需要给它清空一下。那咱给他就清下啊，我就直接把这两个值我们就直接清空。就这两个值，一个是视频ID。还有一个是视频名称。这两值咱们都给它清空一下，这样的话问题就可以解决，如果你不清空，他把删完之后东西你会加到数据库啊，这个问题各位要特别注意一下啊。所以咱们把它最终给他做一个完善。这代码我先复制过来啊，然后咱们看一下最终的这么一个效果是什么样，就是看最后的结果啊。

啊，这样啊，我把这个先给他。删掉啊，然后里边我把这个代码给各位先复制过来。嗯。这个代码。然后咱们啊，看一下最终的一个结果是什么样的，为刚才有这么一个问题啊，那咱们再试一下啊，这个应该不需要重启，因为它只改了前端两个清空，那咱们到这个位置啊，比如现在我再去加一个小节，包括视频这小节我就叫030612。这些就写纸，然后下面我上传视频，把这视频先传上来。这视频肯定是可以上传的，但测试都没有错，然后现在如果说我这么添加，肯定会有视频ID和名称，但是我把视频给它删掉，我点OK，视频已经删掉了，这个时候我们再点确定，咱看结果啊，在我页面中肯定是可以，然后咱们来到数据库中大家看。

这时候就没了，因为这个是vid和名称咱清空了，而现在视频中就是没有，就这小节中就没有视频，所以这个应该是。正确效果是。它是没有值的，这样的话咱把这个就完成了啊，就是关于添加小结，然后删除视频的这么一个基本功能，咱们完成了前端部分。所以大家啊，把这个给他知道啊，就是一个调用，包括最终你要做一个清空。