黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第15天-讲义-媒资管理系统集成五 [打印本页]

---

作者: 我是楠楠    时间: 2020-1-2 10:07
标题: 【郑州校区】学成在线-第15天-讲义-媒资管理系统集成五

【郑州校区】学成在线-第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;

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、通过右侧章节目录切换章节及播放视频。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2