Day15_媒资管理系统集成

1 学习页面查询课程计划

1.1 需求分析

到目前为止，我们已可以编辑课程计划信息并上传课程视频，下一步我们要实现在线学习页面动态读取章节对应的 视频并进行播放。在线学习页面所需要的信息有两类：一类是课程计划信息、一类是课程学习信息（视频地址、学 习进度等），如下图：

在线学习集成媒资管理的需求如下：

1、在线学习页面显示课程计划
2、点击课程计划播放该课程计划对应的视频

本章节实现学习页面动态显示课程计划，进入不同课程的学习页面右侧动态显示当前课程的课程计划。

1.2 Api接口

课程计划信息从哪里获取？

目前课程计划信息在课程管理数据库和ES索引库中存在，考虑性能要求，课程发布后对课程的查询统一从ES索引库中查询。

前端通过请求搜索服务获取课程信息，需要单独在搜索服务中定义课程信息查询接口。

本接口接收课程id，查询课程所有信息返回给前端。

package com.xuecheng.api.course;

import com.xuecheng.framework.domain.course.CoursePub;
import com.xuecheng.framework.domain.search.CourseSearchParam;
import com.xuecheng.framework.model.response.QueryResponseResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

import java.io.IOException;
import java.util.Map;

/**
 * @author HackerStar
 * @create 2020-08-25 11:42
 */
@Api(value = "课程搜索", description = "课程搜索", tags = {"课程搜索"})
public interface EsCourseControllerApi {
    @ApiOperation("课程搜索")
    public QueryResponseResult<CoursePub> list(int page, int size, CourseSearchParam courseSearchParam) throws IOException;

    @ApiOperation("根据课程id查询课程信息")
    public Map<String, CoursePub> getall(String id);
}

返回的课程信息为json结构：key为课程id，value为课程内容。

1.3 服务端开发

在搜索服务中开发查询课程信息接口。

1.3.1 Service

在搜索服务中增加查询课程信息接口的service

public Map<String, CoursePub> getall(String id) {
        //设置索引库
        SearchRequest searchRequest = new SearchRequest(index);
        //指定type
        searchRequest.types(type);
        //定义SearchSourceBuilder
        SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
        //设置使用termQuery
        searchSourceBuilder.query(QueryBuilders.termQuery("id",id));
        //过虑源字段，不用设置源字段，取出所有字段
//        searchSourceBuilder.fetchSource()
        searchRequest.source(searchSourceBuilder);
        //最终要返回的课程信息

        Map<String,CoursePub> map = new HashMap<>();
        try {
            SearchResponse search = restHighLevelClient.search(searchRequest);
            SearchHits hits = search.getHits();
            SearchHit[] searchHits = hits.getHits();
            for(SearchHit hit:searchHits){
                CoursePub coursePub = new CoursePub();
                //获取源文档的内容
                Map<String, Object> sourceAsMap = hit.getSourceAsMap();
                //课程id
                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.setId(courseId);
                coursePub.setName(name);
                coursePub.setPic(pic);
                coursePub.setGrade(grade);
                coursePub.setTeachplan(teachplan);
                coursePub.setDescription(description);
                map.put(courseId,coursePub);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }


        return map;
    }

1.3.2 Controller

 		@Override
    @GetMapping("/getall/{id}")
    public Map<String, CoursePub> getall(@PathVariable("id") String id) {
        return esCourseService.getall(id);
    }

1.3.3 测试

使用swagger-ui或postman测试查询课程信息接口。

1.4 前端开发

1.4.1 配置虚拟主机

学习中心的二级域名为ucenter.xuecheng.com，我们在nginx中配置ucenter虚拟主机。

		#前端 ucenter 
    upstream ucenter_server_pool{
        server 127.0.0.1:13000 weight=10;
    }
    
    #学成网用户中心 
    server {
        listen 80; 
        server_name ucenter.xuecheng.com;

        #个人中心 
        location / { 
            proxy_pass http://ucenter_server_pool; 
        }

    }

之前已经配置过了

在学习中心要调用搜索的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/; 
		}

nginx配置完整代码：

#定义Nginx运行的用户和用户组
#user  nobody; 

#nginx进程数，建议设置为等于CPU总核心数。
worker_processes  1; 

