Java的新项目学成在线笔记-day15(十)

3.5.3 视频播放页面 
一、若是传入的课程计划id为0则取出第一个课程计划id 在created钩子方法中完成

[AppleScript] 纯文本查看 复制代码json

?ide

01post

02学习

03测试

04this

05url

06spa

07code

08视频

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

//取出第一个章节  

    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] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

//开始学习 

     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("播放视频失败,请刷新页面重试")  

      });   

   },


二、点击右侧课程章节切换播放 在原有代码基础上添加click事件,点击调用开始学习方法(study)。
 

[AppleScript] 纯文本查看 复制代码

?

1

2

3

<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 测试项目以下: 一、传入正确的课程id、课程计划id,自动播放本章节的视频 二、传入正确的课程id、课程计划id传入0,自动播放第一个视频  三、传入错误的课程id或课程计划id,提示错误信息。 四、经过右侧章节目录切换章节及播放视频。