前端门户系统

访问：http://edufront.lagou.com/
用户名：15510792995 密码：111111

• 页面不需要我们自己开发，使用提供的页面即可
• 运行项目 npm run serve

1、首页显示全部课程

• Index.vue

  
  
  
  

    
    

      

        
          {{item.courseName}}
        
      
      
      

        
          {{item.teacher.teacherName}}
        
        
        
          {{item.teacher.position}}
        
      
      

      
      

        {{item.brief}}
      
    
    
    

      
      

        
        
        
          {{lesson.theme}}
          
      
      
    
    

      

        ￥
        {{ item.discounts }}
        
          ￥
          {{ item.price }}
        
        成就自己
        {{ item.sales }}人购买
      
      
立即购买
    
  

2、登录

3、已购课程

  

    
    
您还没有登录
    
登录后即可查看已购课程
    
立即登录
  
  

   

        
        
...省略...
        
  
  

4、课程详情-基本信息

Index.vue

    
        {{item.courseName}}
    

Course.vue

  

    {{course.courseName}}
  
  

    {{course.brief}}
  
  

    

      讲师：{{course.teacher.teacherName}}
      
     {{course.teacher.position}}
    
  
  

    

    
100 讲 / {{course.totalDuration}} 课时
    

    
{{course.sales}}人已购买
  

5、课程详情-共计多少讲

{{totalLessons}} 讲 / {{course.totalDuration}} 课时

6、课程详情-实现课程信息描述

html不识别数据库的html标签，必须使用v-html才可以

7、课程详情-显示章节目录

    

      
      

        

          {{section.sectionName}}
        
        

          
          

            

              
{{lesson.theme}}
              

                  
试看
              
            
          
          
        
      
      
    

8、课程详情-显示全部留言

  

    
精选留言
  
  

    

      
      

        0
        /2000
      
    
    

      发表留言

    
  
  
  


      

        
{{comment.userName}}
        

      
      

        
        
{{comment.likeCount}}
      
    
    

      {{comment.comment}}
    
  
  

9、课程详情-章节状态

  
  

    

      {{section.sectionName}}
    
    

      
      

        

          
{{lesson.theme}}
          

            
            

              
              
试看
              
              
试看
              
              
播放
            
            
            

              
              

              
              

              
              
播放
            
          
        
      
      
    
  
  
  
  

    

      {{section.sectionName}}
    
    

      
      

        

          
{{lesson.theme}}
          

            
            
播放
            
            

            
            

          
        
      
      
    
  
  

10、在课程详情页点击视频播放

Course.vue

videoDetail.vue

11、播放页的信息显示

  
  

    

      
{{section.sectionName}}
      
    
    
    

      

        
        

          

            
            {{lesson.theme}}
            试看
          
          

            时长：{{lesson.courseMedia.duration}}
            时长：无媒体文件
          
        
        

          

            
            {{lesson.theme}}
            
            未解锁
            
            未解锁
            
            播放
          
          

            时长：{{lesson.courseMedia.duration}}
            时长：无媒体文件
          
        
      
    
  
  
  
  

    

      
{{section.sectionName}}
      
    
    

      

        

          

            
            {{lesson.theme}}
            
            未解锁
            
            未解锁
            
            播放
          
          

           时长：{{lesson.courseMedia.duration}}
            时长：无媒体文件
          
        
      
    
  
  

12、当前播放的视频高亮突出

  

    

      

        
        {{lesson.theme}}
        
        未解锁
        
        未解锁
        
        播放
        
      
      

        时长：{{lesson.courseMedia.duration}}
        时长：无媒体文件
      
    
  

13、点击课标题切换视频并播放

14、留言点赞

