[资源下载] 【郑州校区】学成在线-第15天-讲义-媒资管理系统集成一

【郑州校区】学成在线-第15天-讲义-媒资管理系统集成一

1 学习页面查询课程计划
1.1 需求分析
到目前为止，我们已可以编辑课程计划信息并上传课程视频，下一步我们要实现在线学习页面动态读取章节对应的视频并进行播放。在线学习页面所需要的信息有两类：一类是课程计划信息、一类是课程学习信息（视频地址、学习进度等），如下图：

在线学习集成媒资管理的需求如下：
1、在线学习页面显示课程计划
2、点击课程计划播放该课程计划对应的视频
本章节实现学习页面动态显示课程计划，进入不同课程的学习页面右侧动态显示当前课程的课程计划。
1.2 Api接口
课程计划信息从哪里获取？
目前课程计划信息在课程管理数据库和ES索引库中存在，考虑性能要求，课程发布后对课程的查询统一从ES索引库中查询。
前端通过请求搜索服务获取课程信息，需要单独在搜索服务中定义课程信息查询接口。
本接口接收课程id，查询课程所有信息返回给前端。

[AppleScript] 纯文本查看 复制代码

@ApiOperation("根据id查询课程信息")
public Map<String,CoursePub> getall(String id);

返回的课程信息为json结构：key为课程id，value为课程内容。
1.3 服务端开发
在搜索服务中开发查询课程信息接口。
1.3.1 Service
在搜索服务中增加查询课程信息接口的service

[AppleScript] 纯文本查看 复制代码

 public Map<String, CoursePub> getall(String id) {
//设置索引库
SearchRequest searchRequest = new SearchRequest(es_index);
//设置类型
searchRequest.types(es_type);
SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
//查询条件，根据课程id查询
searchSourceBuilder.query(QueryBuilders.termsQuery("id", id));
//取消source源字段过虑，查询所有字段
// searchSourceBuilder.fetchSource(new String[]{"name", "grade", "charge","pic"}, new
String[]{});
searchRequest.source(searchSourceBuilder);
SearchResponse searchResponse = null;
try {
//执行搜索
searchResponse = restHighLevelClient.search(searchRequest);
} catch (IOException e) {
e.printStackTrace();
}
//获取搜索结果
SearchHits hits = searchResponse.getHits();
SearchHit[] searchHits = hits.getHits();
Map<String,CoursePub> map = new HashMap<>();
for (SearchHit hit : searchHits) {
String courseId = hit.getId();
Map<String, Object> sourceAsMap = hit.getSourceAsMap();
String courseId = (String) sourceAsMap.get("id");
String name = (String) sourceAsMap.get("name");
String grade = (String) sourceAsMap.get("grade");
String charge = (String) sourceAsMap.get("charge");
String pic = (String) sourceAsMap.get("pic");
String description = (String) sourceAsMap.get("description");
String teachplan = (String) sourceAsMap.get("teachplan");
CoursePub coursePub = new CoursePub();
coursePub.setId(courseId);
coursePub.setName(name);
coursePub.setPic(pic);
coursePub.setGrade(grade);
coursePub.setTeachplan(teachplan);
coursePub.setDescription(description);
map.put(courseId,coursePub);
}
return map;
}

1.3.2 Controller

[AppleScript] 纯文本查看 复制代码

 @Override
@GetMapping("/getall/{id}")
public Map<String, CoursePub> getall(@PathVariable("id") String id) {
return esCourseService.getall(id);
}

1.3.3 测试
使用swagger-ui或postman测试查询课程信息接口。
1.4前端开发
1.4.1 配置虚拟主机
学习中心的二级域名为ucenter.xuecheng.com，我们在nginx中配置ucenter虚拟主机。

[AppleScript] 纯文本查看 复制代码

#学成网用户中心
server {
listen 80;
server_name ucenter.xuecheng.com;
#个人中心
location / {
proxy_pass http://ucenter_server_pool;
}
}
#前端ucenter
upstream ucenter_server_pool{
#server 127.0.0.1:7081 weight=10;
server 127.0.0.1:13000 weight=10;
}

在学习中心要调用搜索的API，使用Nginx解决代理，如下图：

配置搜索Api代理路径：

[AppleScript] 纯文本查看 复制代码

#后台搜索（公开api）
upstream search_server_pool{
server 127.0.0.1:40100 weight=10;
}
#后端搜索服务
location /openapi/search/ {
proxy_pass http://search_server_pool/search/;
}

1.4.2 API方法
在学习中心对课程信息的查询属于基础常用功能，所以我们将课程查询的api方法定义在base模块下，如下图：

在system.js中定义课程查询方法：

[AppleScript] 纯文本查看 复制代码

 import http from './public'
export const course_view = id => {
return http.requestGet('/openapi/search/course/getall/'+id);
}

1.4.3 API调用
在learning_video.vue页面中调用课程信息查询接口，得到课程计划，将课程计划json串转成对象。
1、定义视图
a、课程计划

[AppleScript] 纯文本查看 复制代码

 <div class="nav nav‐stacked" v‐for="(teachplan_first, index) in teachplanList">
<div class="tit nav‐justified text‐center"><i class="pull‐left glyphicon
glyphicon‐th‐list"></i>{{teachplan_first.pname}}<i class="pull‐right"></i></div>
<li v‐if="teachplan_first.children!=null" v‐for="(teachplan_second, index)
in teachplan_first.children"><i class="glyphicon glyphicon‐check"></i>
<a :href="url" @click="study(teachplan_second.id)">
{{teachplan_second.pname}}
</a>
</li>

b、课程名称

[AppleScript] 纯文本查看 复制代码

 <div class="top text‐center">
{{coursename}}
</div>

2、定义数据对象

[AppleScript] 纯文本查看 复制代码

 data() {
return {
url:'',//当前url
courseId:'',//课程id
chapter:'',//章节Id
coursename:'',//课程名称
coursepic:'',//课程图片
teachplanList:[],//课程计划
playerOptions: {//播放参数
autoplay: false,
controls: true,
sources: [{
type: "application/x‐mpegURL",
src: ''
}]
},
}
}

3、在created钩子方法中获取课程信息

[AppleScript] 纯文本查看 复制代码

created(){
//当前请求的url
this.url = window.location
//课程id
this.courseId = this.$route.params.courseId
//章节id
this.chapter = this.$route.params.chapter
//查询课程信息
systemApi.course_view(this.courseId).then((view_course)=>{
if(!view_course || !view_course[this.courseId]){
this.$message.error("获取课程信息失败，请重新进入此页面！")
return ;
}
let courseInfo = view_course[this.courseId]
console.log(courseInfo)
this.coursename = courseInfo.name
if(courseInfo.teachplan){
let teachplan = JSON.parse(courseInfo.teachplan);
this.teachplanList = teachplan.children;
}
})
},

1.4.4 测试
在浏览器请求：http://ucenter.xuecheng.com/#/learning/4028e581617f945f01617f9dabc40000/0
4028e581617f945f01617f9dabc40000：第一个参数为课程id，测试时从ES索引库找一个课程id
0：第二个参数为课程计划id，此参数用于点击课程计划播放视频。

帐号		自动登录	找回密码
密码			加入黑马

[资源下载] 【郑州校区】学成在线-第15天-讲义-媒资管理系统集成一

0 个回复