到目前为止,我们已可以编辑课程计划信息并上传课程视频,下一步我们要实现在线学习页面动态读取章节对应的视频并进行播放。在线学习页面所需要的信息有两类:一类是课程计划信息、一类是课程学习信息(视频地址、学习进度等),如下图:
在线学习集成媒资管理的需求如下:
1、在线学习页面显示课程计划2、点击课程计划播放该课程计划对应的视频本章节实现学习页面动态显示课程计划,进入不同课程的学习页面右侧动态显示当前课程的课程计划。
课程计划信息从哪里获取?
目前课程计划信息在课程管理数据库和ES索引库中存在,考虑性能要求,课程发布后对课程的查询统一从ES索引库中查询。
前端通过请求搜索服务获取课程信息,需要单独在搜索服务中定义课程信息查询接口。
本接口接收课程id,查询课程所有信息返回给前端。
packagecom.xuecheng.api.course;importcom.xuecheng.framework.domain.course.CoursePub;importcom.xuecheng.framework.domain.search.CourseSearchParam;importcom.xuecheng.framework.model.response.QueryResponseResult;importio.swagger.annotations.Api;importio.swagger.annotations.ApiOperation;importjava.io.IOException;importjava.util.Map;/***@authorHackerStar*@create2020-08-2511:42*/@Api(value="课程搜索",description="课程搜索",tags={"课程搜索"})publicinterfaceEsCourseControllerApi{@ApiOperation("课程搜索")publicQueryResponseResult
在搜索服务中开发查询课程信息接口。
在搜索服务中增加查询课程信息接口的service
学习中心的二级域名为ucenter.xuecheng.com,我们在nginx中配置ucenter虚拟主机。
在学习中心要调用搜索的API,使用Nginx解决代理,如下图:
配置搜索Api代理路径:
1、定义视图
a、课程计划
data(){return{url:'',//当前urlcourseId:'',//课程idchapter:'',//章节Idcoursename:'课程名称',//课程名称coursepic:'',//课程图片teachplanList:[],//课程计划playerOptions:{//播放参数autoplay:false,controls:true,sources:[{type:"application/x-mpegURL",src:''}]},3、在created钩子方法中获取课程信息
4028e581617f945f01617f9dabc40000:第一个参数为课程id,测试时从ES索引库查找的课程id0:第二个参数为课程计划id,此参数用于点击课程计划播放视频因为之前将mongodb的数据库中的teachplan类型改为了text,故索引中的数据为字符串格式,不是json格式,导致视频目录无法显示,但是如果修改数据库类型又会出错,所以后台代码应该是没有问题的。
用户进入在线学习页面,点击课程计划将播放该课程计划对应的教学视频。
业务流程如下:
业务流程说明:
1、用户进入在线学习页面,页面请求搜索服务获取课程信息(包括课程计划信息)并且在页面展示。2、在线学习请求学习服务获取视频播放地址。3、学习服务校验当前用户是否有权限学习,如果没有权限学习则提示用户。4、学习服务校验通过,请求搜索服务获取课程媒资信息。5、搜索服务请求ElasticSearch获取课程媒资信息。为什么要请求ElasticSearch查询课程媒资信息?
出于性能的考虑,公开查询课程信息从搜索服务查询。
什么时候将课程媒资信息存储到ElasticSearch中?
课程媒资信息是在课程发布的时候存入ElasticSearch,因为课程发布后课程信息将基本不再修改。
课程媒资信息是在课程发布的时候存入ElasticSearch索引库,因为课程发布后课程信息将基本不再修改,具体的业务流程如下。
1、课程发布,向课程媒资信息表写入数据。1)根据课程id删除teachplanMediaPub中的数据2)根据课程id查询teachplanMedia数据3)将查询到的teachplanMedia数据插入到teachplanMediaPub中2、Logstash定时扫描课程媒资信息表,并将课程媒资信息写入索引库。2.2.1数据模型在xc_course数据库创建课程计划媒资发布表:
CREATETABLE`teachplan_media_pub`(`teachplan_id`varchar(32)NOTNULLCOMMENT'课程计划id',`media_id`varchar(32)NOTNULLCOMMENT'媒资文件id',`media_fileoriginalname`varchar(128)NOTNULLCOMMENT'媒资文件的原始名称',`media_url`varchar(256)NOTNULLCOMMENT'媒资文件访问地址',`courseid`varchar(32)NOTNULLCOMMENT'课程Id',`timestamp`timestampNOTNULLDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMPCOMMENT'logstash使用',PRIMARYKEY(`teachplan_id`))ENGINE=InnoDBDEFAULTCHARSET=utf8数据模型类如下:
创建TeachplanMediaPub表的Dao,向TeachplanMediaPub存储信息采用先删除该课程的媒资信息,再添加该课程的媒资信息,所以这里定义根据课程id删除课程计划媒资方法:
packagecom.xuecheng.manage_course.dao;importcom.xuecheng.framework.domain.course.TeachplanMediaPub;importorg.springframework.data.jpa.repository.JpaRepository;/***CreatedbyAdministrator.*/publicinterfaceTeachplanMediaPubRepositoryextendsJpaRepository
1、保存课程计划媒资信息方法
本方法采用先删除该课程的媒资信息,再添加该课程的媒资信息。
2、课程发布时调用此方法
修改课程发布的service方法:
......saveTeachplanMediaPub(id);returnnewCoursePublishResult(CommonCode.SUCCESS,pageUrl);......3.2.4测试测试课程发布后是否成功将课程媒资信息存储到teachplan_media_pub中,测试流程如下:
1、指定一个课程2、为课程计划添加课程媒资3、执行课程发布4、观察课程计划媒资信息是否存储至teachplan_media_pub中注意:由于此测试仅用于测试发布课程计划媒资信息的功能,可暂时将cms页面发布的功能暂时屏蔽,提高测试效率。
Logstash定时扫描课程媒资信息表,并将课程媒资信息写入索引库。
1、创建xc_course_media索引
2、并向此索引创建如下映射
在logstach的cong目录创建xc_course_media_template.json,内容如下:
配置输入数据源和输出数据源。
./logstash-f../config/mysql_course_media.conf2.4搜索服务查询课程媒资接口2.4.1需求分析搜索服务提供查询课程媒资接口,此接口供学习服务调用。
在课程搜索包下定义Api
1、配置课程计划媒资索引库等信息
在application.yml中配置
2、service方法开发
在课程搜索服务中定义课程媒资查询接口,为了适应后续需求,service参数定义为数组,可一次查询多个课程计划的媒资信息。
使用swagger-ui和postman测试课程媒资查询接口。
根据下边的业务流程,本章节完成前端学习页面请求学习服务获取课程视频地址,并自动播放视频。
创建xc_learning数据库,学习数据库将记录学生的选课信息、学习信息。
导入:资料/xc_learning.sql
参考课程管理服务工程结构,创建学习服务工程:
pom.xml
定义返回值类型:
定义接口,学习服务根据传入课程ID、章节Id(课程计划ID)来取学习地址。
学习服务根据传入课程ID、章节Id(课程计划ID)请求搜索服务获取学习地址。
学习服务要调用搜索服务查询课程媒资信息,所以需要将搜索服务注册到eureka中。
1、查看服务名称是否为xc-service-search
注意修改application.xml中的服务名称:spring: application: name:xc‐service‐search2、配置搜索服务的配置文件application.yml,加入Eureka配置如下:
@EnableDiscoveryClient3.4.3搜索服务客户端在学习服务创建搜索服务的客户端接口,此接口会生成代理对象,调用搜索服务:
在学习服务中定义service方法,此方法远程请求课程管理服务、媒资管理服务获取课程学习地址。
调用service根据课程计划id查询视频播放地址:
需要在学习中心前端页面需要完成如下功能:
在created钩子方法中完成
//开始学习,获取课程计划所对应的视频地址study(chapter){//get_media方法courseApi.get_media(this.courseId,chapter).then(res=>{if(res.success){//获取视频播放地址letfileUrl=res.fileUrl;//相对路径letvideoUrl=sysConfig.videoUrl+fileUrl;//视频完整的播放路径//播放视频this.playvideo(videoUrl)}})},2、点击右侧课程章节切换播放
在原有代码基础上添加click事件,点击调用开始学习方法(study)