1つの 学習問い合わせページのレッスンプラン
1.1 ニーズ分析
これまでのところ、我々は情報を編集し、ビデオのコースをアップロードすることができますレッスンプランを持って、我々はオンライン学習ページをダイナミックに達成したい次のステップは、対応する章読んビデオや遊びを。必要なEラーニングのページは2種類ある。一つは授業計画情報であり、1コース情報（ビデオ・アドレス、学校である、などの学習進捗状況、）として、次のとおりです。
オンライン学習統合メディア資産管理のための需要は次のように：
1を、オンラインレッスンプランページが表示され学習
2を、対応するビデオプレーヤーレッスンプランレッスンプランをクリックして
、動的に現行のカリキュラムレッスンプランを表示し、ページの右側に動的な表示ページの授業計画を達成するために学ぶために、このセクション、研究の異なるコース。
1.2 API インターフェイスの
授業計画情報をどこから得ていますか？
現在、レッスンのコース管理情報データベースにおける計画やESのインデックスデータベースが存在するが、問い合わせの当然の性能要件から統一カリキュラムをリリース考慮ES インデックスデータベースのクエリ。
検索サービスを要求することにより、情報を取得するためのコースのフロントエンドには、情報のクエリインターフェイス別の検索サービス定義されたコースを必要とします。
このインタフェースはもちろん受け言及したIDの上のコースに関するすべての情報は、フロントに戻り、。
@ApiOperation("根据id查询课程信息")
public Map<String,CoursePub> getall(String id);コース情報として返されたJSON 構造：キーコースに上記ID上、値コースコンテンツの。
1.3 サーバー開発
開発コース情報クエリインターフェース検索サービス。
1.3.1サービスは
もちろん、情報検索サービスにクエリインターフェイスを高めるためのサービス
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コントローラ
@Override
@GetMapping("/getall/{id}")
public Map<String, CoursePub> getall(@PathVariable("id") String id) {
return esCourseService.getall(id);
}1.3.3 テスト
用い闊歩-UI または郵便配達テストコース情報問合せインタフェースを。
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のは、次のように、代理店を解く：
設定した検索のAPI プロキシパスを：
#后台搜索（公开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の方法で定義されたベースの下に示すように、モジュールの下で：
でsystem.js 定義されたカリキュラムの問い合わせ方法：
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を、レッスンプラン
<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 、コース名
<div class="top text‐center">
{{coursename}}
</div>2 、データ・オブジェクト定義
data() {
return {
url:'',//当前url
courseId:'',//课程id
chapter:'',//章节Id
coursename:'',//课程名称
coursepic:'',//课程图片
teachplanList:[],//课程计划
playerOptions: {//播放参数
autoplay: false,
controls: true,
sources: [{
type: "application/x‐mpegURL",
src: ''
}]
},
}
}3 で、作成されたコースを取得する情報フック方法
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以上、このパラメータは、授業計画にビデオクリックを再生するために使用されます。
