黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day15(十) [打印本页]

作者: 谷粒姐姐    时间: 2019-6-11 15:11
标题: 【郑州校区】Java的新项目学成在线笔记-day15(十)
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