14.1 修改dao

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class CourseComment implements Serializable {
    private static final long serialVersionUID = 922554392538715061L;
    // 一条留言：N个点赞
    private List favoriteRecords ;

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
        
        
        
        
        
        
    



    select
    cc.id cc_id,`course_id`,`section_id`,`lesson_id`,cc.user_id 
	cc_user_id,ùser_name`,`parent_id`,ìs_top`,`comment`,`like_count`,ìs_reply`,
    `type`,`status`,cc.create_time cc_create_time ,cc.update_time cc_update_time,
    cc.is_del cc_is_del,`last_operator`,ìs_notify`,`mark_belong`,`replied` ,
    ccfr.id ccfr_id,ccfr.user_id ccfr_user_id,comment_id,ccfr.is_del ccfr_is_del,
    ccfr.create_time ccfr_create_time,ccfr.update_time ccfr_update_time
    from course_comment cc left join course_comment_favorite_record ccfr
    on cc.id = ccfr.comment_id
    where cc.is_del = 0
    and course_id = #{courseid}
    order by is_top desc , like_count desc , cc.create_time desc
    limit #{offset}, #{pageSize}

@Test
public void getComment(){
    List list = courseCommentDao.getCommentsByCourseId(7, 1, 20);
    for(CourseComment comment : list){
        System.out.println("【"+comment.getUserName()+"】"+"留言：" + comment.getComment());
        for(CourseCommentFavoriteRecord fr: comment.getFavoriteRecords()){
            System.out.println("--->" + fr.getUserId());
        }
    }
}

14.2 修改controller

@GetMapping("comment/getCourseCommentList/{courseid}/{pageIndex}/{pageSize}")
public List getCommentsByCourseId(@PathVariable("courseid") 
Integer courseid,@PathVariable("pageIndex") Integer 
pageIndex,@PathVariable("pageSize") Integer pageSize){
    int offset = (pageIndex-1)*pageSize;
    List list = commentService.getCommentsByCourseId(courseid, offset, pageSize);
    System.out.println("获取第"+courseid+"门课程的留言：共计"+list.size()+"条");
    return list;
}

14.3 页面点赞之后的显示样式

    
    
{{comment.likeCount}}



    
    
{{comment.likeCount}}

14.4 页面调用点赞和取消赞

    
    
{{comment.likeCount}}



    
    
{{comment.likeCount}}

    select
    cc.id cc_id,`course_id`,`section_id`,`lesson_id`,cc.user_id cc_user_id,ùser_name`,
    `parent_id`,ìs_top`,`comment`,`like_count`,ìs_reply`,`type`,`status`,
    cc.create_time cc_create_time ,cc.update_time cc_update_time ,cc.is_del cc_is_del,
    `last_operator`,ìs_notify`,`mark_belong`,`replied`,ccfr.id ccfr_id,ccfr.user_id ccfr_user_id,
    comment_id,ccfr.is_del ccfr_is_del,ccfr.create_time ccfr_create_time,
    ccfr.update_time ccfr_update_time
    from course_comment cc left join course_comment_favorite_record ccfr
    on cc.id = ccfr.comment_id
    where cc.is_del = 0
    and ccfr.is_del = 0  
    and course_id = #{courseid}
    order by is_top desc , like_count desc , cc.create_time desc
    limit #{offset}, #{pageSize}

15、发表留言

• Course.vue

// 发表留言
saveComment(){
   return this.axios
    .get("http://localhost:80/course/comment/saveCourseComment",{
      params:{
        courseid:this.course.id,
        userid:this.user.content.id,
        username:this.user.content.name,
        comment:this.comment,
      }
    })
    .then((result) => {
    // console.log(result);
      // 重新获取本门课的全部留言信息
      this.getComment();
    }).catch( (error)=>{
      this.$message.error("发表留言失败！");
    } ); 
},

• web消费方

public interface CommentService {
    /**
     * 保存留言
     * @param comment 留言内容对象
     * @return 受影响的行数
     */
    Integer saveComment(CourseComment comment);

@RestController
@RequestMapping("course")
public class CommentController {
    @Reference // 远程消费
    private CommentService commentService;
    @GetMapping("comment/saveCourseComment")
    public Object saveCourseComment(Integer courseid,Integer userid,String username,String comment) 
        throws UnsupportedEncodingException {
        username = new String( username.getBytes("ISO-8859-1"),"UTF-8" );
        comment = new String( comment.getBytes("ISO-8859-1"),"UTF-8" );
        System.out.println("昵称：" + username);
        CourseComment courseComment = new CourseComment();
        courseComment.setCourseId(courseid); // 课程编号
        courseComment.setSectionId(0); // 章节编号 （预留字段，为项目的2.0版本保留）
        courseComment.setLessonId(0);// 小节编号（预留字段，为项目的2.0版本保留）
        courseComment.setUserId(userid); // 用户编号
        courseComment.setUserName(username); // 用户昵称
        courseComment.setParentId(0); //没有父id（预留字段，为项目的2.0版本保留）
        courseComment.setComment(comment);// 留言内容
        courseComment.setType(0); // 0用户留言（预留字段，为项目的2.0版本保留）
        courseComment.setLastOperator(userid); //最后操作的用户编号
        Integer i = commentService.saveComment(courseComment);
        return i;
    }

• service提供方

   insert  into `course_comment`(`course_id`,`section_id`,`lesson_id`,ùser_id`,`user_name`,
    `parent_id`,ìs_top`,`comment`,`like_count`,`is_reply`,`type`,`status`,`create_time`,
    `update_time`,ìs_del`,`last_operator`,ìs_notify`,`mark_belong`,`replied`)
   values
   (#{courseId},#{sectionId},#{lessonId},#{userId},#{userName},#{parentId},0,
    #{comment},0,0,#{type},0,sysdate(),sysdate(),0,#{lastOperator},1,0,0)