添加注释 README

README.md

@@ -1,3 +1,13 @@
+# 第二阶段任务
+
+## 实现课程的点赞和取消点赞
+
+目前学生的课程列表界面中，可以展示热门课程，课程的点赞数量，和一个点赞按钮，点赞按钮同时承担了点赞与取消点赞的功能
+
+在 src/views/student/CourseList.vue 中的 setLikeOrDislike() 方法中进行代码填写，具体的操作步骤可以去方法中查看注释
+
+注意前端项目中的接口定义可能不全，因此自己要仿照已有接口来定义缺失的接口；后端也需要添加相应接口来完成任务
+
 # course-learning
 
 ## Project setup
@@ -54,4 +64,4 @@ See[Vue Router](https://router.vuejs.org/)
 本demo使用了CSS框架Vuetify，同学们不必在意，可自行选用CSS框架、组件库或自己实现样式。
 
 参考
-[Vue官方文档](https://cn.vuejs.org/)
+[Vue官方文档](https://cn.vuejs.org/)

src/views/student/CourseList.vue

@@ -31,7 +31,7 @@
           :course-color="colorList[course.id % colorList.length]"
           :course-likes="course.likes"
           @buy-course="showDialog"
-          @set-like="setLike"
+          @set-like="setLikeOrDislike"
         >
         </course-item>
       </v-row>
@@ -75,7 +75,7 @@
                     :course-color="colorList[course.id % colorList.length]"
                     :course-likes="course.likes"
                     @buy-course="showDialog"
-                    @set-like="setLike"
+                    @set-like="setLikeOrDislike"
                   >
                   </course-item>
                 </v-row>
@@ -129,7 +129,7 @@
           :course-color="colorList[course.id % colorList.length]"
           :course-likes="course.likes"
           @buy-course="showDialog"
-          @set-like="setLike"
+          @set-like="setLikeOrDislike"
         >
         </course-item>
       </v-row>
@@ -176,7 +176,7 @@
           :course-color="colorList[course.id % colorList.length]"
           :course-likes="course.likes"
           @buy-course="showDialog"
-          @set-like="setLike"
+          @set-like="setLikeOrDislike"
         >
         </course-item>
       </v-row>
@@ -466,21 +466,33 @@ export default {
         });
       }
     },
-
-    setLike(courseId) {
+    // 该方法绑定到了课程卡牌的心形按钮上
+    setLikeOrDislike(courseId) {
       const uid = window.localStorage.getItem("userId");
+      // 通过一个接口来获取该用户对当前课程的点赞情况，根据结果进入不同的分支
+      // TODO Add your code here
+
+      // 分支1：若当前用户没有对该课程点赞则调用点赞接口
       setCourseLike(uid, courseId).then(res => {
         if (res.code === 1) {
+          //点赞成功，设置提示条的内容，颜色，并显示
           this.snackBarMsg = res.msg;
           this.snackBarColor = "success";
           this.showSnackBar = true;
+          // 点赞成功后，课程的点赞数会变化，也会影响热门课程的排序，因此调用以下方法更新页面中的数据
           this.fetchData();
         } else {
+          // 点赞失败，设置提示条的内容、颜色，并显示。目前这里显示的内容是： 点赞失败、请勿重复点赞。
+          // 如果你的代码实现正确（以及后端代码） 应当不会出现这种情况。
+          // 原因是在重复点赞前，你应当在这里已经判断出点过赞，因此应当跳转到分支2去执行取消点赞的逻辑
           this.snackBarMsg = res.msg;
           this.snackBarColor = "warning";
           this.showSnackBar = true;
         }
       });
+
+      // 分支2：若当前用户已经为该课程点过赞了，则调用取消点赞接口完成相关操作，可以仿照分支1的示例进行
+      // TODO Add your code here
     },
     confirmPayment() {
       this.settleDialog = false;