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

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

demo11-课程管理

1.阿里云视频点播

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

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

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

3.点击"管理控制台"

4.点击"开通服务"

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

扫描二维码关注公众号，回复： 15506999 查看本文章

1.2"音/视频"菜单

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

接下来我们测试上传视频

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

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

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

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

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

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

7.点击"管理"

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

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

1.3"转码模板组"菜单

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1创建模块

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

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

3.填写信息

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>

2.刷新maven

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

• 截图中的第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);
    }
}

截图中第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

3.1.2代码写到test目录下

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

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;
    }
}

点播服务接入区域固定是"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");
    }
}

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

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

3.测试结果如下

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());
}

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

3.测试结果如下

3.3本地文件上传

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

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");
    }
}

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

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

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

4.添加小节视频后端

4.1基本结构

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

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

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

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

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

@Service
public class VodServiceImpl implements VodService {
    
    
}

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);
    }
}

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

4.3业务层接口

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

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

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;
    }
}

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;
        }

    }
}

4.6测试

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

5.添加小节视频前端

5.1添加上传组件

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

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>

• :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地址

5.2定义方法

在chapter.vue中定义方法

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

5.3清空fileList

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

5.4配置nginx

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

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

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

在http{}中添加如下代码

client_max_body_size 1024m;

5.5测试

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

6.添加小节视频完善

6.1获得上传的视频的名称

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

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

3.给video对象添加属性videoOriginalName

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

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

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

6.2删除上传的视频

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

7.删除上传的视频后端

7.1问题演示

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

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

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

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;
    }
}

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, "删除视频失败");
    }
}

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

8.删除上传的视频前端

8.1在api中定义方法

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

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

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

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

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

8.3调用api中的方法

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

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

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

8.4测试

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

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

3.点击"确定"完成小节的添加

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

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

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

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