开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-删除视频前端】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11411
课程管理-删除视频前端
目录：
一、在 api 定义接口路径
二、页面调用
一、在 api 定义接口路径
首先页面中要调用的第一部分就是把 api 文件中删除视频的方法做一个定义，删除视频，需要用到 video，就是小节里有视频，按照提到的方法做个定义：
//删除小节
deleteVideo(id){
return request({
url:"/eduservice/video/'+id
method:"delete
}）
}
//删除视频
deletealiyunVod (id){
写上删除视频的接口
后面还要添加一个名字，removeAlyVideo，然后传一个 id，
return request({
url:" /eduvod/video/ removeAlyVideo/ '+id
这里要注意不能缺少/
method:"delete
}）
}
二、页面调用
返回到页面中，找到 capter，在这里，video 我们已经引用过了，
//点击 x 调用这个方法
beforeVodRemove(file,fileList){
return this.$confirm(`确定移除 ${ file.name }? );
上面是我们点×弹出的确认框，当我们点击确定，就会出现
handleVodRemove，
在这里我们要调用接口，
//点击确定调用的方法
handleVodRemove(){
//调用接口的删除视频的方法
Video. deletealiyunVod (this.video.videoSourceid)
括号中传入视频 id，接下来我们讲该如何传入视频 id，向下滑，我们可以看到代码如下，
//上传视频 id 赋值
this.video.videoSourceid= response.data.videoid
//上传视频名称赋值
当我们上传成功之后，videoSourceid 中含有视频 id，所以直接引用。
then(response => {
在这里插入一个提示信息
//提示信息
this.$message({
type:'success',
message:'删除视频成功!
});
删除视频成功之后，我们回到页面中
当我们在页面中要做这个删除，就是删除成功之后，我们这个页面要不显示，就是默认不显示，但这里有个问题，我们要让他手动不显示，做个演示：
file list 是文件列表，就是我们显示的如下内容就是文件列表。
当我们有文件，文件列表中有内容，将文件列表内容清空，这里就不会显示了，也就是说，让 file list=空就可以了
如下：
//把文件列表清空
this.fileList
这就完成了调用。调接口根据视频 id 删除视频；删除之后，提示成功，并且把文件列表清空，清空之后，上传视频就消失了。
写完之后，我们就测试一下功能，需要把 vdu，vod 启动，先启用 vdu，然后再启用 vod，最后测试一下删除的功能。
功能并不复杂，主要是我们一直写的流程，先写接口，再写调用。
在这里需要强调一下，因为我们现在需要的服务启动器比较多，目前只有三个，801、02、03、后面会有更多的服务，应该会到8009、8010、8011或有十几个这样的服务，所以这个就是我们第一天提到的，对各位的电脑有更高的要求，如果电脑配置比较低，服务就会启动不起来，所以我们要提前准备。等都启动好之后，我们来看结果，
先登录上图，然后找到课程中，在课程中，为了明显，我就重新加一条记录，因为他这里有很多视频，
那我们先随便加一下课程，数据如下：
最后加上描述，点击保存并下一步，这个课程你就可以添加，然后再加小节，和章节里边的小节。
然后我们上传视频，点击 console，就能看到，上传一个本地视频，这个过程没有错，那我们测试也就不会出现大问题，这里边都是可以上传的，结果是成功的。
当上传成功之后，我们先看阿里云中的一个视频，就看时间，第一个的时间是9：14，目前是存在的，第二个是8：56，先记一下时间，等会我们就会删他们。在上传成功之后，点击视频后面的×号，点完之后我们可以看到弹出一个框
点击 ok，我们可以看到视频删除掉了，提示我们删除成功。删除成功之后，我们再来看阿里云的视频，刷新，我们可以看到9：14的视频消失了，所以这样的话，删除我们就完成了，这就是我们要做到的效果。
现在我们把数据做一个添加，目前会有一个小 bug，我们可以看到这个小节是030611，但是我们目前小节中没有加视频，点击确定，提示小节添加成功，我们去表中看一下有什么问题，找到小节表，
我们要注意，这个小节里边刚才是没有添加视频的，视频是已经删掉的，但我们可以发现表中依然还有视频，还有 id，还有名称，这就是目前的问题，阿里云中的视频也不存在了，为什么会有这种效果？问题所在是什么？
我们要注意，他的最直观描述就是视频已经删掉了，但是视频库中依然还有视频，正确效果里边是没有值的，为空的，但目前是还加进去了，而且视频我们已经删除了，而他为什么会有这种效果？我们来看他的一个特点，我们可以看到下面这段代码，
//上传视频id赋值
this.video.videoSourceId = response.data.videoId
//上传视频名称赋值
this.video.videoOriginalName = file.name I
这个过程中是不先做了上传，当我们上传之后，我们就把视频id和名称是不就复制到 video 中，就是 this.video.videoSourceId 这里边有值，我们刚刚删除，是只删了阿里云中的视频，但我们 video 中的 id 依然存在，videoOriginalName 这个依然没有删掉或清空，所以我们需要把这个解决掉，怎么解决，
代码如下：
//把 video 视频 id 和视频名称值清空
//上传视频 id 赋值
this.video.videoSourceId =’ ‘
//上传视频名称赋值
this.video.videoOriginalName='’
将视频 id，视频名称清空，这样的话，问题就可以解决，如果不清空，它就会把视频填进视频库，这个问题我们要特别注意。
完整代码如下：
//点击确定调用的方法
handleVodRenove()【
//调用接口的删除视频的方法
video.deleteAliyunvod(this.video.videoSourceId)
.then(response => (
//提示信息
this.$nessage“
type:'success
nessage:"副除视频成功!
}):
//把文件列表清空
this.fileList =[]
//把video视频id和视频名称值清空//上传视频id赋值
this.video.videoSourceId ="//上传视频名称赋值
this.video.videoOriginalNane ="
})
接下来，我们看看最终的结果是什么？
因为刚才我们有这样一个问题，我们再试一次，这个不需要重启，因为他只改了前端，我们现在回到页面
再去添加一个小节，包括视频。
我们上传视频，先把视频传上来，视频是肯定可以上传的，测试也没有错，如果我们这么添加，他肯定会有视频 id 和视频名称，但是如果把视频给删掉，点击 ok ,视频已经删掉了，这个时候再次点击确定，看结果。
在页面中，肯定是可以，来到数据库中，我们可以看到视频也被删掉了，因为视频id 和视频名称也删掉了，现在小节中就没有视频，正确效果就是没有值了，这样的话，我们就完成了。
