谷粒学院16万字笔记+1600张配图(十一)——课程管理

桃扇骨 2023-10-02 21:25 16阅读 0赞

> 项目源码与所需资料  
> 链接：https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59  
> 提取码：8z59

#### 文章目录 ####

*  demo11-课程管理
 *   *  1.阿里云视频点播
     *   *  1.1开通阿里云视频点播服务
         *  1.2"音/视频"菜单
         *  1.3"转码模板组"菜单
     *  2.后端集成阿里云视频点播
     *   *  2.1创建模块
         *  2.2添加依赖
         *  2.3创建配置文件
         *  2.4创建启动类
     *  3.测试
     *   *  3.1获取视频地址
         *   *  3.1.1数据库中存的是视频id
             *  3.1.2代码写到test目录下
             *  3.1.3初始化
             *  3.1.4根据视频id获取视频播放地址
         *  3.2获取视频凭证
         *  3.3本地文件上传
     *  4.添加小节视频后端
     *   *  4.1基本结构
         *  4.2控制层
         *  4.3业务层接口
         *  4.4创建常量类
         *  4.5业务层实现类
         *  4.6测试
     *  5.添加小节视频前端
     *   *  5.1添加上传组件
         *  5.2定义方法
         *  5.3清空fileList
         *  5.4配置nginx
         *  5.5测试
     *  6.添加小节视频完善
     *   *  6.1获得上传的视频的名称
         *  6.2删除上传的视频
     *  7.删除上传的视频后端
     *   *  7.1问题演示
         *  7.2创建初始化类
         *  7.3控制层
     *  8.删除上传的视频前端
     *   *  8.1在api中定义方法
         *  8.2点击叉号(×)后跳出确认弹框
         *  8.3调用api中的方法
         *  8.4测试

## demo11-课程管理 ##

### 1.阿里云视频点播 ###

#### 1.1开通阿里云视频点播服务 ####

