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

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

添加收藏按钮

首先，我们需要为“添加收藏”按钮添加一个事件，并给它命名为“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 
      }
    },

如果已登录，我们需要判断当前的收藏状态，根据状态来执行收藏或取消收藏操作。this.collectstatus用来保存当前的收藏状态，如果为true，表示已经收藏了。

frontend/src/views/MovieDetail.vue

      if (this.collectStatus) {
        this.cancle_collect_movie(movie_id)
      }
      else {
        this.collect_movie(movie_id)
      }

接下来，我们来实现这两个方法。首先是收藏功能，我们需要向服务器的收藏接口发起请求，传递movie_id参数。请求方式为POST。

对于收藏接口的返回值，我们需要判断message的值来更新状态和向用户展示消息。

对于取消收藏功能，代码逻辑和收藏功能类似，我们可以直接复制收藏函数，并修改接口URL和请求方法为DELETE。

frontend/src/views/MovieDetail.vue

<script>
import axios from "axios";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import showMessage from "@/utils/message.js";

export default {
  name: "MovieDetail",
  data() {
    return {
      movie: {},
      collectStatus: false,
      collectMessage: "",
    };
  },
  components: { Header, Footer },
  mounted() {
    this.get_movie_info();
    // 判断一下用户是否登录
    if (!this.$store.state.isLogin) {
      this.collectStatus = false;
      this.collectMessage = "添加收藏";
    } else {
      const movie_id = this.$route.params.id;
      this.get_collect_status(movie_id);
    }
  },
  methods: {
    get_movie_info: function () {
      axios
        .get("/api/movie/" + this.$route.params.id)
        .then((response) => (this.movie = response.data));
    },
    // 获取收藏状态
    get_collect_status(movie_id) {
      axios
        .get("/api/collects/" + movie_id + "/is_collected/", {
          headers: {
            Authorization: "JWT " + localStorage.getItem("token"),
          },
        })
        .then((response) => {
          this.collectStatus = response.data.is_collected;
          if (this.collectStatus) {
            this.collectMessage = "取消收藏";
          } else {
            this.collectMessage = "添加收藏";
          }
        });
    },
    // 收藏或取消收藏
    collect_or_cancle(movie_id) {
      if (!this.$store.state.isLogin) {
        showMessage("请先登录", "error", () => {
          this.$router.push({
            name: "Login",
          });
        });
        return;
      }
      if (this.collectStatus) {
        this.cancle_collect_movie(movie_id);
      } else {
        this.collect_movie(movie_id);
      }
    },

    // 收藏电影
    collect_movie(movie_id) {
      axios
        .post(
          "/api/collects/",
          { movie_id: movie_id },
          {
            headers: {
              Authorization: "JWT " + localStorage.getItem("token"),
            },
          }
        )
        .then((response) => {
          const status_code = response.data.status_code;
          const message = response.data.message;
          if (status_code === 0) {
            this.collectStatus = true;
            this.collectMessage = "取消收藏";
            showMessage(message, "info");
          } else {
            showMessage(message, "error");
          }
        })
        .catch((error) => {
          showMessage("收藏失败");
        });
    },

    // 取消收藏
    cancle_collect_movie(movie_id) {
      axios
        .delete("/api/collects/" + movie_id + "/", {
          headers: {
            Authorization: "JWT " + localStorage.getItem("token"),
          },
        })
        .then((response) => {
          const status_code = response.data.status_code;
          const message = response.data.message;
          if (status_code === 0) {
            this.collectStatus = false;
            this.collectMessage = "添加收藏";
            showMessage(message, "info");
          } else {
            showMessage(message);
          }
        })
        .catch((error) => {
          showMessage("取消收藏失败");
        });
    },
  },
};
</script>

上面的代码和前面的学习的内容基本一致，这里就不再赘述。

warning

注意请求接口时，需要在headers中携带token。

如果没有登录，会提示去登录，然后跳转到登录页。如下图所示。

登录成功后，点击“添加收藏”按钮，登录成功。如下图所示。

取消收藏效果如下图所示。

这样，我们就完成了添加收藏和取消收藏功能的实现。

下一节课我们将继续介绍其他功能，敬请期待！