#全局错误日志定义类型，[ debug | info | notice | warn | error | crit ]
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#进程文件
#pid        logs/nginx.pid;

#工作模式与连接数上限
events {
    #单个进程最大连接数（最大连接数=连接数*进程数）
    worker_connections  1024;
}

#设定http服务器
http {
    #文件扩展名与文件类型映射表
    include       mime.types;
    #默认文件类型
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    #开启高效文件传输模式，sendfile指令指定nginx是否调用sendfile函数来输出文件，对于普通应用设为 on，如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络I/O处理速度，降低系统的负载。注意：如果图片显示不正常把这个改 成off。
    sendfile        on;

    #防止网络阻塞
    #tcp_nopush     on;


    #长连接超时时间，单位是秒
    #keepalive_timeout  0;
    keepalive_timeout  65;

    #开启gzip压缩输出
    #gzip  on;

    #cms页面预览 
    upstream cms_server_pool{
        server 127.0.0.1:31001 weight=10;
    }

    #图片服务
    upstream img_server_pool{	
		server 10.211.55.13:80 weight=10;
	}

    #静态资源服务 
    upstream static_server_pool{
        server 127.0.0.1:91 weight=10;
    }

    #前端动态门户 
    upstream dynamic_portal_server_pool{
		server 127.0.0.1:10000 weight=10;
	}

	#后台搜索（公开api） 
	upstream search_server_pool{
		server 127.0.0.1:40100 weight=10;
	}

	#媒体服务 
	upstream video_server_pool{
		server 127.0.0.1:90 weight=10;
	}

    #前端 ucenter 
    upstream ucenter_server_pool{
        server 127.0.0.1:13000 weight=10;
    }

	#学成网媒体服务代理
	map $http_origin $origin_list{
		default http://www.xuecheng.com;
		"~http://www.xuecheng.com" http://www.xuecheng.com;
		"~http://ucenter.xuecheng.com" http://ucenter.xuecheng.com; 
	}

    #学成网用户中心 
    server {
        listen 80; 
        server_name ucenter.xuecheng.com;

        #个人中心 
        location / { 
            proxy_pass http://ucenter_server_pool; 
        }

        #后端搜索服务
        location /openapi/search/ {
            proxy_pass http://search_server_pool/search/; 
        }

    }

	#学成网媒体服务代理 
	server {
		listen 80;
		server_name video.xuecheng.com;

		location /video {
			 proxy_pass http://video_server_pool; 
             add_header Access‐Control‐Allow‐Origin $origin_list;
             add_header Access‐Control‐Allow‐Credentials true;
             add_header Access‐Control‐Allow‐Methods GET; 
			 #add_header Access‐Control‐Allow‐Origin *; 
		}
	}

	#学成网媒体服务 
	server {
		listen	90;
		server_name localhost;

		#视频目录 
		location /video{
			alias /Users/XinxingWang/Development/Java/video/hls;
		}
	}

	#学成网图片服务 
	server { 
		listen 80; 
		server_name img.xuecheng.com;
		#个人中心 
		location /group1 {
			proxy_pass http://img_server_pool; 
		}
	} 

    #虚拟主机的配置
    server {
        #监听端口
        listen       80;

        #域名可以有多个，用空格隔开
        server_name  www.xuecheng.com;

        #默认编码
        #charset utf-8;

        #定义本虚拟主机的访问日志
        #access_log  logs/host.access.log  main;

		ssi on; 
		ssi_silent_errors on; 

		#前端门户课程搜索
		location ^~ /course/search {
			proxy_pass http://dynamic_portal_server_pool; 
		}

		#分类信息
		location /static/category/ {
			proxy_pass http://static_server_pool; 
		}

        #静态资源，包括系统所需要的图片，js、css等静态资源
		location /static/img/ {
  	  		alias /Users/XinxingWang/Development/WebstormProjects/scEdu/scEduUI/xc-ui-pc-static-portal/img/;
		} 
		location /static/css/ {
 			  alias /Users/XinxingWang/Development/WebstormProjects/scEdu/scEduUI/xc-ui-pc-static-portal/css/; 
		} 
		location /static/js/ {
  		  alias /Users/XinxingWang/Development/WebstormProjects/scEdu/scEduUI/xc-ui-pc-static-portal/js/; 
		} 
		location /static/plugins/ {
   		  alias /Users/XinxingWang/Development/WebstormProjects/scEdu/scEduUI/xc-ui-pc-static-portal/plugins/;
 		   add_header Access‐Control‐Allow‐Origin http://ucenter.xuecheng.com;
   			 add_header Access‐Control‐Allow‐Credentials true;
   			 add_header Access‐Control‐Allow‐Methods GET; 
		}

        location /static/company/ {
          proxy_pass http://static_server_pool; 
        }
        location /static/teacher/ {
         proxy_pass http://static_server_pool; 
        }
        location /static/stat/ {
         proxy_pass http://static_server_pool; 
        }
        location /course/detail/ {
         proxy_pass http://static_server_pool; 
        }

		location / {
		  alias	/Users/XinxingWang/Development/WebstormProjects/scEdu/scEduUI/xc-ui-pc-static-portal/;
		  index index.html;
        }

        #页面预览 
        location /cms/preview/ { 
            proxy_pass http://cms_server_pool/cms/preview/; 
        }

        #开发环境webpack定时加载此文件 
        location ^~ /__webpack_hmr/ { 
            proxy_pass http://dynamic_portal_server_pool/__webpack_hmr/; 
        }

       #开发环境nuxt访问_nuxt 
        location ^~ /_nuxt/ { 
            proxy_pass http://dynamic_portal_server_pool/_nuxt/; 
        }
    }

#学成网静态资源
server {

	listen 91;
	server_name localhost;

	#公司信息
    location /static/company/ {
		alias /Users/XinxingWang/Development/WebstormProjects/scEdu/static/company/;
	}
	#老师信息 
	location /static/teacher/ {
		alias /Users/XinxingWang/Development/WebstormProjects/scEdu/static/teacher/;
	}
	#统计信息 
	location /static/stat/ {
		alias /Users/XinxingWang/Development/WebstormProjects/scEdu/static/stat/;
	}
	location /course/detail/ {
		alias /Users/XinxingWang/Development/WebstormProjects/scEdu/static/course/detail/;
	}
    location /static/category/ {
        alias /Users/XinxingWang/Development/WebstormProjects/scEdu/static/category/;
    }

}

 }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