1.进入阿里云官网[https://www.aliyun.com][https_www.aliyun.com]

2.登录账号后在搜索栏搜索"视频点播",点击"视频点播"

![在这里插入图片描述][6d858ee2eeb1418bafed10452b0c7caa.png_pic_center]

3.点击"管理控制台"

![在这里插入图片描述][b81b6c61328f4a1e9f74471f376fc4cd.png_pic_center]

4.点击"开通服务"

![在这里插入图片描述][6f4f69174d5f4d5cb79621c0097b9e27.png_pic_center]

5.选择"流量计费"后点击"开通服务"(流量计费的好处是不使用时不花钱)

![在这里插入图片描述][8289696546c84581ac25d2acdb68d35c.png_pic_center]

#### 1.2"音/视频"菜单 ####

在阿里云视频点播的控制台的"媒资库"的"音/视频"菜单下可以上传视频并管理我们上传的视频

![在这里插入图片描述][daffc77df4854574bc495ab87490f9d2.png_pic_center]

接下来我们测试上传视频

1.建议别用太大的视频,资料中有一个2MB左右的视频,可以用这个视频来测试

![在这里插入图片描述][5875b3bcf04a4bf6bc58b23ce5048f98.png_pic_center]

2.先开通存储:在配置管理–>媒资管理配置–>存储管理中点击"启用"

![在这里插入图片描述][6e9e44392ad448028f2137a441a8da70.png_pic_center]

3.点击"上传音/视频"

![在这里插入图片描述][5600441b0b074a78ba765ae911c5ffb9.png_pic_center]

4.点击"添加音/视频"

![在这里插入图片描述][d52c8c159a5d40ccb2fdba53a81c5c61.png_pic_center]

5.添加将要上传的视频后点击"开始上传"

![在这里插入图片描述][ec07f263611a474fab2d0910f58836fb.png_pic_center]

6.可以看到我们成功上传了

![在这里插入图片描述][3a41bbf8b9fe46809bdaa8b7ee6e0b5d.png_pic_center]

7.点击"管理"

![在这里插入图片描述][dc32cb79c5904048907ad9351465cabe.png_pic_center]

8.红框圈起来的就是刚刚上传的视频的地址

![在这里插入图片描述][b992319a4ab84e369d1115f8db84447e.png_pic_center]

9.将视频地址复制到浏览器中,就可以播放视频了

![在这里插入图片描述][367e6c5b90a54cc3b986a0aa8f170127.png_pic_center]

#### 1.3"转码模板组"菜单 ####

1.在阿里云视频点播的控制台的配置管理–>媒体处理配置–>转码模板组中可以管理我们的转码模板。可以看到默认是系统内置的不转码

![在这里插入图片描述][1aa8386d60a64b6eb451e2de720a9363.png_pic_center]

2.点击"添加转码模板组"

![在这里插入图片描述][f6a49c7a426147bf8ab45472e416244b.png_pic_center]

3.点击普通转码模板下的"+添加模板"

![在这里插入图片描述][3431fe35e7ba4adc9687059c0e182c6d.png_pic_center]

4.填写信息时只需要干这三件事(其余配置不用管,使用默认的就可以)然后点击"保存"即可:

*  给模板组随便起个名字
 *  将"基本参数"的封装格式改为"hls"
 *  将"高级参数"的"视频加密"打开,并选择加密方式为"私有加密"即HLS加密

其中第二件事和第三件事的目的是:这样做后即使别人拿到了视频地址也不能在浏览器播放,只有我们自己知道怎么播放

![在这里插入图片描述][954fe811300542ed92040949750a340b.png_pic_center]

5.执行’1.2"音/视频"菜单’的第3、4步

6.成功添加将要上传的视频后,选中我们刚刚创建的转码模板组然后点击"开始上传"

![在这里插入图片描述][95f17722a8414c9fa9d28b1b2c677368.png_pic_center]

7.上传成功后点击"管理"

![在这里插入图片描述][8245f8a00e6d443498ff31745c0efc70.png_pic_center]

8.将加密后的视频地址复制下来

![在这里插入图片描述][937d8fb76ebd4026a39238d5cc2a1d5a.png_pic_center]

9.将复制的视频地址粘贴到浏览器中,可以看到此时不能播放该视频

![在这里插入图片描述][1483c8a96f124568a13b8614012da2cd.png_pic_center]

10.如果想要播放加密视频是需要域名的,我们后面上传视频都上传不加密的,所以这里的域名不多说了

![在这里插入图片描述][6caa4a8bcf434bffb9cd0d5af97f407a.png_pic_center]

### 2.后端集成阿里云视频点播 ###

#### 2.1创建模块 ####

1.在service上右键,选择New–>Module…

![在这里插入图片描述][edd949898cf3412692052e8c7b97feab.png_pic_center]

2.我们这里是创建一个maven工程

![在这里插入图片描述][21fdd88646b446d298e864f9c01d9d4b.png_pic_center]

3.填写信息  
![在这里插入图片描述][621e14f897814ad080344d4a46ff0114.png_pic_center]

#### 2.2添加依赖 ####

1.在service\_vod中添加下面这些依赖(依赖爆红的去看"demo03-后台讲师管理模块"的"2.2.2创建父工程"的第8步,我在第8步的最后面说了解决办法)

<dependencies>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
        </dependency>
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-vod</artifactId>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-sdk-vod-upload</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
        </dependency>
    
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
        </dependency>
    </dependencies>

![在这里插入图片描述][758dae430df446029340f474c2dd8a7a.png_pic_center]

2.刷新maven

![在这里插入图片描述][6d0f0f1f3ef243c997fe3858edf23462.png_pic_center]

#### 2.3创建配置文件 ####

在resources目录下创建配置文件application.properties并编写配置

# 服务端口
    server.port=8003
    # 服务名
    spring.application.name=service-vod
    
    # 环境设置：dev、test、prod
    spring.profiles.active=dev
    
    #阿里云 vod
    #不同的服务器，地址不同
    aliyun.vod.file.keyid=LTAI5tMUCkxmE6ouUc2dmbXm
    aliyun.vod.file.keysecret=0Py10jHOPVkeFp6MiIm88c9QqyykUE
    
    # 最大上传单个文件大小：默认1M
    spring.servlet.multipart.max-file-size=1024MB
    # 最大置总上传的数据大小 ：默认10M
    spring.servlet.multipart.max-request-size=1024MB

![在这里插入图片描述][8a179c9c87024bef9060a66129c8c9c3.png_pic_center]

*  截图中的第11行和第12行分别是AccessKey ID和 AccessKey Secret,这两个参数填自己的(在"demo06-上传讲师头像"的"1.5创建操作阿里云oss的许可证")
 *  截图中第15行作用:我们使用tomcat上传时默认的最大大小是1M,我们手动修改最大大小为1024M

#### 2.4创建启动类 ####

创建包com.atguigu.vod,然后在该包下创建主启动类VodApplication,并在类中编写代码

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
    @ComponentScan(basePackages = {
        "com.atguigu"})
    public class VodApplication {
        
        public static void main(String[] args) {
        
            SpringApplication.run(VodApplication.class, args);
        }
    }

![在这里插入图片描述][10b429f61a5149a58f2a705078158b08.png_pic_center]

截图中第8行代码的作用,忘了的可以去看"demo06-上传讲师头像"的"2.5启动项目"

### 3.测试 ###

#### 3.1获取视频地址 ####

##### 3.1.1数据库中存的是视频id #####

1.我们曾经将讲师头像和课程封面上传到阿里云oss后在数据库中存的是上传后的图片地址,但是小节表edu\_video的video\_source\_id子段存的是上传后的视频id而不是视频地址。

为什么这个字段存视频id而不存视频地址:我们在’1.3"转码模板组"菜单’的第9步说过,即使我们得到了加密视频的地址仍不能在浏览器中播放视频,如果我们上传的视频都是没有加密的,那么数据库中存视频地址是可以的,但实际开发中视频肯定会加密,那么数据库中存视频地址将毫无意义,所以我们要让这个字段存视频id

2.每个视频都有一个唯一的id

![在这里插入图片描述][a9fc3e41f25c4ffab25cd8dfa44a5399.png_pic_center]

##### 3.1.2代码写到test目录下 #####

因为我们现在只是编写测试代码,所以将代码写到test目录下,后期我们整合的时候会在java目录中写代码。在test包的java包中创建包com.atguigu.vodtest

![在这里插入图片描述][49b7e7a3c87e4c0ab7e7d6a993d00ca1.png_pic_center]

##### 3.1.3初始化 #####

初始化操作:创建DefaultAcsClient实例对象,我们后面的功能都是通过调用这个实例对象的方法来实现

在vodtest包下创建类InitObject并编写代码

public class InitObject {
        
        public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
        
            String regionId = "cn-shanghai";  // 点播服务接入区域
            DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
            DefaultAcsClient client = new DefaultAcsClient(profile);
            return client;
        }
    }

![在这里插入图片描述][e3046d68c1c94b1fbf6b7b6767133df6.png_pic_center]

点播服务接入区域固定是"cn-shanghai",因为目前这个服务都是部署在上海

##### 3.1.4根据视频id获取视频播放地址 #####

1.在vodtest包下创建类TestVod并编写代码

public class TestVod {
        
