86-分布式前端开发

前端门户系统

经过上一章的后端开发后，接下来我们来操作前端开发，页面不需要我们自己开发，使用提供的页面即可

对应的前端初始项目地址：

链接：https://pan.baidu.com/s/1iFui2WbE1mfmHWnb9Z8oGg

提取码：alsk

运行项目 npm run serve

接下来进行开发

但要注意：这里只会给出部分代码，需要自己去进行对比修改（记得启动对应的后端，且没有的自然自己写）

由于是部分，对应的代码可能不是全的

可以使用ctrl+f进行查找，或者ctrl+d进行找到一样的（虽然从上到下，循环的，直到找到自己）

进入首页组件Index.vue

对应的js部分：

 created() {
    this.getCourseList() //组件使用时，就调用获取课程信息的方法
  },
1
2
3

  getCourseList(){ //去dubbo服务获取全部课程的数据
    return this.axios.get("http://localhost:8002/course/getAllCourse").then(res => {
      console.log(res)
    }).catch(err =>{
      this.$message.error("获取课程信息失败")
    })
    }
1
2
3
4
5
6
7

进行访问后，查询浏览器的检查，是否有对应数据，一般对应的data根据对应编码值来显示先后

实际上是因为对应的json操作返回的（后台的操作）

测试后，若有数据，那么接下来则编写具体代码，代码部分：

 data() {
    return {
      activeName: "allLesson",
      courseList:[] //课程集合
    };
  },
1
2
3
4
5
6

 getCourseList(){ //去dubbo服务获取全部课程的数据
    return this.axios.get("http://localhost:8002/course/getAllCourse").then(res => {
      console.log(res)
      this.courseList = res.data; //添加该代码
    }).catch(err =>{
      this.$message.error("获取课程信息失败")
    })
    }
1
2
3
4
5
6
7
8


            <li class="course-li" v-for="(item,index) in courseList" :key="index"> 
                
                
                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

		 <img
                :src="item.courseImgUrl"
                class="teacher-portrait hover-pointer"
              />


1
2
3
4
5
6

		<div
                    class="p-title"
                    style="text-align:left;"
                    @click="gotoDetail"
                  >
                    <span>
                      {{item.courseName}}
                        
                    span>
                  div>
1
2
3
4
5
6
7
8
9
10

 
                  <p class="p-title-buy text-overflow">
                    <span class="p-author-span">
                      {{item.teacher.teacherName}}
                    span>
                    <span class="p-author-line" />
                    <span class="p-author-span">
                       {{item.teacher.position}}
                    span>
                  p>
1
2
3
4
5
6
7
8
9
10

 
                  <p class="p-describe" style="text-align:left;">
                    {{item.brief}}
                  p>
1
2
3
4

 <span class="content-price-orange-sm">￥span>
                    <span class="content-price-orange">{{item.discounts}}span> 

                    <span class="current-price">
                      <span class="current-price-unite">￥span>
                      {{item.price}} 
                    span>
1
2
3
4
5
6
7

<span class="content-price-buy">{{item.sales}}人购买span>

1
2

删掉对应的章节2的li标签，因为我们直接遍历即可

 <ul class="content-course" style="text-align:left;">
                  
                   <li
                    class="content-course-lesson text-overflow"
                    style="width:300px" 
       v-for="(lesson,index) in item.courseSectionList[0].courseLessonList.slice(0,2)" :key="index"
                  >
                       
                      
                    
                    <img
                      src="@/assets/course-list/free-course.png"
                      class="free-label hover-pointer"
                    />
                    <span class="theme-span hover-pointer">
                        {{lesson.theme}} 
                      span>
                  li>
                  
                 
                ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

现在对应的显示已经完成，现在我们操作登录

找到Header.vue：

