オンラインの研究 - 15日目 - 講演 - メディアアセットマネジメントシステムインテグレーション5

3.4  サーバーの開発 
3.4.1  需要の分析 
、着信サービスへの学習コースID 、セクションID（レッスンプランID）アドレス要求検索サービスを学習へのアクセス。 
3.4.2  検索サービス登録ユーレカ 
ラーニングサービスへの呼び出しの検索サービスは、メディアクエリのコース情報を所有している、あなたは検索し登録する必要がありユーレカの中で。 
1 サービス名かどうかを確認するには、XC-サービス検索

注意修改application.xml中的服务名称：
spring:
application:
name: xc‐service‐search

2 、検索サービスの設定ファイルの設定application.ymlを、入社ユーレカの設定は次の通りであります：

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客户端的依赖 ‐‐>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring‐cloud‐starter‐netflix‐eureka‐client</artifactId>
</dependency>

4は、ブートクラスを変更し、クラスが上の注釈として追加されます。

@EnableDiscoveryClient

3.4.3  検索サービスクライアントが 
プロキシオブジェクト、コール検索サービスを生成します学習サービスのクライアントインタフェースの検索サービスを、作成します。
 

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
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コントローラの 
コールサービス授業計画に基づいて、IDの問い合わせビデオ再生住所：

@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  テスト 
使用して威張っ-UI または郵便配達コースのビデオアドレスクエリインターフェイスを学習テストサービスを。

3.5  フロントエンドの開発 
3.5.1 要求分析 
学習センター、フロントページに以下の機能を完了する必要があります： 
1 、ページがコースのカリキュラムに持参する必要のId パラメータと授業計画のId コースのパラメータ、同上のパラメータがもたらす、レッスンプランIdを缶空にします。 
2 、カリキュラムに応じてページを入力Idは授業計画アウトコースの右側に表示。 
図3は、授業計画があるかどうかを判断するためにページリクエストパラメータを入力Idがこのセクションの動画が再生されます。 
4 、授業計画かどうかを判断するためのページを入力してidがある0 あなたがのレッスン計画の進路削除する必要が同上、および授業計画の最初のビデオを果たしています。 
3.5.2 APIの方法

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 /学習/ これを転送パスのURL サービスを学習を楽しみにしてください。

#学习服务
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(){
//当前请求的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を：

//取出第一个章节
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 ;
},

学習を開始：

//开始学习
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 、右のコース章スイッチングプレーをクリックして 
に基づいて、レガシーコードを追加するためにクリック（学習を開始するコールをクリックして、イベントスタディ）。
 

<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 、切替部と章のビデオを再生する権利によって。