        //根据视频id获取视频播放地址
        @Test
        public void getPlayUrl() throws Exception {
        
            //1.创建初始化对象
            DefaultAcsClient client =InitObject.initVodClient(
                                            "LTAI5tMUCkxmE6ouUc2dmbXm",
                                            "0Py10jHOPVkeFp6MiIm88c9QqyykUE");
    
            //2.创建获取视频地址的request和response
            GetPlayInfoRequest request = new GetPlayInfoRequest();
            GetPlayInfoResponse response = new GetPlayInfoResponse();
    
            //3.向request对象里面设置视频id(必须是没有加密的视频id)
            request.setVideoId("7218f0acdf4f4a76950d509fb1d18f51");
    
            //4.调用初始化对象里面的方法,获取视频信息
            response = client.getAcsResponse(request);
    
            //5.从获取到的视频信息中取两个信息:播放地址和视频名称
            List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();
            //播放地址
            for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {
        
                System.out.println("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");
            }
            //Base信息
            System.out.println("VideoBase.Title = " + response.getVideoBase().getTitle()+"\n");
        }
    }

![在这里插入图片描述][b4457b09c4dd413e9197863e2ad725a5.png_pic_center]

*  截图中第15行的initVodClient方法的两个参数分别是AccessKey ID和 AccessKey Secret,这两个参数填自己的(在"demo06-上传讲师头像"的"1.5创建操作阿里云oss的许可证")
 *  截图中第24行:我们在’1.3"转码模板组"菜单’的第9步说过了,即使我们获取到了加密视频的地址也无法播放视频,所以这里的id我们要使用没有加密的视频的id

2.在getPlayUrl方法上右键选择"Run ‘getPlayUrl()’"

![在这里插入图片描述][18ea5db211894532ad30199886b61a1e.png_pic_center]

3.测试结果如下

![在这里插入图片描述][4b803b70445642a0ad1665c678ba6543.png_pic_center]

#### 3.2获取视频凭证 ####

1.在类TestVod中编写根据视频id获取视频凭证的方法

//根据视频id获取视频凭证
    @Test
    public void getPlayAuth() throws Exception {
        
        //1.创建初始化对象
        DefaultAcsClient client =InitObject.initVodClient(
            "LTAI5tMUCkxmE6ouUc2dmbXm",
            "0Py10jHOPVkeFp6MiIm88c9QqyykUE");
    
        //2.创建获取视频凭证的request和response
        GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
        GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();
    
        //3.向request对象里面设置视频id(加密视频id、没有加密视频的id都是可以的)
        request.setVideoId("0467c17af0ab4040bc1a739f5a29a970");
    
        //4.调用初始化对象里面的方法,获取视频信息
        response = client.getAcsResponse(request);
    
        //5.从获取到的视频信息中取视频凭证的信息
        System.out.println("playauth: " + response.getPlayAuth());
    }

![在这里插入图片描述][f8814c54b4ce47b4b510c561d53b30a3.png_pic_center]

2.在getPlayAuth方法上右键选择"Run ‘getPlayAuth()’"

3.测试结果如下

![在这里插入图片描述][e657f07908374fb185a6627be8372f0c.png_pic_center]

#### 3.3本地文件上传 ####

1.资料给的VODUploadDemo-java-1.4.11–>sample–>UploadVideoDemo.java中人家已经给了文件上传的几种方式及对应示例代码

![在这里插入图片描述][4720d88679c649568a3e760a05c8a9ff.png_pic_center]

![在这里插入图片描述][9e64b80abb4543d3be08bd715403176d.png_pic_center]

2.我们这里使用本地文件上传的示例代码,并根据实际情况进行修改:

在类TestVod中编写本地文件上传的方法:

//本地视频上传
    @Test
    public void uploadVideo() {
        
        String accessKeyId = "LTAI5tMUCkxmE6ouUc2dmbXm";
        String accessKeySecret = "0Py10jHOPVkeFp6MiIm88c9QqyykUE";
        String title = "6 - What If I Want to Move Faster -- upload by sdk"; //上传后文件的名称
        String fileName = "C:/Users/mxy/Desktop/6 - What If I Want to Move Faster.mp4"; //本地文件的路径和名称
    
        UploadVideoRequest request = new UploadVideoRequest(accessKeyId, accessKeySecret, title, fileName);
        /* 可指定分片上传时每个分片的大小，默认为2M字节 */
        request.setPartSize(2 * 1024 * 1024L);
        /* 可指定分片上传时的并发线程数，默认为1，(注：该配置会占用服务器CPU资源，需根据服务器情况指定）*/
        request.setTaskNum(1);
        UploadVideoImpl uploader = new UploadVideoImpl();
        UploadVideoResponse response = uploader.uploadVideo(request);
        if (response.isSuccess()) {
        
            System.out.print("VideoId=" + response.getVideoId() + "\n");
        } else {
        
            /* 如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因 */
            System.out.print("VideoId=" + response.getVideoId() + "\n");
            System.out.print("ErrorCode=" + response.getCode() + "\n");
            System.out.print("ErrorMessage=" + response.getMessage() + "\n");
        }
    }

![在这里插入图片描述][dd1647ec4a1048bc945799b2c3df2f01.png_pic_center]

3.在uploadVideo方法上右键选择"Run ‘uploadVideo()’"

4.控制台中输出了上传后的视频的id

![在这里插入图片描述][ae5c3f987a294fb1ba311ee2f48075fa.png_pic_center]

5.去阿里云视频点播的控制台中可以看到我们确实成功上传了

![在这里插入图片描述][c343d4d5c7274ba382c2218a098d2674.png_pic_center]