//methods里面的  
login(){ //前去登录
      return this.axios.get("http://localhost:8002/user/login",{
        params:{
          phone:this.phone,
          password:this.password
        }
      }).then(res =>{
        
        console.log(res);
        this.userDTO = res.data;
          if(this.userDTO.content!=null){
        this.isLogin = true //更新登录状态，一般写在上面的设置后面，虽然写在前面也可（因为执行速度够快）
        //将登录成功的信息进行保存（本地），使得刷新界面时，可以继续得到信息，基本只与浏览器有关
        localStorage.setItem("user",JSON.stringify(this.userDTO)) //将字符串数据变过去
          }
          //初始化
        this.phone = "";
        this.password="";
      
        this.dialogFormVisible = false; // 不显示登录框
           this.$router.push("/" ); //防止其他界面路径操作时，出现问题，直接跳转到根目录，且刷新
        
          window.location.reload() //进行刷新，使得操作后面的已购，因为在当前相同的路径下
          //并不会有刷新，那么已购也就不会动态的出现了
      }).catch(err =>{
        this.$message.error("登录失败")
      })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

created(){
    
    //当刷新页面，组件创建成功之后，立刻检测本地储存中是否存在用户对象
    console.log(JSON.parse(localStorage.getItem("user")));
    //将得到的字符串变成对应的对象，也可以说是JSON对象，使得可以操作，即"对象.key"的获取值
     this.userDTO =JSON.parse(localStorage.getItem("user")); 
     console.log(this.userDTO)
     if( this.userDTO != null){
         this.isLogin = true //更新登录状态，表示已登录
     }
  },
1
2
3
4
5
6
7
8
9
10
11

操作完成后，就可以进行登录了，刷新也是一样

登出操作：

  logout(){ //登出
localStorage.setItem("user",null)
 this.isLogin = false
       this.$router.push("/" ); //防止其他界面路径操作时，出现问题，直接跳转到根目录，且刷新
      window.location.reload() //进行刷新，使得操作后面的已购，最好加上()，不加可能不会起作用
 alert("已登出")
    }
1
2
3
4
5
6
7

回到Index.vue：

 data() {
    return {
      activeName: "allLesson",
      courseList:[], //课程集合
        myCourseList:[], //我购买过的课程列表
      isLogin:false, //登录状态
      user:null //登录的用户对象信息
    };
  },
1
2
3
4
5
6
7
8
9

created() {

this.user = JSON.parse(localStorage.getItem("user"));   
//不为null代表登录了，因为登录了才会设置对应的值，没有登录会设置为null
//而JSON.parse操作null，返回的也是null
if(this.user != null){ 
  this.isLogin = true
     this.getMyCourseList(); //获得自己的课程，也就是购买过的课程
}

    this.getCourseList() //组件使用时，就调用获取课程信息的方法

  

  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  getMyCourseList(){
      return this.axios.get("http://localhost:8002/course/getCourseByUserId/" + this.user.content.id).then(res =>{
 console.log(res)
      this.myCourseList = res.data;
      }).catch(err => {
 this.$message.error("获取课程信息失败")
      })
    }
1
2
3
4
5
6
7
8

<el-tab-pane label="已购" name="hasPay">
          <div v-if="!isLogin">
          <img
            src="@/assets/course-list/no-login@2x.png"
            class="no-data-icon"
          />
          <div class="no-data-title">您还没有登录div>
          <div class="no-data-title">登录后即可查看已购课程div>
          <div class="btn btn-yellow btn-center">立即登录div>
          div>
          <div v-if="isLogin">
            <ul class="course-ul-pc">
            
            <li class="course-li" v-for="(item,index) in myCourseList" :key="index">
              
              <img
                :src="item.courseImgUrl"
                class="teacher-portrait hover-pointer"
              />
              
              <div class="content-main">
                
                <div class="content-title hover-pointer">
                  <div
                    class="p-title"
                    style="text-align:left;"
                    @click="gotoDetail"
                  >
                    <span>
                      {{item.courseName}}
                    span>
                  div>
                  
                  <p class="p-title-buy text-overflow">
                    <span class="p-author-span">
                      {{item.teacher.teacherName}}
                    span>
                    <span class="p-author-line" />
                    <span class="p-author-span">
                       {{item.teacher.position}}
                    span>
                  p>
                  <p>p>
                  
                  <p class="p-describe" style="text-align:left;">
                    {{item.brief}}
                  p>
                div>
                
                <ul class="content-course" style="text-align:left;">
                  
                  <li
                    class="content-course-lesson text-overflow"
                    style="width:300px" 
    v-for="(lesson,index) in item.courseSectionList[0].courseLessonList.slice(0,2)" :key="index"
                  >
                    
                    <img
                       src="@/assets/course-list/yanzhi_activity_modal_gift@2x.png"
                      class="free-label hover-pointer"
                    />
                    <span class="theme-span hover-pointer">
                      {{lesson.theme}}
                      span>
                  li>
                  
                 
                ul>
                
                <div class="content-price" style="text-align:left;">
                  <p class="content-price-p">
                    <span class="content-price-orange-sm">￥span>
                    <span class="content-price-orange">{{item.discounts}}span>
                    <span class="current-price">
                      <span class="current-price-unite">￥span>
                      {{item.price}}
                    span>
                    <span class="activity-name">成就自己span>
                    <span class="content-price-buy">{{item.sales}}人购买span>
                  p>
                  <div class="btn btn-yellow btn-offset">开始学习div> 
                
                div>
              div>
            li>
            
            
          ul>
          div>
        el-tab-pane>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

课程的显示已经完成，接下来我们来显示课程里面的信息

  <div
                    class="p-title"
                    style="text-align:left;"
                    @click="gotoDetail(item)"
                  >
                        
1
2
3
4
5
6

gotoDetail(item) {
      this.$router.push({ name: "Course", params: { course: item } });
    },
1
2
3

到Course.vue组件：

 data() {
    return {
      activeName: "intro",
      course:null,
      totalLessons:0, //本门课程的总节数
    };
  },
1
2
3
4
5
6
7

//没有自然自己写
 created(){
    
this.course = this.$route.params.course //从路由中获得参数对象，赋值给本组件的参数
console.log(1)
console.log(this.course)
let x = 0;
for(let i = 0;i<this.course.courseSectionList.length;i++){
  let section = this.course.courseSectionList[i] //每一章
  for(let j = 0;j<section.courseLessonList.length;j++){
    x++;
  }
}
this.totalLessons = x; //得到对应所有的讲（也就是所有的课时）
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  
      <div class="nav-wrap">
        <p class="nav-p-pc" style="margin-top:-25px;text-align:left;">
          <a href="#">课程列表a>
          <span class="sharp-content">>span>
          <span class="nav-sec">{{course.courseName}}span>
        p>
      div>
1
2
3
4
5
6
7
8

<img
                      class="course-img"
                      :src="course.courseImgUrl"
                      alt="课程图片"
                    />
1
2
3
4
5

<div class="conent-wrap">
                      <div class="name" style="text-align:left;">
                        {{course.courseName}}
                      div>
                      <div class="des text-omit" style="text-align:left;">
                        {{course.brief}}
                      div>
                      <div class="title">
                        <div class="teacher-name text-omit">
                          讲师：{{course.teacher.teacherName}}
                          <span class="line">span>
                          {{course.teacher.position}}
                        div>
                      div>
                      <div class="lesson-info">
                        <div class="boook-icon backgroun-img-set">div>
                        <div class="time">{{totalLessons}}讲 / {{course.totalDuration}}课时div>
                        
                        <div class="person-icon backgroun-img-set">div>
                        <div class="person">{{course.sales}}人已购买div>
                      div>
                    div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 <el-tab-pane label="课程信息" name="intro">
                   <div v-html="course.courseDescription" class="content-p pc-background">
                      
                    div>
                  el-tab-pane>
1
2
3
4
5

.content-p {
  font-size: 0.373rem;
  color: #666;
  letter-spacing: 0;
  text-align: justify;
  line-height: 1.1rem;
}
1
2
3
4
5
6
7

 <div
      class="class-menu-contaniner list-page-container more-sections more-sections-padding"
                    v-for="(section,index) in course.courseSectionList" :key="index"
                 
                    >
1
2
3
4
5

.class-menu-contaniner.list-page-container {
  padding: 0px 15px;
  background: #fff;
}
1
2
3
4

   <div>
                        <div class="section-name single-line">
                         {{section.sectionName}}
                        div>
                        <div class="class-menu-block">
                          <div
                            class="class-level-one over-ellipsis"
                            @click="watchCourse(1)"
                             v-for="(lesson,index) in section.courseLessonList" :key="index"
                          >
                            <div class="text-wrap">
                              <div class="content">{{lesson.theme}}div>
                              <div
                                class="item-status-wrap item-status-wrap-list"
                              >
                                <div class="item-status test-watch">试看div>
                              div>
                            div>
                          div>
                       
                        div>
                      div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 <span class="current-price" style="font-size:28px">
            <span class="current-price-unite" style="font-size:.347rem">
              ￥span
            >{{course.discounts}}
          span>
          <span class="current-price price">
            <span class="current-price-unite">￥span>
            {{course.price}}
          span>
1
2
3
4
5
6
7
8
9

接下来我们操作留言（任然是Course.vue）：

 created(){
    
this.course = this.$route.params.course //从路由中获得参数对象，赋值给本组件的参数
console.log(1)
console.log(this.course)
let x = 0;
for(let i = 0;i<this.course.courseSectionList.length;i++){
  let section = this.course.courseSectionList[i] //每一章
  for(let j = 0;j<section.courseLessonList.length;j++){
    x++;
  }
}
this.totalLessons = x; //得到对应所有的讲（也就是所有的课时）
this.getComment(); //这里是新加的
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 data() {
    return {
      activeName: "intro",
      course:null,
      totalLessons:0, //本门课程的总节数
      commentList:null //所有留言
    };
  },
1
2
3
4
5
6
7
8

  getComment(){
 return this.axios
     .get("http://localhost:8002/course/comment/getCourseCommentList/"+this.course.id+"/1/20")
     .then(res => {
      console.log(res)
      this.commentList = res.data;
    }).catch(err =>{
      this.$message.error("获取留言信息失败")
    })
    },
1
2
3
4
5
6
7
8
9
10

 
    <div class="message-list" v-for="(comment , index) in commentList" :key="index">
                        <div class="message-list-title">
                          <div class="message-list-title-left">
                            <div class="message-list-title-left-name">{{comment.userName}}div>
                            <div class="message-list-title-left-tag">div>
                          div>
                         <div @click="cancelzan(comment)"
                              v-if="JSON.stringify(comment.favoriteRecords)
                                    .indexOf( user.content.id ) >= 0" 
                              class="message-list-title-right">
                            <img class="message-list-title-right-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAJFBMVEVHcEwAuI4AtIsAtIsAtIoAtYwAtIsAtYwAtowAx5kAtIsAs4qd4c1kAAAAC3RSTlMAGMfz3VGnbTYIhXtDq8EAAAETSURBVDjLldWhb8JAFAbwg8CGhGSGzNQtULNkWUioWbJkpmYKAQaBITPLLKZysmLz+xfolUL6/XM72msh9N2X8ImaX17vrq+vVeqU39XTuK/kdEMA01jGDY4ZyYWFIRPxp0S8u+8KeBJ+WDxIGFrMJbQm7qhVYSJgr8JUwNsKtYDtCiHgPavcsDVDstsuyDk7NeYDk6G8pM3bWXNawQUijWq8QyPPpQy+50ET9bF09go5pus3cMV0feFEc2DfieZRBU7Up7fjSkwZZgz3DA8MHxl6DP8YRgxjgokimDHcMdwyfGG4ZPjJMCKoY4KJIpgz3DHcMvQYFuPpk/005t1mffHlOs/ETvxXAA0Ul3oQHsp/xD93wxfHcC4VkwAAAABJRU5ErkJggg==" alt="">
                            <div class="message-list-title-right-praise">{{comment.likeCount}}div>
                          div>
                          
                          <div @click="zan(comment)" v-else class="message-list-title-right">
                            <img class="message-list-title-right-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAKlBMVEVHcExnZ2dzc3NmZmZqampmZmZmZmZnZ2dnZ2dnZ2dmZmZoaGhmZmZmZmZl+8SAAAAADXRSTlMA/AbsFtilbj5YwSqJPyESoQAAAZxJREFUOMt1lTtLA1EQha8xRhPTBEmhuKCCoNgoIlYLMcRKBG0sxIUgCDaBSDohEO0FEbQyIBZaBazERvAPWCwxPnP+i3tnrlGTmVPswn73NXNm7hrzq9m9kZ2ckTUUABifkOEBrK7liR7BMRFOA/uFc+BUgnV8mFisEW5IsIFi9FzBuwR91KJnAm8S9EIbxSBeBRZHk86MrBQJWjymJUC3nlugSyk+SQyhANfxos+s4krfM0DZvmbw2cuSCHNGi3PAfUygXYiU79ryyw1ibf0xZ9intBsz6SBadx24iiZXz8kPxCiTtYdLPzKTVFkkLQAZO/VikwYW/x/wHohcT/MiPQE8W9frxJrlbpiw4xvA0vbNmWyhj2Nrhmy+B7nEyTsN0rIaJAc0SDWqwX7rhAYfMa/Dui0bDZbwZAwUGNjWUWActnUUyN2hwDTaOkxRaSiwj6pRhjHKgTazSkWlwBK1jgIpBwrkHCgwyZ0oQ86BAjkHCjziG0KE8YBvCA/5KacOm6sgrHFAotouT6J23bkkLbsNDjM9yt7yP+IbQYga5De+eBMAAAAASUVORK5CYII=" alt="">
                            <div class="message-list-title-right-praise">{{comment.likeCount}}div>
                          div>
                        div>
                        <div class="message-list-content">
                          {{comment.comment}}
                        div>
                      
                      
                      div>
                      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在这之前，我们需要讲样式进行改变，删除原来的样式，复制如下地址的样式进行使用

链接：https://pan.baidu.com/s/16u-vPVF_tmokXNOKzZUjxQ

提取码：alsk

接下来我们了操作试看的状态：

任然是Course.vue：

  data() {
    return {
      activeName: "intro",
      course:null,
      totalLessons:0, //本门课程的总节数
      commentList:null, //所有留言
      isLogin:false, //false，未登录
      isBuy:false,//未购买
      user:null, //当前用户，可以","结尾
      myCourseList:[], //当前用户购买过的所有课程
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12

created(){
    
this.course = this.$route.params.course //从路由中获得参数对象，赋值给本组件的参数
  if(this.course==null){ //防止自己刷新或者其他页面跳转出现错误，因为这时候的this.course是undefined
  //undefined==null返回的是true，因为他们操作==时，一般会变成false
      //因为只会比较这时候在判断的值（可以说看成了false）
//若要进行完全比较，则需要===,那么返回false
  this.$router.push("/"); //回到首页
}
//检测是否登录
this.user = JSON.parse(localStorage.getItem("user"))
if(this.user != null){
  this.isLogin = true //已登陆
  if(this.course!=null){  //防止出现没有值（这里是undefined），导致axios中then错误，那么catch也会错误
  this.getMyCourseList() //查询登录用户购买的所有课程
}
}

console.log(1)
console.log(this.course)
let x = 0;
for(let i = 0;i<this.course.courseSectionList.length;i++){
  let section = this.course.courseSectionList[i] //每一章
  for(let j = 0;j<section.courseLessonList.length;j++){
    x++;
  }
}
this.totalLessons = x; //得到对应所有的讲（也就是所有的课时）
this.getComment();
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

getMyCourseList(){  查询登录用户购买的所有课程
  return this.axios.get("http://localhost:8002/course/getCourseByUserId/" + 
                        this.user.content.id).then(res =>{
 console.log(res)
      this.myCourseList = res.data;

    //检测当前的课程是否购买过
    for(let i = 0;i<this.myCourseList.length;i++){
      if(this.myCourseList[i].id == this.course.id){
        this.isBuy = true //这样就代表购买过该课程，自然其中的课程（如章节的课时的视频）都可以进行播放
        break;
      }
    }

      }).catch(err => {
 this.$message.error("获取课程信息失败")
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

   <div
                                class="item-status-wrap item-status-wrap-list"
                              >
                              
                              <div v-if="index<2">
                                
                                <div class="item-status test-watch" v-if="!isLogin">试看div>
                                
                         <div class="item-status test-watch" v-else-if="isLogin && !isBuy">试看div>
                                
                                <div class="item-status test-watch"  v-else>播放div>
                              div>
                              
                                
                                <div v-if="index>1"> 
                                
                                <div class="item-status lock" v-if="!isLogin">div>
                                
                                <div class="item-status lock" v-else-if="isLogin && !isBuy">div>
                                
                                <div class="item-status test-watch"  v-else>播放div>
                              div>
                              div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

修改对应的html（注意找到具体位置）：

   <div
         class="class-menu-contaniner list-page-container more-sections more-sections-padding"
                   
                 
                    >
                    
          <div  v-for="(section,index) in course.courseSectionList.slice(0,1)" :key="index">
                        <div class="section-name single-line">
                         {{section.sectionName}}
                        div>
                        <div class="class-menu-block">
                          <div
                            class="class-level-one over-ellipsis"
                            @click="watchCourse(1,index,lesson.courseMedia,lesson.id)"
                             v-for="(lesson,index) in section.courseLessonList" :key="index"
                          >
                            <div class="text-wrap">
                              <div class="content">{{lesson.theme}}div>
                              <div
                                class="item-status-wrap item-status-wrap-list"
                              >
                              
                              <div v-if="index<2">
                                
                                <div class="item-status test-watch" v-if="!isLogin">试看div>
                                
                       <div class="item-status test-watch" v-else-if="isLogin && !isBuy">试看div>
                                
                                <div class="item-status test-watch"  v-else>播放div>
                              div>
                              
                                
                                <div v-if="index>1"> 
                                
                                <div class="item-status lock" v-if="!isLogin">div>
                                
                                <div class="item-status lock" v-else-if="isLogin && !isBuy">div>
                                
                                <div class="item-status test-watch"  v-else>播放div>
                              div>
                              div>
                            div>
                          div>
                       
                        div>
                      div>
                       

                        
<div  v-for="(section,index) in course.courseSectionList.slice(1,course.courseSectionList.length)" 
     :key="index">
                        <div class="section-name single-line">
                         {{section.sectionName}}
                        div>
                        <div class="class-menu-block">
                          <div
                            class="class-level-one over-ellipsis"
                            @click="watchCourse(2,index,lesson.courseMedia,lesson.id)"
                             v-for="(lesson,index) in section.courseLessonList" :key="index"
                          >
                            <div class="text-wrap">
                              <div class="content">{{lesson.theme}}div>
                              <div
                                class="item-status-wrap item-status-wrap-list"
                              >
                                                 
                                
                                <div class="item-status lock" v-if="!isLogin">div>
                                
                                <div class="item-status lock" v-else-if="isLogin && !isBuy">div>
                                
                                <div class="item-status test-watch"  v-else>播放div>
                           
                              div>
                            div>
                          div>
                       
                        div>
                      div>
                      
                      
                      div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

操作播放（任然是Course.vue）：

//前面的
//watchCourse(1,index,lesson.courseMedia,lesson.id)
//watchCourse(2,index,lesson.courseMedia,lesson.id)
//已经写好了

   //播放视频
    //参数1：代表是否是第一章（1表示是第一章，2表示其他章）
    //参数2：对应的下标，也就是index的值，比如可以知道是否是前两节（对第一章来说）
    //参数3：代表视频地址
    watchCourse(status,index,courseMedia,lessonid) { 
//判断对应的视频是否有值
if(courseMedia == null){
  this.$message.error("播放失败，暂无视频")
}else{
 
    //试看的可以跳转播放页面,这里判断第一章的前两节，其余的没有试看
    //之所以可以这样一起判断，是因为这里是总数据status,index,courseMedia
    //直接操作课时的数据，而不是章节
    if(status == 1 && index<2){
this.$message.success("观看第【" + lessonid + "】节课程视频！" + courseMedia.fileEdk);
//lessonid代表课时对应的编号，一般也当成第几节，虽然可能在数据库里并不是从最小开始
//所以若为了好的正确观看，就可以不用lessonid而用index+1了，但是不好查看是哪个视频
  this.$router.push({
        name: "videoDetail",
        params: { course: this.course,lessonid: lessonid },
      });
        //params: { course: this.course,lessonid: lessonid ,a: courseMedia.fileEdk},
    }else{
    //锁上的先验证是否登录
    if(!this.isLogin){
      this.$message.success("请先登录")
    }else{
      //登录的，再验证是否购买过
      if(!this.isBuy){
this.$message.warning("请先购买后，进行解锁")
      }else{
        this.$message.success("观看第【" + lessonid + "】节课程视频！"+ courseMedia.fileEdk);
         this.$router.push({
        name: "videoDetail",
          params: { course: this.course,lessonid: lessonid },
      });
          //params: { course: this.course,lessonid: lessonid ,a: courseMedia.fileEdk},
      }

    }}
}

  
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

接下来我们操作播放执行：

到videoDetail.vue

 data() {
    return {
      myvideo: null, // 播放器对象
      isplay: false, //是否在播放
      nowTime: "00:00", //当前播放时间
      totalTime: "00:00", //总时长
      course:null, //课程
      lessonid:0, //当前播放视频的课时id
        lessonName:null,//当前播放的视频名称
      //a:null
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12

 created() {
    //从路由中得到对应的课程和课时id
    this.course = this.$route.params.course;
    this.lessonid = this.$route.params.lessonid
    //this.a=this.$route.params.a
  },
1
2
3
4
5
6

基于SpringBoot和SpringCloud微服务架构的分布式系统开发_王江江.docx

docx

0星超过10%的资源 1.21MB

下载

mounted() {
    this.myvideo = document.getElementById("myvideo");
    this.initplay() //初始化播放的视频，即当我到达这个页面，要播放的是对应的那个视频，基本不会是其他的视频
  },
1
2
3
4

 //初始化时播放的视频
    initplay(){
        //在课程信息中查找即将播放的小节视频的编号
      for(let i = 0 ;i<this.course.courseSectionList.length;i++){
        let section = this.course.courseSectionList[i]
        for(let j = 0;j<section.courseLessonList.length;j++){
          let lesson = section.courseLessonList[j]
          if(lesson.courseMedia!=null){
              if(this.lessonid==lesson.courseMedia.lessonId){
                  this.lessonName = lesson.theme
            console.log("视频地址：" + lesson.courseMedia.fileEdk)
            //将小节视频的地址赋值给播放器进行播放
            this.myvideo.src = lesson.courseMedia.fileEdk
            return;
            }
          }
        }
      }
       
      //上面的确可以进行操作，但实际上我们并不需要这么麻烦
      //因为在跳转到这个路由之前，我们就已经有对应的地址参数了，即并不需要进行循环判断使得相同id得到地址参数
        //因为之前就是同一个lesson
      //this.myvideo.src = this.a
        //但可能点击其他视频时，需要循环，所以为了后面的会出现的问题出发，加上循环并没有坏处
        //当然好像并没有什么作用
        
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

至此我们进行点击试看或者播放，点击视频中间进行播放，发现视频的确进行播放，那么操作成功

在这之前，也可以点击地址看看是否可以播放

接下来操作播放的页面：

<span style="position:absolute;left:80px;">
            {{course.courseName}} > {{lessonName}}</span
          >
1
2
3

 <span class="progress-label">--span>
1

 data() {
    return {
      myvideo: null, // 播放器对象
      isplay: false, //是否在播放
      nowTime: "00:00", //当前播放时间
      totalTime: "00:00", //总时长
      course:null, //课程
      lessonid:0, //当前播放视频的课时id
      lessonName:null,//当前播放的视频名称
       isLogin:false, //false，未登录
      isBuy:false,//未购买
      //a:null
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

我们从Course.vue里修改对应的如下代码：

//有两个
this.$router.push({
        name: "videoDetail",
        params: { course: this.course,lessonid: lessonid,isBuy:this.isBuy},
      });
1
2
3
4
5

回到videoDetail.vue：

created() {

//检测是否登录
this.user = JSON.parse(localStorage.getItem("user"))
if(this.user != null){
  this.isLogin = true //已登陆
  console.log(1)
}

    //从路由中得到对应的课程和课时id
    this.course = this.$route.params.course;
    this.lessonid = this.$route.params.lessonid
    this.isBuy = this.$route.params.isBuy
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

   <div class="content-container">
              
              <div v-for="(section,index) in course.courseSectionList.slice(0,1)" :key="index">
                
                <div class="content-label">
                  <div class="content-label-title single-line">{{section.sectionName}}div>
                  <img
                    class="arrow-icon"
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAGFBMVEVHcEz///8dS1W+AAAAB3RSTlMAgwWyMeGgBsFrrQAAAFVJREFUKM9jYBiugMUBQ0i8EF2EsbxcAF1ReXkhuqJiczRl4uVGyqjKgIoUmFCVARUxMKAoAyliYEBRBlaEqiwcpAikrBShKglCqyFUMcEYCgwjBAAAeaoQrHtg6QoAAAAASUVORK5CYII="
                    alt=""
                  />
                div>


                
                <div class="content-sections">
                  
      
                  <div :class="{
                    'content-section':lesson.id != lessonid,
                  'content-section content-section-choose':lesson.id == lessonid
                  }" 
                  v-for="(lesson,index) in section.courseLessonList" :key="index">
                  
                    
                    
                    <div v-if="index<2">
                    <div class="section-item clearfix">
                       
                      <span :class="{
                    'kw-icon-video section-type-icon':lesson.id != lessonid,
                  'kw-icon-video section-type-icon lv':lesson.id == lessonid
                  }"
                        ><i class="el-icon-video-play">i
                      >span>
                       
                       <span :class="{
                    'section-dec':lesson.id != lessonid,
                  'section-dec  lv':lesson.id == lessonid
                  }">
                     {{lesson.theme}}span>
                      
                      <div v-if="lesson.id != lessonid">
                    
                      <span v-if="!isLogin" class="section-status-icon pause-play">试看span>
                        
       <span v-else-if="isLogin && !isBuy" class="section-status-icon pause-play">试看span>
                        
                          <span v-else class="section-status-icon pause-play">播放span>
                      div>
                       <div v-if="lesson.id == lessonid">
                    
                      <span v-if="!isLogin" class="section-status-icon pause-play">span>
                        
       <span v-else-if="isLogin && !isBuy" class="section-status-icon pause-play">span>
                        
                          <span v-else class="section-status-icon pause-play">span>
                      div>
                    div>
                    <div class="section-duration">
   <span v-if="lesson.courseMedia != null">时长：{{lesson.courseMedia.duration}}span>
                            <span v-else>时长：无媒体文件span>
                    div>
                    div>

            
              <div v-if="index>1">
                    <div class="section-item clearfix">
                      <span :class="{
                    'kw-icon-video section-type-icon':lesson.id != lessonid,
                  'kw-icon-video section-type-icon lv':lesson.id == lessonid
                  }"
                        ><i class="el-icon-video-play">i
                      >span>
                      <span :class="{
                    'section-dec':lesson.id != lessonid,
                  'section-dec  lv':lesson.id == lessonid
                  }">{{lesson.theme}}span>
                        
                      <span v-if="!isLogin" class="section-status-icon pause-play">未解锁span>
                        
        <span v-else-if="isLogin && !isBuy" class="section-status-icon pause-play">未解锁span>
                        
       <span v-else-if="lesson.id != lessonid" class="section-status-icon pause-play">播放span>
                          <span v-else class="section-status-icon pause-play">span>
                    div>
                    <div class="section-duration">
         <span v-if="lesson.courseMedia != null">时长：{{lesson.courseMedia.duration}}span>
                            <span v-else>时长：无媒体文件span>
                    div>
                    div>


                  div>
                div>
              div>
              
                
<div v-for="(section,index) in course.courseSectionList.slice(1,course.courseSectionList.length)" 
     :key="index">
                
                <div class="content-label">
                  <div class="content-label-title single-line">{{section.sectionName}}div>
                  <img
                    class="arrow-icon"
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAGFBMVEVHcEz///8dS1W+AAAAB3RSTlMAgwWyMeGgBsFrrQAAAFVJREFUKM9jYBiugMUBQ0i8EF2EsbxcAF1ReXkhuqJiczRl4uVGyqjKgIoUmFCVARUxMKAoAyliYEBRBlaEqiwcpAikrBShKglCqyFUMcEYCgwjBAAAeaoQrHtg6QoAAAAASUVORK5CYII="
                    alt=""
                  />
                div>

                <div class="content-sections">
                  
                
                     <div :class="{
                    'content-section':lesson.id != lessonid,
                  'content-section content-section-choose':lesson.id == lessonid
                  }" 
                  v-for="(lesson,index) in section.courseLessonList" :key="index">
                  <div>
        
                    <div class="section-item clearfix">
                       <span :class="{
                    'kw-icon-video section-type-icon':lesson.id != lessonid,
                  'kw-icon-video section-type-icon lv':lesson.id == lessonid
                  }"
                        ><i class="el-icon-video-play">i
                      >span>
                      <span :class="{
                    'section-dec':lesson.id != lessonid,
                  'section-dec  lv':lesson.id == lessonid
                  }">{{lesson.theme}}span>
                        
                      <span v-if="!isLogin" class="section-status-icon pause-play">未解锁span>
                        
      <span v-else-if="isLogin && !isBuy" class="section-status-icon pause-play">未解锁span>
                        
                    
        <span v-else-if="lesson.id != lessonid" class="section-status-icon pause-play">播放span>
                          <span v-else class="section-status-icon pause-play">span>
                    div>
                    <div class="section-duration">
          <span v-if="lesson.courseMedia != null">时长：{{lesson.courseMedia.duration}}span>
                            <span v-else>时长：无媒体文件span>
                    div>

                  div>

                  div>
                div>
              div>
              
            div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

对应的样式地址，记得进行替换（是videoDetail.vue组件）：

链接：https://pan.baidu.com/s/1AD141qyMnHyv3veJ06kwJw

提取码：alsk

至此对应的状态也操作完毕，自己运行看看吧

接下来操作点击跳转视频：

任然是videoDetail.vue组件

//所以章里面的的都加上@click="playlesson"进行操作（无论是第一章还是其他章），进行视频的切换
  <div :class="{
                    'content-section':lesson.id != lessonid,
                  'content-section content-section-choose':lesson.id == lessonid
                  }" 
                  v-for="(lesson,index) in section.courseLessonList" :key="index"
                  @click="playLesson(lesson)"
                  >
1
2
3
4
5
6
7
8

 //播放课程
    playLesson(lesson) {
      //将对应的播放视频变成我点击的视频
      this.lessonid = lesson.id; //修改对应的id，一般用来操作前面的样式
      this.myvideo.src = lesson.courseMedia.fileEdk //将地址进行改变，使得视频也改变
      //这里并不需要循环，就如循环里说的，使用现成的即可

    },
1
2
3
4
5
6
7
8

至此可以进行视频的切换了，虽然对应的按钮操作是特殊的，一般只能点击视频进行视频的观看

但是在观看切换时，可以点击按钮进行观看，而使得不会变化

这实际上并不是好的视频组件，因为并不是完全的根据按钮状态来执行，但这也并不需要操作，因为能看即可

实际上是因为每次的操作，都会进行取反（对应的播放，而切换时，并不会，所以使得出现上面的情况）

为了解决这样的问题，需要加上如下代码：

 //播放课程
    playLesson(lesson) {
      //将对应的播放视频变成我点击的视频
      this.lessonid = lesson.id; //修改对应的id，一般用来操作前面的样式
      this.myvideo.src = lesson.courseMedia.fileEdk //将地址进行改变，使得视频也改变
      //这里并不需要循环，就如循环里说的，使用现成的即可
      this.myvideo.play();
      this.isplay = true //呈现播放状态
        //使得重置为执行视频（只是对应的状态，即显示样式的确定），因为上面的就是需要执行视频
        //这一就可以操作了，具体可以看对应的代码
        

    },
1
2
3
4
5
6
7
8
9
10
11
12
13

对应的我们的显示控制面板可能是有问题的（位置与点击不同，如播放按钮）

若不使用这个面板，可以使得自带的控制面板，代码如下：

 mounted() {
    this.myvideo = document.getElementById("myvideo");
    this.myvideo.controls = true //显示对应的控制面板
    this.initplay() //初始化播放的视频，即当我到达这个页面，要播放的是对应的那个视频，基本不会是其他的视频
  },
1
2
3
4
5

接下来删除对应的面板：

找到对应的div，其他的代码删除掉即可，这一就使用对应的控制面板了（video自带的），而不是使用我们自己操作的

 <div
     id="player-video-vontainer"
        class="player-container video-container"
   >
              
                <video
                  style="width: 100%; height: 100%;"
                  id="myvideo"
  src="https://video.pearvideo.com/mp4/adshort/20200901/cont-1693694-15359233_adpkg-ad_hd.mp4"
                  @canplay="getInit"
                  @timeupdate="handlerNowTime"
      />
               
     div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

可能对应的视频是没有的，所以需要判断：

 //播放课程
    playLesson(lesson) {
      if(lesson.courseMedia!=null){ //只要没有对应的视频，那么就不会有任何操作，并给出提示
          //之所以还需要判断，是因为虽然从课程那里过来时，不可点击
          //但可以点击其他的进入，所以需要判断，除非你进行验证删除，但是这时非常麻烦的
          //所以基本不做考虑，且不符合实际（因为我已经买了课，需要显示出来）
      //将对应的播放视频变成我点击的视频
      this.lessonid = lesson.id; //修改对应的id，一般用来操作前面的样式
      
      this.myvideo.src = lesson.courseMedia.fileEdk //将地址进行改变，使得视频也改变
      //这里并不需要循环，就如循环里说的，使用现成的即可
      this.myvideo.play();
      this.isplay = true
      }else{
        this.$message.warning("没有该视频")
    
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

但是虽然我们显示了状态，但是也要进行判断，使得对应状态真实起作用，代码如下：

//先修改对应的方法
//第一章的@click="playLesson(1,index,lesson)"
//第二章的@click="playLesson(2,index,lesson)"
1
2
3

最终的修改：

   //播放课程
    playLesson(status,index,lesson) {
      if(lesson.courseMedia!=null){

  //试看的可以跳转播放页面
  if(status == 1 && index<2){

      //将对应的播放视频变成我点击的视频
      this.lessonid = lesson.id; //修改对应的id，一般用来操作前面的样式
      
      this.myvideo.src = lesson.courseMedia.fileEdk //将地址进行改变，使得视频也改变
      //这里并不需要循环，就如循环里说的，使用现成的即可
      this.myvideo.play();
      this.isplay = true
  }else{
    //锁上的先验证是否登录
    if(!this.isLogin){
      this.$message.success("请先登录")
    }else{
      //登录的，再验证是否购买过
      if(!this.isBuy){
        this.$message.warning("请先购买后，进行解锁")
      }else{
         //将对应的播放视频变成我点击的视频
      this.lessonid = lesson.id; //修改对应的id，一般用来操作前面的样式
      
      this.myvideo.src = lesson.courseMedia.fileEdk //将地址进行改变，使得视频也改变
      //这里并不需要循环，就如循环里说的，使用现成的即可
      this.myvideo.play();
      this.isplay = true
          //可以将这个else里面的代码用一个方法包括起来，也可以不用，看你自己如何操作
      }
  }
  }
      }else{
        this.$message.error("播放失败，暂无视频")
    
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

至此播放的操作基本全部编写完毕

接下来我们继续操作留言：

但在这之前，我们需要操作一下后端

因为虽然前面编写后端时，操作了点赞以及点赞总数的操作，但并不能知道对应的赞是谁点的，所以我们需要联查

新增对应的entity项目的entity包下的类：

package com.lagou.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

import java.util.Date;
import java.io.Serializable;

/**
 * 课程留言点赞表(CourseCommentFavoriteRecord)实体类
 *
 * @author makejava
 * @since 2022-07-23 20:26:35
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class CourseCommentFavoriteRecord implements Serializable {
    private static final long serialVersionUID = 159062001487532233L;
    /**
     * 用户评论点赞j记录ID
     */
    private Integer id;
    /**
     * 用户ID
     */
    private Integer userId;
    /**
     * 用户评论ID
     */
    private Integer commentId;
    /**
     * 是否删除，0：未删除（已赞），1：已删除（取消赞状态）
     */
    private Integer isDel;
    /**
     * 创建时间
     */
    private Date createTime;
    /**
     * 更新时间
     */
    private Date updateTime;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

修改对应的CourseComment类：

package com.lagou.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

import java.util.Date;
import java.io.Serializable;

/**
 * 课程留言表(CourseComment)实体类
 *
 * @author makejava
 * @since 2022-07-15 19:48:04
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class CourseComment implements Serializable {
    private static final long serialVersionUID = -11641570368573216L;
    
     //一条留言对应多个点赞
    private List<CourseCommentFavoriteRecord> favoriteRecords;
    
    /**
     * 主键
     */
    private Object id;
    /**
     * 课程id
     */
    private Integer courseId;
    /**
     * 章节id
     */
    private Integer sectionId;
    /**
     * 课时id
     */
    private Integer lessonId;
    /**
     * 用户id
     */
    private Integer userId;
    /**
     * 运营设置用户昵称
     */
    private String userName;
    /**
     * 父级评论id
     */
    private Integer parentId;
    /**
     * 是否置顶：0不置顶，1置顶
     */
    private Integer isTop;
    /**
     * 评论
     */
    private String comment;
    /**
     * 点赞数
     */
    private Integer likeCount;
    /**
     * 是否回复留言：0普通留言，1回复留言
     */
    private Integer isReply;
    /**
     * 留言类型：0用户留言，1讲师留言，2运营马甲 3讲师回复 4小编回复 5官方客服回复
     */
    private Integer type;
    /**
     * 留言状态：0待审核，1审核通过，2审核不通过，3已删除
     */
    private Integer status;
    /**
     * 创建时间
     */
    private Date createTime;
    /**
     * 更新时间
     */
    private Date updateTime;
    /**
     * 是否删除
     */
    private Integer isDel;
    /**
     * 最后操作者id
     */
    private Integer lastOperator;
    /**
     * 是否发送了通知,1表示未发出，0表示已发出
     */
    private Integer isNotify;
    /**
     * 标记归属
     */
    private Integer markBelong;
    /**
     * 回复状态 0 未回复 1 已回复
     */
    private Integer replied;


}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

修改对应的dao层项目的接口（CourseCommentDao）对应的配置文件：


    <resultMap type="com.lagou.entity.CourseComment" id="CourseCommentMap">
        <result property="id" column="id"/>
        <result property="courseId" column="course_id"/>
        <result property="sectionId" column="section_id"/>
        <result property="lessonId" column="lesson_id"/>
        <result property="userId" column="user_id"/>
        <result property="userName" column="user_name"/>
        <result property="parentId" column="parent_id"/>
        <result property="isTop" column="is_top"/>
        <result property="comment" column="comment"/>
        <result property="likeCount" column="like_count"/>
        <result property="isReply" column="is_reply"/>
        <result property="type" column="type"/>
        <result property="status" column="status"/>
        <result property="createTime" column="create_time"/>
        <result property="updateTime" column="update_time"/>
        <result property="isDel" column="is_del"/>
        <result property="lastOperator" column="last_operator"/>
        <result property="isNotify" column="is_notify"/>
        <result property="markBelong" column="mark_belong"/>
        <result property="replied" column="replied"/>

         <collection property="favoriteRecords" 
                     ofType="com.lagou.entity.CourseCommentFavoriteRecord">
            <result property="id" column="ccfr_id"/>
            <result property="userId" column="ccfr_user_id"/>
            <result property="commentId" column="comment_id"/>
            <result property="isDel" column="ccfr_is_del"/>
            <result property="createTime" column="ccfr_create_time"/>
            <result property="updateTime" column="ccfr_update_time"/>
        collection>
    resultMap>

  <select id="getCommentsByCourseId" resultMap="CourseCommentMap">
      
        SELECT
            cc.*,
            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}
    select>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

添加对应dao层项目的TestCourse类里添加测试方法：

   @Test
    public void getCoument(){
        List<CourseComment> commentsByCourseId = courseCommentDao.getCommentsByCourseId(1, 0, 20);
        System.out.println(commentsByCourseId);
        for(CourseComment courseComment: commentsByCourseId ){
            System.out.println("\n"+courseComment.getUserName() +"=>留言：" + 
                               courseComment.getComment());
            for(CourseCommentFavoriteRecord favoriteRecord : courseComment.getFavoriteRecords()){
                System.out.println("-------------->" + favoriteRecord.getUserId() + "点过赞");
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

进行测试，查看是否有对应的点赞数据，若有，且对应，那么操作完成

接下来我们操作赞：

回到Course.vue：

 <div class="message-list-title">
                          <div class="message-list-title-left">
                            <div class="message-list-title-left-name">{{comment.userName}}div>
                            <div class="message-list-title-left-tag">div>
                          div>
                          
                        
                         
     <div v-if='JSON.stringify(comment.favoriteRecords).indexOf("\"userId\":"+user.content.id) >=0 
                && JSON.stringify(comment.favoriteRecords).indexOf("\"isDel\":0") >=0  ' 
          class="message-list-title-right">
                          
                            <img class="message-list-title-right-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAJFBMVEVHcEwAuI4AtIsAtIsAtIoAtYwAtIsAtYwAtowAx5kAtIsAs4qd4c1kAAAAC3RSTlMAGMfz3VGnbTYIhXtDq8EAAAETSURBVDjLldWhb8JAFAbwg8CGhGSGzNQtULNkWUioWbJkpmYKAQaBITPLLKZysmLz+xfolUL6/XM72msh9N2X8ImaX17vrq+vVeqU39XTuK/kdEMA01jGDY4ZyYWFIRPxp0S8u+8KeBJ+WDxIGFrMJbQm7qhVYSJgr8JUwNsKtYDtCiHgPavcsDVDstsuyDk7NeYDk6G8pM3bWXNawQUijWq8QyPPpQy+50ET9bF09go5pus3cMV0feFEc2DfieZRBU7Up7fjSkwZZgz3DA8MHxl6DP8YRgxjgokimDHcMdwyfGG4ZPjJMCKoY4KJIpgz3DHcMvQYFuPpk/005t1mffHlOs/ETvxXAA0Ul3oQHsp/xD93wxfHcC4VkwAAAABJRU5ErkJggg==" alt="">
                            <div class="message-list-title-right-praise">{{comment.likeCount}}div>
                          div>
                          
        <div v-else class="message-list-title-right">
                            <img class="message-list-title-right-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAKlBMVEVHcExnZ2dzc3NmZmZqampmZmZmZmZnZ2dnZ2dnZ2dmZmZoaGhmZmZmZmZl+8SAAAAADXRSTlMA/AbsFtilbj5YwSqJPyESoQAAAZxJREFUOMt1lTtLA1EQha8xRhPTBEmhuKCCoNgoIlYLMcRKBG0sxIUgCDaBSDohEO0FEbQyIBZaBazERvAPWCwxPnP+i3tnrlGTmVPswn73NXNm7hrzq9m9kZ2ckTUUABifkOEBrK7liR7BMRFOA/uFc+BUgnV8mFisEW5IsIFi9FzBuwR91KJnAm8S9EIbxSBeBRZHk86MrBQJWjymJUC3nlugSyk+SQyhANfxos+s4krfM0DZvmbw2cuSCHNGi3PAfUygXYiU79ryyw1ibf0xZ9intBsz6SBadx24iiZXz8kPxCiTtYdLPzKTVFkkLQAZO/VikwYW/x/wHohcT/MiPQE8W9frxJrlbpiw4xvA0vbNmWyhj2Nrhmy+B7nEyTsN0rIaJAc0SDWqwX7rhAYfMa/Dui0bDZbwZAwUGNjWUWActnUUyN2hwDTaOkxRaSiwj6pRhjHKgTazSkWlwBK1jgIpBwrkHCgwyZ0oQ86BAjkHCjziG0KE8YBvCA/5KacOm6sgrHFAotouT6J23bkkLbsNDjM9yt7yP+IbQYga5De+eBMAAAAASUVORK5CYII=" alt="">
                            <div class="message-list-title-right-praise">{{comment.likeCount}}div>
                          div>
                        div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

至此通过对应的关联查询，就解决了对应的用户是否点赞的问题

接下来进行点赞和取消赞的操作：

 <div @click="zan(comment,$event)"
      v-if='JSON.stringify(comment.favoriteRecords).indexOf("\"userId\":"+user.content.id) >=0 
                && JSON.stringify(comment.favoriteRecords).indexOf("\"isDel\":0") >=0  ' 
          class="message-list-title-right">
1
2
3
4

 <div @click="zan(comment,$event)" v-else class="message-list-title-right">
1

 //取消赞和点赞一起的操作（取反）
    zan(comment,th){ 

let a = th.currentTarget.childNodes[0]
for(let i =0;i<comment.favoriteRecords.length;i++){
  let o = comment.favoriteRecords[i];
  if(o.userId == this.user.content.id && o.isDel == 0){

a.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAKlBMVEVHcExnZ2dzc3NmZmZqampmZmZmZmZnZ2dnZ2dnZ2dmZmZoaGhmZmZmZmZl+8SAAAAADXRSTlMA/AbsFtilbj5YwSqJPyESoQAAAZxJREFUOMt1lTtLA1EQha8xRhPTBEmhuKCCoNgoIlYLMcRKBG0sxIUgCDaBSDohEO0FEbQyIBZaBazERvAPWCwxPnP+i3tnrlGTmVPswn73NXNm7hrzq9m9kZ2ckTUUABifkOEBrK7liR7BMRFOA/uFc+BUgnV8mFisEW5IsIFi9FzBuwR91KJnAm8S9EIbxSBeBRZHk86MrBQJWjymJUC3nlugSyk+SQyhANfxos+s4krfM0DZvmbw2cuSCHNGi3PAfUygXYiU79ryyw1ibf0xZ9intBsz6SBadx24iiZXz8kPxCiTtYdLPzKTVFkkLQAZO/VikwYW/x/wHohcT/MiPQE8W9frxJrlbpiw4xvA0vbNmWyhj2Nrhmy+B7nEyTsN0rIaJAc0SDWqwX7rhAYfMa/Dui0bDZbwZAwUGNjWUWActnUUyN2hwDTaOkxRaSiwj6pRhjHKgTazSkWlwBK1jgIpBwrkHCgwyZ0oQ86BAjkHCjziG0KE8YBvCA/5KacOm6sgrHFAotouT6J23bkkLbsNDjM9yt7yP+IbQYga5De+eBMAAAAASUVORK5CYII="
   break;
  }else{

    a.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAJFBMVEVHcEwAuI4AtIsAtIsAtIoAtYwAtIsAtYwAtowAx5kAtIsAs4qd4c1kAAAAC3RSTlMAGMfz3VGnbTYIhXtDq8EAAAETSURBVDjLldWhb8JAFAbwg8CGhGSGzNQtULNkWUioWbJkpmYKAQaBITPLLKZysmLz+xfolUL6/XM72msh9N2X8ImaX17vrq+vVeqU39XTuK/kdEMA01jGDY4ZyYWFIRPxp0S8u+8KeBJ+WDxIGFrMJbQm7qhVYSJgr8JUwNsKtYDtCiHgPavcsDVDstsuyDk7NeYDk6G8pM3bWXNawQUijWq8QyPPpQy+50ET9bF09go5pus3cMV0feFEc2DfieZRBU7Up7fjSkwZZgz3DA8MHxl6DP8YRgxjgokimDHcMdwyfGG4ZPjJMCKoY4KJIpgz3DHcMvQYFuPpk/005t1mffHlOs/ETvxXAA0Ul3oQHsp/xD93wxfHcC4VkwAAAABJRU5ErkJggg=="
  }
 
}
        
        //前面在标签里的判断是为了初始化的显示，这里是为了点击赞或者取消赞时
        //进一步进行解决，因为初始化的判断后面的isDel是代表全部
        //实际上可以通过修改sql语句来进行改变，那样就更加方便了

        //alert("赞和取消赞")
         return this.axios.get("http://localhost:8002/course/comment/Favorite/"+comment.id+
                               "/"+this.user.content.id).then(res => {
        
           //重新获取本课程的全部留言，使得更新数据
     this.getComment()
    }).catch(err =>{
      this.$message.error("点赞失败")
    })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

至此可以通过点击赞进行操作了

对应的sql方式：

<select id="getCommentsByCourseId" resultMap="CourseCommentMap">
        SELECT
            cc.*,
            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 
    (select * from course_comment_favorite_record where is_del =0) 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}
    
    
    select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

对应的html：

  <div @click="zan(comment)" 
       v-if='JSON.stringify(comment.favoriteRecords).indexOf("\"userId\":"+user.content.id) >=0'  
       class="message-list-title-right">
1
2
3

   <div @click="zan(comment)" v-else class="message-list-title-right">
1

 zan(comment){ 

        //alert("赞和取消赞")
         return this.axios.get("http://localhost:8002/course/comment/Favorite/"+comment.id+
                               "/"+this.user.content.id).then(res => {
        
           //重新获取本课程的全部留言，使得更新数据
     this.getComment()
    }).catch(err =>{
      this.$message.error("点赞失败")
    })
    },
1
2
3
4
5
6
7
8
9
10
11
12

发现，只需要改变一下sql，那么代码就省略了很多，实际上sql对数据的操作更加接近，而程序一般会通过很多逻辑进行改变

所以若可以使用sql进行优化的，最好考虑sql，即在优化前，sql最好优先考虑

点赞操作完成了，接下来我们操作留言的发表

<button class="message-edit-btn disableBg" @click="saveComment">发表留言button>
1

 <div class="message-edit">
              
               <textarea rows="20" style="border:none;resize: none;" 
                contenteditable="true"
                placeholder="分享学习心得、思考感悟或者给自己一个小鼓励吧！"
                class="edit-div pcStyle"
                          v-model="comment"
              >textarea>
              <div class="message-edit-count">
                <span class="message-edit-count-cur">0span>
                <span class="message-edit-count-max">/2000span>
              div>
            div>
1
2
3
4
5
6
7
8
9
10
11
12
13

data() {
    return {
      comment:null, //待发表的留言内容
      activeName: "intro",
      course:null,
      totalLessons:0, //本门课程的总节数
      commentList:null, //所有留言
      isLogin:false, //false，未登录
      isBuy:false,//未购买
      user:null, //当前用户，{}对象可以","结尾
      myCourseList:[], //当前用户购买过的所有课程
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

 //发表留言
    saveComment(){
 return this.axios.get("http://localhost:8002/course/comment/saveCourseComment",{
   params:{
     courseid:this.course.id,
     userid:this.user.content.id,
     username:this.user.content.name,
     comment:this.comment,
  


   }
 }).then(res => {     
      //重新获取本课程的全部留言，使得更新数据
     this.getComment()
    }).catch(err =>{
      this.$message.error("发表留言失败")
    })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们需要修改后端的代码：

 @GetMapping("comment/saveCourseComment")
    public Object saveCourseComment(Integer courseid,Integer userid,String username,String comment) 
        throws UnsupportedEncodingException {
        System.out.println(new String(username.getBytes("ISO-8859-1")));
     System.out.println(new String(comment.getBytes("ISO-8859-1")));

        username = new String(username.getBytes("ISO-8859-1"),"UTF-8");
        comment = new String(comment.getBytes("ISO-8859-1"),"UTF-8");
        //解决get情况中，传递过来的乱码问题，因为get默认是ISO-8859-1的操作
        //一般来说，get请求会设置成识别中文，而post不会
        //假设若由于版本，服务器或者框架的影响，使得不能识别（一般是服务器问题，即版本问题）
        //也就是默认使用ISO-8859-1编码
        //一般tomcat8及其以后就不需要了
        //那时get会设置成对应的中文识别，也可以说，设置了UTF-8，但低版本的还是默认ISO-8859-1
        //这里好像使用的是tomcat7，所以是默认操作ISO-8859-1
        //即这时，我们需要使用ISO-8859-1进行变成对应的中文
        //然后设置操作UTF-8，虽然并不需要设置，好像的默认的，但也要防止默认识别不了中文
        //这里之所以会这样，与当前的框架或则版本，以及前端可能都有关系，因为一般的get不会出现乱码
        //而乱码主要是对应的编码方式不一致的缘故，无论是什么情况，只要编码一致即可


        CourseComment courseComment = new CourseComment();
        courseComment.setCourseId(courseid); //课程编号
        //这里写为0，因为我们的留言只操作对应的课程，章节和小节并没有操作
        //所以这样的操作，我们称为预留字段
        //即在后面的版本中（如更新版本）进行执行，现在默认写为0，虽然写其他的也可
        courseComment.setSectionId(0); //章节编号，预留字段
        courseComment.setLessonId(0); //小节编号，预留字段
        courseComment.setUserId(userid); //用户编号
        courseComment.setUserName(username); //用户昵称
        courseComment.setParentId(0); //没有父id，预留字段
        courseComment.setComment(comment); //留言内容
        courseComment.setType(0); //0：用户留言，预留字段
        courseComment.setLastOperator(courseid); //最后操作的用户编号
        Integer integer = commentService.saveComment(courseComment);
        return integer;



    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

这时我们进行发表留言，发现，的确有对应的数据了

相关阅读:
版本控制Git
怎么画深度优先生成树和广度优先生成树【简答题】
中国移动杭州公司——亚运会网络运行保障系统
 VRRP（虚拟路由器冗余协议）标准协议工作机制与优势介绍
 本地Java代码打成镜像提交到K8S部署
 Prometheus部署
 [资源推荐]langchain、LLM相关
 Flutter笔记：桌面端应用多窗口管理方案
 vim配置与使用
 面试官：设计模式是什么？
原文地址：https://blog.csdn.net/qq_59609098/article/details/126061189