1.4前端开发
1.4.1 配置虚拟主机
学习中心的二级域名为ucenter.xuecheng.com，我们在nginx中配置ucenter虚拟主机。
#学成网用户中心 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解决代理，如下图：
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/#/le ... f01617f9dabc40000/0 4028e581617f945f01617f9dabc40000：第一个参数为课程id，测试时从ES索引库找一个课程id 0：第二个参数为课程计划id，此参数用于点击课程计划播放视频。
| 
收藏
淘帖
踩