### 4.添加小节视频后端 ###

#### 4.1基本结构 ####

1.在vod包下创建包controller,然后在controller包下创建控制器VodController

@RestController
    @RequestMapping("/eduvod/video")
    @CrossOrigin
    public class VodController {
        
    }

![在这里插入图片描述][8c90c6872b924606ac7643d2ac239a09.png_pic_center]

记得给控制器VodController加CrossOrigin注解,我这里忘加了,后来补上了,但我不想重新截图了

2.在vod包下创建包service,然后在service包下创建业务层接口VodService

![在这里插入图片描述][da51043724964910897c7138dfbc33c6.png_pic_center]

3.在service包下创建包impl,然后在impl包下创建业务层接口的实现类VodServiceImpl,并使该类实现VodService接口

@Service
    public class VodServiceImpl implements VodService {
        
    }

![在这里插入图片描述][9cab6e80e8974b37b8bd041cd4017e3f.png_pic_center]

#### 4.2控制层 ####

在控制器VodController中编写代码

@RestController
    @RequestMapping("/eduvod/video")
    @CrossOrigin
    public class VodController {
        
    
        @Autowired
        private VodService vodService;
    
        //上传视频到阿里云
        @PostMapping("uploadAlyVideo")
        public R uploadAlyVideo(MultipartFile file) {
        
            //返回上传视频的id
            String videoId = vodService.uploadAlyVideo(file);
            return R.ok().data("videoId", videoId);
        }
    }

![在这里插入图片描述][6c73b993e48445a38713c5185272db49.png_pic_center]

记得给控制器VodController加CrossOrigin注解,我这里忘加了,后来补上了,但我不想重新截图了

#### 4.3业务层接口 ####

在业务层接口VodService中定义抽象方法

public interface VodService {
        
        //上传视频到阿里云
        String uploadAlyVideo(MultipartFile file);
    }

![在这里插入图片描述][229251f0abab4793b2453e4b50cb98f0.png_pic_center]

#### 4.4创建常量类 ####

中间的细节不多说了,直接去"demo06-上传讲师头像"的"3.创建常量类"回顾即可,。

在vod包下创建包utils,然后在utils包下创建常量类ConstantVodUtils并使其实现InitializingBean,最后在ConstantVodUtils类中编写代码(注意:这里的@Value注解导的是Spring里面的,别导错包了)

@Component
    public class ConstantVodUtils implements InitializingBean {
        
        //读取配置文件内容
        @Value("${aliyun.vod.file.keyid}")
        private String keyId;
        @Value("${aliyun.vod.file.keysecret}")
        private String keySecret;
    
        //定义public的静态常量
        public static String ACCESS_KEY_ID;
        public static String ACCESS_KEY_SECRET;
    
        @Override
        public void afterPropertiesSet() throws Exception {
        
            ACCESS_KEY_ID = keyId;
            ACCESS_KEY_SECRET = keySecret;
        }
    }

![在这里插入图片描述][b3ded757836f4e92b4b11b04cd9de1ff.png_pic_center]

#### 4.5业务层实现类 ####

在业务层实现类VodServiceImpl中实现"4.3业务层接口"中定义的抽象方法编写业务逻辑,我们在"3.3本地文件上传"的第1步说过了,人家给的有示例代码,这次我们使用"流式上传接口"的示例代码并根据实际情况进行修改

@Service
    public class VodServiceImpl implements VodService {
        
        //上传视频到阿里云
        @Override
        public String uploadAlyVideo(MultipartFile file) {
        
            try {
        
                //上传的文件的原始名称(如:01.mp4)
                String fileName = file.getOriginalFilename();
                //上传后在阿里云显示的名称(带不带后缀都行,我这里没带)
                String title = fileName.substring(0, fileName.lastIndexOf("."));
                //上传的文件的输入流
                InputStream inputStream = file.getInputStream();
    
                UploadStreamRequest request = new UploadStreamRequest(
                        ConstantVodUtils.ACCESS_KEY_ID,
                        ConstantVodUtils.ACCESS_KEY_SECRET,
                        title,
                        fileName,
                        inputStream);
                UploadVideoImpl uploader = new UploadVideoImpl();
                UploadStreamResponse response = uploader.uploadStream(request);
    
                String videoId = null;
                if (response.isSuccess()) {
        
                    videoId = response.getVideoId();
                } else {
         //如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因
                    videoId = response.getVideoId();
                }
    
                return videoId;
            } catch (Exception e) {
        
                e.printStackTrace();
                return null;
            }
    
        }
    }

![在这里插入图片描述][659c9797dafe48ab9b5134f07a0bec13.png_pic_center]

#### 4.6测试 ####