1.4.2 API方法

在学习中心对课程信息的查询属于基础常用功能，所以我们将课程查询的api方法定义在base模块下，如下图：

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钩子方法中获取课程信息

created() {
      //当前请求的url
      this.url = window.location
      //课程id
      this.courseId = this.$route.params.courseId
      //章节id
      this.chapter = this.$route.params.chapter
      //取出课程Id
      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，此参数用于点击课程计划播放视频

因为之前将mongodb的数据库中的teachplan类型改为了text，故索引中的数据为字符串格式，不是json格式，导致视频目录无法显示，但是如果修改数据库类型又会出错，所以后台代码应该是没有问题的。

2 学习页面获取视频播放地址

2.1 需求分析

用户进入在线学习页面，点击课程计划将播放该课程计划对应的教学视频。

业务流程如下：

业务流程说明：

1、用户进入在线学习页面，页面请求搜索服务获取课程信息（包括课程计划信息）并且在页面展示。
2、在线学习请求学习服务获取视频播放地址。
3、学习服务校验当前用户是否有权限学习，如果没有权限学习则提示用户。
4、学习服务校验通过，请求搜索服务获取课程媒资信息。
5、搜索服务请求ElasticSearch获取课程媒资信息。

为什么要请求ElasticSearch查询课程媒资信息？

出于性能的考虑，公开查询课程信息从搜索服务查询。

什么时候将课程媒资信息存储到ElasticSearch中？

课程媒资信息是在课程发布的时候存入ElasticSearch，因为课程发布后课程信息将基本不再修改。

2.2 课程发布存储媒资信息

课程媒资信息是在课程发布的时候存入ElasticSearch索引库，因为课程发布后课程信息将基本不再修改，具体的 业务流程如下。

业务流程如下：

1、课程发布，向课程媒资信息表写入数据。
1）根据课程id删除teachplanMediaPub中的数据
2）根据课程id查询teachplanMedia数据
3）将查询到的teachplanMedia数据插入到teachplanMediaPub中
2、Logstash定时扫描课程媒资信息表，并将课程媒资信息写入索引库。

2.2.1 数据模型

在xc_course数据库创建课程计划媒资发布表：

CREATE TABLE `teachplan_media_pub`
(
    `teachplan_id`           varchar(32)  NOT NULL COMMENT '课程计划id',
    `media_id`               varchar(32)  NOT NULL COMMENT '媒资文件id',
    `media_fileoriginalname` varchar(128) NOT NULL COMMENT '媒资文件的原始名称',
    `media_url`              varchar(256) NOT NULL COMMENT '媒资文件访问地址',
    `courseid`               varchar(32)  NOT NULL COMMENT '课程Id',
    `timestamp`              timestamp    NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'logstash使用',
    PRIMARY KEY (`teachplan_id`)
) ENGINE = InnoDB
  DEFAULT CHARSET = utf8

数据模型类如下：

package com.xuecheng.framework.domain.course;

import lombok.Data;
import lombok.ToString;
import org.hibernate.annotations.GenericGenerator;

import javax.persistence.*;
import java.io.Serializable;
import java.util.Date;

/**
 * Created by admin on 2018/2/7.
 */
@Data
@ToString
@Entity
@Table(name="teachplan_media_pub")
@GenericGenerator(name = "jpa-assigned", strategy = "assigned")
public class TeachplanMediaPub implements Serializable {
    private static final long serialVersionUID = -916357110051689485L;
    @Id
    @GeneratedValue(generator = "jpa-assigned")
    @Column(name="teachplan_id")
    private String teachplanId;

    @Column(name="media_id")
    private String mediaId;

    @Column(name="media_fileoriginalname")
    private String mediaFileOriginalName;

    @Column(name="media_url")
    private String mediaUrl;

    @Column(name="courseid")
    private String courseId;

    @Column(name="timestamp")
    private Date timestamp;//时间戳

}

2.2.2 Dao

创建TeachplanMediaPub表的Dao，向TeachplanMediaPub存储信息采用先删除该课程的媒资信息，再添加该课 程的媒资信息，所以这里定义根据课程id删除课程计划媒资方法：

package com.xuecheng.manage_course.dao;

import com.xuecheng.framework.domain.course.TeachplanMediaPub;
import org.springframework.data.jpa.repository.JpaRepository;

/**
 * Created by Administrator.
 */
public interface TeachplanMediaPubRepository extends JpaRepository<TeachplanMediaPub,String> {
    //根据课程id删除记录
    long deleteByCourseId(String courseId);
}

package com.xuecheng.manage_course.dao;

import com.xuecheng.framework.domain.course.TeachplanMedia;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

/**
 * @author HackerStar
 * @create 2020-08-31 11:34
 */
public interface TeachplanMediaRepository extends JpaRepository<TeachplanMedia, String> {
    List<TeachplanMedia> findByCourseId(String courseId);
}

2.2.3 Service

编写保存课程计划媒资信息方法，并在课程发布时调用此方法。

1、保存课程计划媒资信息方法

本方法采用先删除该课程的媒资信息，再添加该课程的媒资信息。

	  //保存课程计划媒资信息
    private void saveTeachplanMediaPub(String courseId) {
        //查询课程媒资信息
        List<TeachplanMedia> teachplanMediaList = teachplanMediaRepository.findByCourseId(courseId); //将课程计划媒资信息存储待索引表
        teachplanMediaPubRepository.deleteByCourseId(courseId);
        List<TeachplanMediaPub> teachplanMediaPubList = new ArrayList<>();
        for (TeachplanMedia teachplanMedia : teachplanMediaList) {
            TeachplanMediaPub teachplanMediaPub = new TeachplanMediaPub();
            BeanUtils.copyProperties(teachplanMedia, teachplanMediaPub);
            teachplanMediaPubList.add(teachplanMediaPub);
        }
        teachplanMediaPubRepository.saveAll(teachplanMediaPubList);
    }

2、课程发布时调用此方法

修改课程发布的service方法：

......
saveTeachplanMediaPub(id);
return new CoursePublishResult(CommonCode.SUCCESS,pageUrl);
......

3.2.4 测试

测试课程发布后是否成功将课程媒资信息存储到teachplan_media_pub中，测试流程如下：

1、指定一个课程
2、为课程计划添加课程媒资
3、执行课程发布
4、观察课程计划媒资信息是否存储至teachplan_media_pub中

注意：由于此测试仅用于测试发布课程计划媒资信息的功能，可暂时将cms页面发布的功能暂时屏蔽，提高测试效 率。

2.3 Logstash扫描课程计划媒资

Logstash定时扫描课程媒资信息表，并将课程媒资信息写入索引库。

2.3.1 创建索引

1、创建xc_course_media索引

2、并向此索引创建如下映射

POST http://localhost:9200/xc_course_media/doc/_mapping

{
    "properties": {
        "courseid": {
            "type": "keyword"
        },
        "teachplan_id": {
            "type": "keyword"
        },
        "media_id": {
            "type": "keyword"
        },
        "media_url": {
            "index": false,
            "type": "text"
        },
        "media_fileoriginalname": {
            "index": false,
            "type": "text"
        }
    }
}

2.3.2 创建Logstash模板文件

在logstach的config目录创建xc_course_media_template.json，内容如下：

{
    "properties": {
        "courseid": {
            "type": "keyword"
        },
        "teachplan_id": {
            "type": "keyword"
        },
        "media_id": {
            "type": "keyword"
        },
        "media_url": {
            "index": false,
            "type": "text"
        },
        "media_fileoriginalname": {
            "index": false,
            "type": "text"
        }
    }
}

2.3.3 配置mysql_course_media.conf

参考https://www.elastic.co/guide/en/logstash/current/plugins-inputs-jdbc.html

配置输入数据源和输出数据源。

input {
  stdin {
  }
  jdbc {
  jdbc_connection_string => "jdbc:mysql://localhost:3306/xc_course?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC"
  # the user we wish to excute our statement as
  jdbc_user => "root"
  jdbc_password => "root"
  # the path to our downloaded jdbc driver  
  jdbc_driver_library => "/Users/XinxingWang/Development/elasticsearchmac/logstash-6.2.1/vendor/mysql-connector-java-8.0.16.jar"
  # the name of the driver class for mysql
  jdbc_driver_class => "com.mysql.jdbc.Driver"
  jdbc_paging_enabled => "true"
  jdbc_page_size => "50000"
  #要执行的sql文件
  #statement_filepath => "/conf/course.sql"
  statement => "select * from teachplan_media_pub where timestamp > date_add(:sql_last_value,INTERVAL 8 HOUR)"
  #定时配置
  schedule => "* * * * *"
  record_last_run => true
  last_run_metadata_path => "/Users/XinxingWang/Development/elasticsearchmac/logstash-6.2.1/config/xc_course_media_metadata"
  }
}


output {
  elasticsearch {
  #ES的ip地址和端口
  hosts => "localhost:9200"
  #hosts => ["localhost:9200","localhost:9202","localhost:9203"]
  #ES索引库名称
  index => "xc_course_media"
  document_id => "%{teachplan_id}"
  document_type => "doc"
  template =>"/Users/XinxingWang/Development/elasticsearchmac/logstash-6.2.1/config/xc_course_media_template.json"
  template_name =>"xc_course_media"
  template_overwrite =>"true"
  }
  stdout {
 #日志输出
  codec => json_lines
  }
}

2.3.4 启动logstash

启动logstash采集teachplan_media_pub中的数据，向ES写入索引。

./logstash -f ../config/mysql_course_media.conf

2.4 搜索服务查询课程媒资接口

2.4.1 需求分析

搜索服务提供查询课程媒资接口，此接口供学习服务调用。

2.4.2 Api

在课程搜索包下定义Api

@ApiOperation("根据课程计划查询媒资信息")
public TeachplanMediaPub getmedia(String teachplanId);

2.4.3 Service

1、配置课程计划媒资索引库等信息

在application.yml中配置

xuecheng:
  elasticsearch:
    media:
      index: xc_course_media
      type: doc
      source_field: courseid,media_id,media_url,teachplan_id,media_fileoriginalname

2、service方法开发

在课程搜索服务中定义课程媒资查询接口，为了适应后续需求，service参数定义为数组，可一次查询多个课程计划的媒资信息。

		@Value("${xuecheng.media.index}")
    private String media_index;
    @Value("${xuecheng.media.type}")
    private String media_type;
    @Value("${xuecheng.media.source_field}")
    private String media_source_field;	

		//根据多个课程计划查询课程媒资信息
    public QueryResponseResult<TeachplanMediaPub> getmedia(String[] teachplanIds) {
        //定义一个搜索请求对象
        SearchRequest searchRequest = new SearchRequest(media_index);
        //指定type
        searchRequest.types(media_type);

        //定义SearchSourceBuilder
        SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
        //设置使用termsQuery根据多个id 查询
        searchSourceBuilder.query(QueryBuilders.termsQuery("teachplan_id",teachplanIds));
        //过虑源字段
        String[] includes = media_source_field.split(",");
        searchSourceBuilder.fetchSource(includes,new String[]{});
        searchRequest.source(searchSourceBuilder);
        //使用es客户端进行搜索请求Es
        List<TeachplanMediaPub> teachplanMediaPubList = new ArrayList<>();
        long total = 0;
        try {
            //执行搜索
            SearchResponse search = restHighLevelClient.search(searchRequest);
            SearchHits hits = search.getHits();
            total = hits.totalHits;
            SearchHit[] searchHits = hits.getHits();
            for(SearchHit hit:searchHits){
                TeachplanMediaPub teachplanMediaPub= new TeachplanMediaPub();
                Map<String, Object> sourceAsMap = hit.getSourceAsMap();
                //取出课程计划媒资信息
                String courseid = (String) sourceAsMap.get("courseid");
                String media_id = (String) sourceAsMap.get("media_id");
                String media_url = (String) sourceAsMap.get("media_url");
                String teachplan_id = (String) sourceAsMap.get("teachplan_id");
                String media_fileoriginalname = (String) sourceAsMap.get("media_fileoriginalname");

                teachplanMediaPub.setCourseId(courseid);
                teachplanMediaPub.setMediaUrl(media_url);
                teachplanMediaPub.setMediaFileOriginalName(media_fileoriginalname);
                teachplanMediaPub.setMediaId(media_id);
                teachplanMediaPub.setTeachplanId(teachplan_id);
                teachplanMediaPubList.add(teachplanMediaPub);
            }

        } catch (IOException e) {
            e.printStackTrace();
        }
        //数据集合
        QueryResult<TeachplanMediaPub> queryResult = new QueryResult<>();
        queryResult.setList(teachplanMediaPubList);
        queryResult.setTotal(total);
        QueryResponseResult<TeachplanMediaPub> queryResponseResult = new QueryResponseResult<>(CommonCode.SUCCESS,queryResult);
        return queryResponseResult;
    }

2.4.4 Controller

		@Override
    @GetMapping(value = "/getmedia/{teachplanId}")
    public TeachplanMediaPub getmedia(@PathVariable("teachplanId") String teachplanId) {
        //将课程计划id放在数组中，为调用service作准备
        String[] teachplanIds = new String[]{teachplanId};
        //通过service查询ES获取课程媒资信息
        QueryResponseResult<TeachplanMediaPub> mediaPubQueryResponseResult =

                esCourseService.getmedia(teachplanIds);

        QueryResult<TeachplanMediaPub> queryResult = mediaPubQueryResponseResult.getQueryResult();
        if (queryResult != null&& queryResult.getList()!=null && queryResult.getList().size()>0){
            //返回课程计划对应课程媒资
            return queryResult.getList().get(0);
        }
        return new TeachplanMediaPub();
    }

2.4.5 测试

使用swagger-ui和postman测试课程媒资查询接口。

3 在线学习接口

3.1 需求分析

根据下边的业务流程，本章节完成前端学习页面请求学习服务获取课程视频地址，并自动播放视频。

3.2 搭建开发环境

3.2.1 创建数据库

创建xc_learning数据库，学习数据库将记录学生的选课信息、学习信息。

导入：资料/xc_learning.sql

3.2.2 创建学习服务工程

参考课程管理服务工程结构，创建学习服务工程：

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>xc-framework-parent</artifactId>
        <groupId>com.xuecheng</groupId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../xc-framework-parent/pom.xml</relativePath>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>xc-service-search</artifactId>

    <dependencies>
        <dependency>
            <groupId>com.xuecheng</groupId>
            <artifactId>xc-framework-model</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>com.xuecheng</groupId>
            <artifactId>xc-framework-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>com.xuecheng</groupId>
            <artifactId>xc-service-api</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.elasticsearch.client</groupId>
            <artifactId>elasticsearch-rest-high-level-client</artifactId>
            <version>6.2.1</version>
        </dependency>
        <dependency>
            <groupId>org.elasticsearch</groupId>
            <artifactId>elasticsearch</artifactId>
            <version>6.2.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-io</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.andrewoma.dexx</groupId>
            <artifactId>dexx-collections</artifactId>
            <version>0.2</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>

server:
  port: ${PORT:40600}
spring:
  application:
    name: xc-service-learning
  datasource:
    druid:
      url: ${MYSQL_URL:jdbc:mysql://localhost:3306/xc_learning?characterEncoding=utf-8}
      username: root
      password: root
      driverClassName: com.mysql.jdbc.Driver
      initialSize: 5  #初始建立连接数量
      minIdle: 5  #最小连接数量
      maxActive: 20 #最大连接数量
      maxWait: 10000  #获取连接最大等待时间，毫秒
      testOnBorrow: true #申请连接时检测连接是否有效
      testOnReturn: false #归还连接时检测连接是否有效
      timeBetweenEvictionRunsMillis: 60000 #配置间隔检测连接是否有效的时间（单位是毫秒）
      minEvictableIdleTimeMillis: 300000  #连接在连接池的最小生存时间（毫秒）
#rabbitmq配置
  rabbitmq:
    host: 127.0.0.1
    port: 5672
    username: guest
    password: guest
    publisher-confirms: true
    virtual-host: /
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 #请求处理的超时时间

启动类：

package com.xuecheng.learning;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
import org.springframework.cloud.client.loadbalancer.LoadBalanced;
import org.springframework.cloud.openfeign.EnableFeignClients;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.http.client.OkHttp3ClientHttpRequestFactory;
import org.springframework.web.client.RestTemplate;

/**
 * @author Administrator
 * @version 1.0
 * @create 2018-07-14 11:11
 **/
@EnableFeignClients
@EnableDiscoveryClient
@SpringBootApplication
@EntityScan(value = {"com.xuecheng.framework.domain.learning","com.xuecheng.framework.domain.task"})//扫描实体类
@ComponentScan(basePackages={"com.xuecheng.api"})//扫描接口
@ComponentScan(basePackages={"com.xuecheng.learning"})//扫描接口
@ComponentScan(basePackages={"com.xuecheng.framework"})//扫描common下的所有类
public class LearningApplication {

    public static void main(String[] args) throws Exception {
        SpringApplication.run(LearningApplication.class, args);
    }

    @Bean
    @LoadBalanced
    public RestTemplate restTemplate() {
        return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
    }

}

3.3 Api 接口

此api接口是课程学习页面请求学习服务获取课程学习地址。

定义返回值类型：

package com.xuecheng.framework.domain.learning.respones;

import com.xuecheng.framework.model.response.ResponseResult;
import com.xuecheng.framework.model.response.ResultCode;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

/**
 * @author Administrator
 * @version 1.0
 **/
@Data
@ToString
@NoArgsConstructor
public class GetMediaResult extends ResponseResult {
    //视频播放地址
    String fileUrl;
    public GetMediaResult(ResultCode resultCode,String fileUrl){
        super(resultCode);
        this.fileUrl = fileUrl;
    }
}

定义接口，学习服务根据传入课程ID、章节Id(课程计划ID)来取学习地址。

package com.xuecheng.api.learning;

import com.xuecheng.framework.domain.learning.respones.GetMediaResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

/**
 * Created by Administrator.
 */
@Api(value = "录播课程学习管理",description = "录播课程学习管理")
public interface CourseLearningControllerApi {

    @ApiOperation("获取课程学习地址")
    public GetMediaResult getmedia(String courseId,String teachplanId);
}

3.4 服务端开发

3.4.1 需求分析

学习服务根据传入课程ID、章节Id(课程计划ID)请求搜索服务获取学习地址。

3.4.2 搜索服务注册Eureka

学习服务要调用搜索服务查询课程媒资信息，所以需要将搜索服务注册到eureka中。

1、查看服务名称是否为xc-service-search

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

2、配置搜索服务的配置文件application.yml，加入Eureka配置 如下：

eureka:
  client:
    registerWithEureka: true #服务注册开关
    fetchRegistry: true #服务发现开关
    serviceUrl: #Eureka客户端与Eureka服务端进行交互的地址，多个中间用逗号分隔
      defaultZone: ${EUREKA_SERVER:http://localhost:50101/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、修改启动类，在class上添加如下注解：

@EnableDiscoveryClient

3.4.3 搜索服务客户端

在学习服务创建搜索服务的客户端接口，此接口会生成代理对象，调用搜索服务：

package com.xuecheng.learning.client;

import com.xuecheng.framework.client.XcServiceList;
import com.xuecheng.framework.domain.course.TeachplanMediaPub;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

/**
 * Created by Administrator.
 */
@FeignClient(value= XcServiceList.XC_SERVICE_SEARCH)
public interface CourseSearchClient {

    //根据课程计划id查询课程媒资
    @GetMapping("/search/course/getmedia/{teachplanId}")
    public TeachplanMediaPub getmedia(@PathVariable("teachplanId") String teachplanId);
}

3.4.4 Service

在学习服务中定义service方法，此方法远程请求课程管理服务、媒资管理服务获取课程学习地址。

package com.xuecheng.learning.service;

import com.xuecheng.framework.domain.course.TeachplanMediaPub;
import com.xuecheng.framework.domain.learning.respones.GetMediaResult;
import com.xuecheng.framework.domain.learning.respones.LearningCode;
import com.xuecheng.framework.exception.ExceptionCast;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.learning.client.CourseSearchClient;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * @author Administrator
 * @version 1.0
 **/
@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查询视频播放地址：

package com.xuecheng.learning.controller;

import com.xuecheng.api.learning.CourseLearningControllerApi;
import com.xuecheng.framework.domain.learning.respones.GetMediaResult;
import com.xuecheng.learning.service.LearningService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author Administrator
 * @version 1.0
 **/
@RestController
@RequestMapping("/learning/course")
public class CourseLearningController implements CourseLearningControllerApi {

    @Autowired
    LearningService learningService;

    @Override
    @GetMapping("/getmedia/{courseId}/{teachplanId}")
    public GetMediaResult getmedia(@PathVariable("courseId") String courseId,
                                   @PathVariable("teachplanId")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方法

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.5.3 配置代理

在Nginx中的ucenter.xuecheng.com虚拟主机中配置/api/learning/的路径转发，此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.4 视频播放页面

1、如果传入的课程计划id为0则取出第一个课程计划id

在created钩子方法中完成

created() {
      //当前请求的url
      this.url = window.location
      //课程id
      this.courseId = this.$route.params.courseId
      //章节id
      this.chapter = this.$route.params.chapter
      //取出课程Id
      systemApi.course_view(this.courseId).then((view_course) => {
        if (!view_course || !view_course[this.courseId]) {
          this.$message.error("获取课程信息失败，请重新进入此页面！")
          return;
        }

        //根据课程id拿到课程信息
        let courseInfo = view_course[this.courseId];
        //取出teachplan的串
        let teachplanString = courseInfo.teachplan;
        //把串转成对象
        let teachplanObj = JSON.parse(teachplanString);

        //取到课程计划
        this.teachplanList = teachplanObj.children;
        console.log(this.teachplanList)
        //如果课程计划id不等于0，直接插入该课程计划对应的视频
        if(this.chapter != '0'){
          //获取该课程计划所对应的视频
          this.study(this.chapter)
        }else{
          //找到该课程的二级课程计划中的第一个课程计划id，取出该课程计划所对应的视频
          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];
              //课程计划的id
              let teachplanId = secondTeachplan.id;
              //取出该课程计划所对应的视频
              // alert(teachplanId)
              this.study(teachplanId)
              return ;
            }
          }
        }

      })
    },

开始学习：

// 开始学习，获取课程计划所对应的视频地址
      study (chapter) {
          //get_media方法
        courseApi.get_media(this.courseId,chapter).then(res=>{
          if(res.success){
            //获取视频播放地址
            let fileUrl = res.fileUrl;//相对路径
            let videoUrl = sysConfig.videoUrl + fileUrl;//视频完整的播放路径
            //播放视频
            this.playvideo(videoUrl)
          }
        })

      },

2、点击右侧课程章节切换播放

在原有代码基础上添加click事件，点击调用开始学习方法（study）

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