|
【郑州校区】学成在线-第15天-讲义-媒资管理系统集成五
3.4 服务端开发
3.4.1 需求分析
学习服务根据传入课程ID、章节Id(课程计划ID)请求搜索服务获取学习地址。
3.4.2 搜索服务注册Eureka
学习服务要调用搜索服务查询课程媒资信息，所以需要将搜索服务注册到eureka中。
1、查看服务名称是否为xc-service-search
[AppleScript] 纯文本查看 复制代码 注意修改application.xml中的服务名称：
spring:
application:
name: xc‐service‐search
2、配置搜索服务的配置文件application.yml，加入Eureka配置 如下：
[AppleScript] 纯文本查看 复制代码 eureka:
client:
registerWithEureka: true #服务注册开关
fetchRegistry: true #服务发现开关
serviceUrl: #Eureka客户端与Eureka服务端进行交互的地址，多个中间用逗号分隔
defaultZone:
${EUREKA_SERVER:http://localhost:50101/eureka/,http://localhost:50102/eureka/}
instance:
prefer‐ip‐address: true #将自己的ip地址注册到Eureka服务中
ip‐address: ${IP_ADDRESS:127.0.0.1}
instance‐id: ${spring.application.name}:${server.port} #指定实例id
ribbon:
MaxAutoRetries: 2 #最大重试次数，当Eureka中可以找到服务，但是服务连不上时将会重试，如果eureka中找不
到服务则直接走断路器
MaxAutoRetriesNextServer: 3 #切换实例的重试次数
OkToRetryOnAllOperations: false #对所有操作请求都进行重试，如果是get则可以，如果是post，put等操作
没有实现幂等的情况下是很危险的,所以设置为false
ConnectTimeout: 5000 #请求连接的超时时间
ReadTimeout: 6000 #请求处理的超时时间
3、添加eureka依赖：
[AppleScript] 纯文本查看 复制代码 <!‐‐ 导入Eureka客户端的依赖 ‐‐>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring‐cloud‐starter‐netflix‐eureka‐client</artifactId>
</dependency>
4、修改启动类，在class上添加如下注解：
[AppleScript] 纯文本查看 复制代码 @EnableDiscoveryClient
3.4.3 搜索服务客户端
在学习服务创建搜索服务的客户端接口，此接口会生成代理对象，调用搜索服务：
[AppleScript] 纯文本查看 复制代码 package com.xuecheng.learning.client;
import com.xuecheng.api.search.EsCourseControllerApi;
import com.xuecheng.framework.client.XcServiceList;
import org.springframework.cloud.netflix.feign.FeignClient;
@FeignClient(value = "xc‐service‐search")
public interface CourseSearchClient {
@GetMapping(value="/getmedia/{teachplanId}")
public TeachplanMediaPub getmedia(@PathVariable("teachplanId") String teachplanId);
}
3.4.4 Service
在学习服务中定义service方法，此方法远程请求课程管理服务、媒资管理服务获取课程学习地址。
[AppleScript] 纯文本查看 复制代码 @Service
public class LearningService {
@Autowired
CourseSearchClient courseSearchClient;
//获取课程
public GetMediaResult getMedia(String courseId, String teachplanId) {
//校验学生的学习权限。。是否资费等
//调用搜索服务查询
TeachplanMediaPub teachplanMediaPub = courseSearchClient.getmedia(teachplanId);
if(teachplanMediaPub == null || StringUtils.isEmpty(teachplanMediaPub.getMediaUrl())){
//获取视频播放地址出错
ExceptionCast.cast(LearningCode.LEARNING_GETMEDIA_ERROR);
}
return new GetMediaResult(CommonCode.SUCCESS,teachplanMediaPub.getMediaUrl());
}
}
3.4.5 Controller
调用service根据课程计划id查询视频播放地址：
[AppleScript] 纯文本查看 复制代码 @RestController
@RequestMapping("/learning/course")
public class CourseLearningController implements CourseLearningControllerApi {
@Autowired
LearningService learningService;
@Override
@GetMapping("/getmedia/{courseId}/{teachplanId}")
public GetMediaResult getmedia(@PathVariable String courseId, @PathVariable String
teachplanId) {
//获取课程学习地址
return learningService.getMedia(courseId, teachplanId);
}
}
3.4.6 测试
使用swagger-ui或postman测试学习服务查询课程视频地址接口。
3.5 前端开发
3.5.1需求分析
需要在学习中心前端页面需要完成如下功能：
1、进入课程学习页面需要带上课程Id参数及课程计划Id的参数，其中课程Id参数必带，课程计划Id可以为空。
2、进入页面根据课程Id取出该课程的课程计划显示在右侧。
3、进入页面后判断如果请求参数中有课程计划Id则播放该章节的视频。
4、进入页面后判断如果课程计划id为0则需要取出本课程第一个课程计划的Id，并播放第一个课程计划的视频。
3.5.2 api方法
[AppleScript] 纯文本查看 复制代码 let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
/*获取播放地址*/
export const get_media = (courseId,chapter) => {
return http.requestGet(apiUrl+'/api/learning/course/getmedia/'+courseId+'/'+chapter);
}
3.3.3 配置代理
在Nginx中的ucenter.xuecheng.com虚拟主机中配置/api/learning/的路径转发，此url请转发到学习服务。
[AppleScript] 纯文本查看 复制代码 #学习服务
upstream learning_server_pool{
server 127.0.0.1:40600 weight=10;
}
#学习服务
location ^~ /api/learning/ {
proxy_pass http://learning_server_pool/learning/;
}
3.5.3 视频播放页面
1、如果传入的课程计划id为0则取出第一个课程计划id
在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){
//将从服务端获取的课程计划json转成对象
let teachplan = JSON.parse(courseInfo.teachplan);
//将课程计划赋值给数据模型
this.teachplanList = teachplan.children;
console.log(this.teachplanList)
if(!this.chapter || this.chapter == '0'){
//取出第一个教学计划
this.chapter = this.getFirstTeachplan()
console.log(this.chapter)
//开始学习
this.study(this.chapter)
}
}
})
},
取出第一个章节id：
[AppleScript] 纯文本查看 复制代码 //取出第一个章节
getFirstTeachplan(){
for(var i=0;i<this.teachplanList.length;i++){
let firstTeachplan = this.teachplanList[i];
if(firstTeachplan.children && firstTeachplan.children.length>0){
let secondTeachplan = firstTeachplan.children[0];
return secondTeachplan.id;
}
}
return ;
},
开始学习：
[AppleScript] 纯文本查看 复制代码 //开始学习
study(chapter){
// 获取播放地址
courseApi.get_media(this.courseId,chapter).then((res)=>{
if(res.success){
let fileUrl = sysConfig.videoUrl + res.fileUrl
//播放视频
this.playvideo(fileUrl)
}else if(res.message){
this.$message.error(res.message)
}else{
this.$message.error("播放视频失败，请刷新页面重试")
}
}).catch(res=>{
this.$message.error("播放视频失败，请刷新页面重试")
});
},
2、点击右侧课程章节切换播放
在原有代码基础上添加click事件，点击调用开始学习方法（study）。
[AppleScript] 纯文本查看 复制代码 <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>
3.5.4 测试
访问在线学习页面：http://ucenter.xuecheng.com/#/learning/课程id/课程计划id通过url传入两个参数：课程id和课程计划id
如果没有课程计划则传入0
测试项目如下：
1、传入正确的课程id、课程计划id，自动播放本章节的视频
2、传入正确的课程id、课程计划id传入0，自动播放第一个视频
3、传入错误的课程id或课程计划id，提示错误信息。
4、通过右侧章节目录切换章节及播放视频。
| 
收藏
淘帖
踩