启动服务后在地址栏输入[http://localhost:8003/swagger-ui.html][http_localhost_8003_swagger-ui.html]自行测试,我测试没问题

### 5.添加小节视频前端 ###

#### 5.1添加上传组件 ####

1.将chapter.vue页面中红框圈起来的部分删掉

![在这里插入图片描述][ac172df3b7314d729fecd82ed456e4fe.png_pic_center]

2.将下述代码复制到刚刚删除的位置

<el-form-item label="上传视频">
        <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :action="BASE_API+'/eduvod/video/uploadAlyVideo'"
            :limit="1"
            class="upload-demo">
        <el-button size="small" type="primary">上传视频</el-button>
        <el-tooltip placement="right-end">
            <div slot="content">最大支持1G，<br>
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
            <i class="el-icon-question"/>
        </el-tooltip>
        </el-upload>
    </el-form-item>

![在这里插入图片描述][6b8990f096f04290956a1aeddc489684.png_pic_center]

*  `:on-success="handleVodUploadSuccess"`:上传成功调用的方法
 *  `:on-remove="handleVodRemove"`:删除的方法
 *  `:before-remove="beforeVodRemove"`:删除之前调用的方法
 *  `:on-exceed="handleUploadExceed"`:上传之前调用的方法,多用于设置文件大小、类型
 *  `:file-list="fileList"`:上传文件的列表
 *  `:action="BASE_API+'/eduvod/video/uploadAlyVideo'"`:请求的后端接口地址
 *  `:limit="1"`:上传文件的数量

3.上张截图的第88行用到了数据模型fileList、第89行用到了数据模型BASE\_API。我们现在去定义这两个数据模型

fileList: [], //上传文件的列表
    BASE_API: process.env.BASE_API //接口API地址

![在这里插入图片描述][1fa0352c4ed54987821664bd3aeea82a.png_pic_center]

#### 5.2定义方法 ####

在chapter.vue中定义方法

//上传视频成功调用的方法
    handleVodUploadSuccess(response) {
        
        //上传视频id赋值
        this.video.videoSourceId = response.data.videoId
    },
    //上传之前调用的方法(多用于设置文件大小、类型)
    handleUploadExceed() {
        
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
    },

![在这里插入图片描述][3e271a81c256420f96be1e563de5a5fd.png_pic_center]

#### 5.3清空fileList ####

在弹出添加小节的页面时需要清空fileList列表,也就是文件列表,需要在chapter.vue的openVideo方法中添加一行代码`this.fileList = [] //清空文件列表`

![在这里插入图片描述][6216aa0514ef48e487d49a57d75faf5f.png_pic_center]

#### 5.4配置nginx ####

1.我们仿着"demo06-上传讲师头像"的"5.6使用nginx配置项目请求转发"的第3步在nginx的配置文件nginx.conf中配置8003端口的请求转发

location ~ /eduvod/ {
    	proxy_pass http://localhost:8003;
    }

![在这里插入图片描述][b0e82f7b4b494ab5aceea71fa90d32e8.png_pic_center]

2.我们在"2.3创建配置文件"说过tomcat默认上传大小限制是1M,所以我们重新进行了配置。其实nginx默认上传大小限制也是1M,我们在nginx的配置文件nginx.conf中做配置,配置上传大小限制为1024M

在http\{\}中添加如下代码

client_max_body_size 1024m;

![在这里插入图片描述][e63c38ed308e4a239e217ade9a981a2d.png_pic_center]

#### 5.5测试 ####

保存配置后重启nginx后自行测试

### 6.添加小节视频完善 ###

#### 6.1获得上传的视频的名称 ####

1.数据表edu\_video中的video\_original\_name字段用于存视频名称,我们现在来完善一下,使得上传视频后可以将视频名称存到数据库中

2.实现方法是改变后端接口,使得返回的数据中有视频名称,但没必要这样做,还要去改后端接口,太麻烦了,建议的解决方法如下:

3.给video对象添加属性videoOriginalName

![在这里插入图片描述][20606e6a11e94e3cbe0c1e3cab333f0b.png_pic_center]

4.给方法handleVodUploadSuccess添加一个参数file,这个**file表示上传的文件**

![在这里插入图片描述][0b3a3a0b3ab346548fd0b060c33bad28.png_pic_center]

5.在handleVodUploadSuccess方法中添加代码实现给上传视频名称赋值

//上传视频名称赋值
    this.video.videoOriginalName = file.name

![在这里插入图片描述][1e4c7e53944448cea3ae7e35c3dec0ca.png_pic_center]

#### 6.2删除上传的视频 ####

详细步骤见接下来的"7.删除上传的视频后端"

### 7.删除上传的视频后端 ###

#### 7.1问题演示 ####

1.点击叉号(×)将视频删掉

![在这里插入图片描述][3d7c7a0d048e40cc972fcb5e14ac8d57.png_pic_center]

2.此时页面中确实没有这个视频了

![在这里插入图片描述][58abc0a249b640ea8c97f5ab0a36cd63.png_pic_center]

3.但实际上阿里云中存的仍有这条视频

![在这里插入图片描述][e164b62e186741c8ae1aba25bd0a292c.png_pic_center]

4.我们想做的是点击叉号(×)后阿里云中也会将这个视频删掉

#### 7.2创建初始化类 ####

在utils包下创建初始化类InitVodClient

public class InitVodClient {
        
        public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
        
            String regionId = "cn-shanghai";  // 点播服务接入区域
            DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
            DefaultAcsClient client = new DefaultAcsClient(profile);
            return client;
        }
    }

![在这里插入图片描述][a1ad2a2a52324893b449d121e2261189.png_pic_center]

#### 7.3控制层 ####

在控制器VodController中编写代码

//根据视频id删除阿里云中的视频
    @DeleteMapping("removeAlyVideo/{id}")
    public R removeAlyVideo(@PathVariable String id) {
        
        try {
        
            //1.创建初始化对象
            DefaultAcsClient client = InitVodClient.initVodClient(
                ConstantVodUtils.ACCESS_KEY_ID,
                ConstantVodUtils.ACCESS_KEY_SECRET);
    
            //2.创建删除的request
            DeleteVideoRequest request = new DeleteVideoRequest();
    
            //3.向request对象里面设置视频id
            request.setVideoIds(id);
    
            //4.调用初始化对象里面的方法,实现删除
            client.getAcsResponse(request);
    
            return R.ok();
        } catch(Exception e) {
        
            e.printStackTrace();
            throw new GuliException(20001, "删除视频失败");
        }
    }

![在这里插入图片描述][c374fd9e3dac499abab79f8be9813e37.png_pic_center]

