添加收藏和取消收藏页面实现

本节课程中，我们将介绍如何实现添加收藏和取消收藏功能。当用户未登录时，点击“添加收藏”按钮应该跳转到登录页面进行登录。只有登录后才能实现收藏和取消收藏操作。

添加收藏按钮

首先，我们需要为“添加收藏”按钮添加一个事件，并给它命名为“collect_or_cancle()”。点击按钮时，我们需要传递一个movie_id参数，可以通过前面的Movie对象的Movie.id属性来获取。代码如下：

frontend/src/views/MovieDetail.vue

<button
  v-on:click="collect_or_cancle(movie.id)"
  id="collect"
  :class="collectStatus ? 'bg-gray-500' : 'bg-blue-500'"
  class="copy text-white w-full px-4 py-1 mt-2 text-sm rounded border"
>
  {{ collectMessage }}
</button>

实现添加收藏逻辑

接下来，我们需要实现这个函数。首先判断当前用户是否已登录，可以使用this.$store.state.isLogin来判断。如果未登录，提示“请先登录”，并跳转到登录页。

frontend/src/views/MovieDetail.vue

    // 收藏或取消收藏
    collect_or_cancle(movie_id){
      if(!this.$store.state.isLogin) {
        showMessage('请先登录','error', ()=> {
          this.$router.push({
            name: 'Login'
          })
        })
        return 
      }
    },

🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情