实际开发中我们应该像以前一样removeAlyVideo方法中的业务逻辑写到service层,然后在控制层调用业务层的方法,这里老师直接将逻辑写到了控制层,那我就也写到控制层吧

### 8.删除上传的视频前端 ###

#### 8.1在api中定义方法 ####

在video.js中定义方法调用后端接口

//5.根据视频id删除阿里云中的视频
    deleteAlyVod(id) {
        
      return request({
        
        url: `/eduvod/video/removeAlyVideo/${
          id}`,
        method: 'delete'
      })
    }

![在这里插入图片描述][23ef54fa6dd34c8fb82630fb1b4844a9.png_pic_center]

#### 8.2点击叉号(×)后跳出确认弹框 ####

在chapter.vue中编写beforeVodRemove方法,使得点击叉号(×)后可以跳出确认弹框

//点击×调用的方法,我们让其跳出弹框
    beforeVodRemove(file) {
        
        return this.$confirm(`确定移除 ${
           file.name }？`);
    },

![在这里插入图片描述][f4deb5000cf340898f798269a7a71ea1.png_pic_center]

#### 8.3调用api中的方法 ####

定义方法来调用api中的方法以实现删除视频

//点击×后跳出弹框,点击弹框的"确定"后调用的方法
    handleVodRemove() {
        
        video.deleteAlyVod(this.video.videoSourceId)
            .then(response => {
        
                //提示删除成功
                    this.$message({
        
                        type: 'success',
                        message: '删除视频成功!'
                    });
                //把文件列表清空
                this.fileList = []
            })
    },

![在这里插入图片描述][f208fd6d954e4256827f28ee293241a0.png_pic_center]

我不知道截图中第157行`this.fileList = []`的作用是什么

#### 8.4测试 ####

1.先上传一个视频到阿里云

![在这里插入图片描述][b50636f9ce4f47d9a080f59a28fa252c.png_pic_center]

2.点击叉号(×)将阿里云中的视频删掉

![在这里插入图片描述][514768187927476aaa4ecf2e8cba1d70.png_pic_center]

3.点击"确定"完成小节的添加  
![在这里插入图片描述][db07bf88507443c19e06b2f8ddc13038.png_pic_center]

4.可以去阿里云看,确实没有这条视频了,我们已经成功删除,但是数据库中仍存着这条视频的id和名称

![在这里插入图片描述][315075f71776442b880b5c4a4b2b7831.png_pic_center]

5.这是因为我们删除视频时并没有清空video对象的videoSourceId和videoOriginalName,接下来我们在handleVodRemove方法中进行完善

//把video对象中的视频id和视频名称值清空
    this.video.videoSourceId = ''
    this.video.videoOriginalName = ''

![在这里插入图片描述][950833512f2f44d7870889049f511630.png_pic_center]

6.完善后再进行测试就不会再出现这个问题了

[https_www.aliyun.com]: https://www.aliyun.com
[6d858ee2eeb1418bafed10452b0c7caa.png_pic_center]: https://img-blog.csdnimg.cn/6d858ee2eeb1418bafed10452b0c7caa.png#pic_center
[b81b6c61328f4a1e9f74471f376fc4cd.png_pic_center]: https://img-blog.csdnimg.cn/b81b6c61328f4a1e9f74471f376fc4cd.png#pic_center
[6f4f69174d5f4d5cb79621c0097b9e27.png_pic_center]: https://img-blog.csdnimg.cn/6f4f69174d5f4d5cb79621c0097b9e27.png#pic_center
[8289696546c84581ac25d2acdb68d35c.png_pic_center]: https://img-blog.csdnimg.cn/8289696546c84581ac25d2acdb68d35c.png#pic_center
[daffc77df4854574bc495ab87490f9d2.png_pic_center]: https://img-blog.csdnimg.cn/daffc77df4854574bc495ab87490f9d2.png#pic_center
[5875b3bcf04a4bf6bc58b23ce5048f98.png_pic_center]: https://img-blog.csdnimg.cn/5875b3bcf04a4bf6bc58b23ce5048f98.png#pic_center
[6e9e44392ad448028f2137a441a8da70.png_pic_center]: https://img-blog.csdnimg.cn/6e9e44392ad448028f2137a441a8da70.png#pic_center
[5600441b0b074a78ba765ae911c5ffb9.png_pic_center]: https://img-blog.csdnimg.cn/5600441b0b074a78ba765ae911c5ffb9.png#pic_center
[d52c8c159a5d40ccb2fdba53a81c5c61.png_pic_center]: https://img-blog.csdnimg.cn/d52c8c159a5d40ccb2fdba53a81c5c61.png#pic_center
[ec07f263611a474fab2d0910f58836fb.png_pic_center]: https://img-blog.csdnimg.cn/ec07f263611a474fab2d0910f58836fb.png#pic_center
[3a41bbf8b9fe46809bdaa8b7ee6e0b5d.png_pic_center]: https://img-blog.csdnimg.cn/3a41bbf8b9fe46809bdaa8b7ee6e0b5d.png#pic_center
[dc32cb79c5904048907ad9351465cabe.png_pic_center]: https://img-blog.csdnimg.cn/dc32cb79c5904048907ad9351465cabe.png#pic_center
[b992319a4ab84e369d1115f8db84447e.png_pic_center]: https://img-blog.csdnimg.cn/b992319a4ab84e369d1115f8db84447e.png#pic_center
[367e6c5b90a54cc3b986a0aa8f170127.png_pic_center]: https://img-blog.csdnimg.cn/367e6c5b90a54cc3b986a0aa8f170127.png#pic_center
[1aa8386d60a64b6eb451e2de720a9363.png_pic_center]: https://img-blog.csdnimg.cn/1aa8386d60a64b6eb451e2de720a9363.png#pic_center
[f6a49c7a426147bf8ab45472e416244b.png_pic_center]: https://img-blog.csdnimg.cn/f6a49c7a426147bf8ab45472e416244b.png#pic_center
[3431fe35e7ba4adc9687059c0e182c6d.png_pic_center]: https://img-blog.csdnimg.cn/3431fe35e7ba4adc9687059c0e182c6d.png#pic_center
[954fe811300542ed92040949750a340b.png_pic_center]: https://img-blog.csdnimg.cn/954fe811300542ed92040949750a340b.png#pic_center
[95f17722a8414c9fa9d28b1b2c677368.png_pic_center]: https://img-blog.csdnimg.cn/95f17722a8414c9fa9d28b1b2c677368.png#pic_center
[8245f8a00e6d443498ff31745c0efc70.png_pic_center]: https://img-blog.csdnimg.cn/8245f8a00e6d443498ff31745c0efc70.png#pic_center
[937d8fb76ebd4026a39238d5cc2a1d5a.png_pic_center]: https://img-blog.csdnimg.cn/937d8fb76ebd4026a39238d5cc2a1d5a.png#pic_center
[1483c8a96f124568a13b8614012da2cd.png_pic_center]: https://img-blog.csdnimg.cn/1483c8a96f124568a13b8614012da2cd.png#pic_center
[6caa4a8bcf434bffb9cd0d5af97f407a.png_pic_center]: https://img-blog.csdnimg.cn/6caa4a8bcf434bffb9cd0d5af97f407a.png#pic_center
[edd949898cf3412692052e8c7b97feab.png_pic_center]: https://img-blog.csdnimg.cn/edd949898cf3412692052e8c7b97feab.png#pic_center
[21fdd88646b446d298e864f9c01d9d4b.png_pic_center]: https://img-blog.csdnimg.cn/21fdd88646b446d298e864f9c01d9d4b.png#pic_center
[621e14f897814ad080344d4a46ff0114.png_pic_center]: https://img-blog.csdnimg.cn/621e14f897814ad080344d4a46ff0114.png#pic_center
[758dae430df446029340f474c2dd8a7a.png_pic_center]: https://img-blog.csdnimg.cn/758dae430df446029340f474c2dd8a7a.png#pic_center
[6d0f0f1f3ef243c997fe3858edf23462.png_pic_center]: https://img-blog.csdnimg.cn/6d0f0f1f3ef243c997fe3858edf23462.png#pic_center
[8a179c9c87024bef9060a66129c8c9c3.png_pic_center]: https://img-blog.csdnimg.cn/8a179c9c87024bef9060a66129c8c9c3.png#pic_center
[10b429f61a5149a58f2a705078158b08.png_pic_center]: https://img-blog.csdnimg.cn/10b429f61a5149a58f2a705078158b08.png#pic_center
[a9fc3e41f25c4ffab25cd8dfa44a5399.png_pic_center]: https://img-blog.csdnimg.cn/a9fc3e41f25c4ffab25cd8dfa44a5399.png#pic_center
[49b7e7a3c87e4c0ab7e7d6a993d00ca1.png_pic_center]: https://img-blog.csdnimg.cn/49b7e7a3c87e4c0ab7e7d6a993d00ca1.png#pic_center
[e3046d68c1c94b1fbf6b7b6767133df6.png_pic_center]: https://img-blog.csdnimg.cn/e3046d68c1c94b1fbf6b7b6767133df6.png#pic_center
[b4457b09c4dd413e9197863e2ad725a5.png_pic_center]: https://img-blog.csdnimg.cn/b4457b09c4dd413e9197863e2ad725a5.png#pic_center
[18ea5db211894532ad30199886b61a1e.png_pic_center]: https://img-blog.csdnimg.cn/18ea5db211894532ad30199886b61a1e.png#pic_center
[4b803b70445642a0ad1665c678ba6543.png_pic_center]: https://img-blog.csdnimg.cn/4b803b70445642a0ad1665c678ba6543.png#pic_center
[f8814c54b4ce47b4b510c561d53b30a3.png_pic_center]: https://img-blog.csdnimg.cn/f8814c54b4ce47b4b510c561d53b30a3.png#pic_center
[e657f07908374fb185a6627be8372f0c.png_pic_center]: https://img-blog.csdnimg.cn/e657f07908374fb185a6627be8372f0c.png#pic_center
[4720d88679c649568a3e760a05c8a9ff.png_pic_center]: https://img-blog.csdnimg.cn/4720d88679c649568a3e760a05c8a9ff.png#pic_center
[9e64b80abb4543d3be08bd715403176d.png_pic_center]: https://img-blog.csdnimg.cn/9e64b80abb4543d3be08bd715403176d.png#pic_center
[dd1647ec4a1048bc945799b2c3df2f01.png_pic_center]: https://img-blog.csdnimg.cn/dd1647ec4a1048bc945799b2c3df2f01.png#pic_center
[ae5c3f987a294fb1ba311ee2f48075fa.png_pic_center]: https://img-blog.csdnimg.cn/ae5c3f987a294fb1ba311ee2f48075fa.png#pic_center
[c343d4d5c7274ba382c2218a098d2674.png_pic_center]: https://img-blog.csdnimg.cn/c343d4d5c7274ba382c2218a098d2674.png#pic_center
[8c90c6872b924606ac7643d2ac239a09.png_pic_center]: https://img-blog.csdnimg.cn/8c90c6872b924606ac7643d2ac239a09.png#pic_center
[da51043724964910897c7138dfbc33c6.png_pic_center]: https://img-blog.csdnimg.cn/da51043724964910897c7138dfbc33c6.png#pic_center
[9cab6e80e8974b37b8bd041cd4017e3f.png_pic_center]: https://img-blog.csdnimg.cn/9cab6e80e8974b37b8bd041cd4017e3f.png#pic_center
[6c73b993e48445a38713c5185272db49.png_pic_center]: https://img-blog.csdnimg.cn/6c73b993e48445a38713c5185272db49.png#pic_center
[229251f0abab4793b2453e4b50cb98f0.png_pic_center]: https://img-blog.csdnimg.cn/229251f0abab4793b2453e4b50cb98f0.png#pic_center
[b3ded757836f4e92b4b11b04cd9de1ff.png_pic_center]: https://img-blog.csdnimg.cn/b3ded757836f4e92b4b11b04cd9de1ff.png#pic_center
[659c9797dafe48ab9b5134f07a0bec13.png_pic_center]: https://img-blog.csdnimg.cn/659c9797dafe48ab9b5134f07a0bec13.png#pic_center
[http_localhost_8003_swagger-ui.html]: http://localhost:8003/swagger-ui.html
[ac172df3b7314d729fecd82ed456e4fe.png_pic_center]: https://img-blog.csdnimg.cn/ac172df3b7314d729fecd82ed456e4fe.png#pic_center
[6b8990f096f04290956a1aeddc489684.png_pic_center]: https://img-blog.csdnimg.cn/6b8990f096f04290956a1aeddc489684.png#pic_center
[1fa0352c4ed54987821664bd3aeea82a.png_pic_center]: https://img-blog.csdnimg.cn/1fa0352c4ed54987821664bd3aeea82a.png#pic_center
[3e271a81c256420f96be1e563de5a5fd.png_pic_center]: https://img-blog.csdnimg.cn/3e271a81c256420f96be1e563de5a5fd.png#pic_center
[6216aa0514ef48e487d49a57d75faf5f.png_pic_center]: https://img-blog.csdnimg.cn/6216aa0514ef48e487d49a57d75faf5f.png#pic_center
[b0e82f7b4b494ab5aceea71fa90d32e8.png_pic_center]: https://img-blog.csdnimg.cn/b0e82f7b4b494ab5aceea71fa90d32e8.png#pic_center
[e63c38ed308e4a239e217ade9a981a2d.png_pic_center]: https://img-blog.csdnimg.cn/e63c38ed308e4a239e217ade9a981a2d.png#pic_center
[20606e6a11e94e3cbe0c1e3cab333f0b.png_pic_center]: https://img-blog.csdnimg.cn/20606e6a11e94e3cbe0c1e3cab333f0b.png#pic_center
[0b3a3a0b3ab346548fd0b060c33bad28.png_pic_center]: https://img-blog.csdnimg.cn/0b3a3a0b3ab346548fd0b060c33bad28.png#pic_center
[1e4c7e53944448cea3ae7e35c3dec0ca.png_pic_center]: https://img-blog.csdnimg.cn/1e4c7e53944448cea3ae7e35c3dec0ca.png#pic_center
[3d7c7a0d048e40cc972fcb5e14ac8d57.png_pic_center]: https://img-blog.csdnimg.cn/3d7c7a0d048e40cc972fcb5e14ac8d57.png#pic_center
[58abc0a249b640ea8c97f5ab0a36cd63.png_pic_center]: https://img-blog.csdnimg.cn/58abc0a249b640ea8c97f5ab0a36cd63.png#pic_center
[e164b62e186741c8ae1aba25bd0a292c.png_pic_center]: https://img-blog.csdnimg.cn/e164b62e186741c8ae1aba25bd0a292c.png#pic_center
[a1ad2a2a52324893b449d121e2261189.png_pic_center]: https://img-blog.csdnimg.cn/a1ad2a2a52324893b449d121e2261189.png#pic_center
[c374fd9e3dac499abab79f8be9813e37.png_pic_center]: https://img-blog.csdnimg.cn/c374fd9e3dac499abab79f8be9813e37.png#pic_center
[23ef54fa6dd34c8fb82630fb1b4844a9.png_pic_center]: https://img-blog.csdnimg.cn/23ef54fa6dd34c8fb82630fb1b4844a9.png#pic_center
[f4deb5000cf340898f798269a7a71ea1.png_pic_center]: https://img-blog.csdnimg.cn/f4deb5000cf340898f798269a7a71ea1.png#pic_center
[f208fd6d954e4256827f28ee293241a0.png_pic_center]: https://img-blog.csdnimg.cn/f208fd6d954e4256827f28ee293241a0.png#pic_center
[b50636f9ce4f47d9a080f59a28fa252c.png_pic_center]: https://img-blog.csdnimg.cn/b50636f9ce4f47d9a080f59a28fa252c.png#pic_center
[514768187927476aaa4ecf2e8cba1d70.png_pic_center]: https://img-blog.csdnimg.cn/514768187927476aaa4ecf2e8cba1d70.png#pic_center
[db07bf88507443c19e06b2f8ddc13038.png_pic_center]: https://img-blog.csdnimg.cn/db07bf88507443c19e06b2f8ddc13038.png#pic_center
[315075f71776442b880b5c4a4b2b7831.png_pic_center]: https://img-blog.csdnimg.cn/315075f71776442b880b5c4a4b2b7831.png#pic_center
[950833512f2f44d7870889049f511630.png_pic_center]: https://img-blog.csdnimg.cn/950833512f2f44d7870889049f511630.png#pic_center