电影收藏列表页面实现

我们收藏了很多电影，那么就需要设计一个收藏电影的列表。当点击“我的收藏”时，展示这些所收藏的电影。 本节我们就来实现这个功能。

添加菜单和路由

首先，在页面的下拉菜单中添加一个"我的收藏"选项，并且为其创建一个路由。用户点击"我的收藏"时，将跳转到收藏列表页面。

在 header.vue 中，找到下拉菜单，并添加一个菜单项 "我的收藏"，让其跳转到 /collect 路由。代码如下：

frontend/src/components/Header.vue

<ul class="bg-primary-700 py-2 px-4 text-sm">
  <li class="plx-2 py-2">
    <a href="/personal">个人中心</a>
  </li>
  <li class="plx-2 py-2">
    <a href="/collect">我的收藏</a>
  </li>
  <li class="plx-2 py-2">
    <router-link to="/" v-on:click.prevent="logout()">退出</router-link>
  </li>
</ul>

然后，在前端路由中的 index.js 文件中，添加一个名为 "Collect" 的路由，并且设置为需要用户登录才能访问。代码如下：

frontend/src/router/index.js

import Collect from '../views/Collect.vue'

  {
    path: "/collect",
    name: "Collect",
    component: Collect,
    meta: {
      requireLogin: true
    }
  },

创建收藏列表页面

在 views 目录下创建一个新的文件 Collect.vue，用于展示收藏的电影。

将收藏列表页面的模板复制到 Collect.vue 文件中。

Collect.vue代码如下：

frontend/src/views/MovieDetail.vue

<template>
  <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
    <Header />
    <div id="main" class="bg-primary-300 p-6 text-black">
      <div class="rounded bg-white mx-4 my-4 py-6">
        <div class="px-6">
          <h1 class="text-lg font-semibold">我的收藏</h1>
        </div>
      </div>
      <div class="rounded bg-white mx-4 mt-4 py-6">
        <div v-if="info">
          <div
            id="movie-list"
            class="p-2 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"
          >
            <div class="movie" v-for="movie in info">
              <a :href="'/movie/' + movie.id">
                <div class="relative">
                  <div v-if="movie.image_url" class="cover">
                    <img :src="movie.image_url" alt="" class="rounded h-full w-full" />
                  </div>
                  <div v-else>
                    <img
                      src="@/assets/images/nopicture.jpg"
                      alt=""
                      class="rounded h-full w-full"
                    />
                  </div>
                  <div
                    v-if="movie.is_top"
                    class="rounded absolute top-0 bg-purple-600 px-1 text-sm"
                  >
                    置顶
                  </div>
                  <div
                    v-if="movie.quality === 1"
                    class="rounded absolute bottom-0 right-0 bg-blue-500 px-1 text-sm"
                  >
                    720p
                  </div>
                  <div
                    v-else-if="movie.quality === 2"
                    class="rounded absolute bottom-0 right-0 bg-blue-500 px-1 text-sm"
                  >
                    1080p
                  </div>
                  <div
                    v-else-if="movie.quality === 3"
                    class="rounded absolute bottom-0 right-0 bg-blue-500 px-1 text-sm"
                  >
                    4k
                  </div>
                </div>
                <p>{{ movie.movie_name }}({{ movie.release_year }})</p>
                <p class="text-sm text-primary-200">{{ movie.language }}</p>
              </a>
            </div>
          </div>
        </div>
        <div v-else class="text-center text-2xl">暂无收藏电影</div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import axios from "axios";

export default {
  name: "Collect",
  data: function () {
    return {
      info: "",
    };
  },
  components: { Header, Footer },
  mounted() {
    this.get_cellect_movie();
  },
  methods: {
    get_cellect_movie() {
      const accessToken = window.localStorage.getItem("token");
      axios
        .get("/api/collects/", {
          headers: {
            Authorization: "JWT " + localStorage.getItem("token"),
          },
        })
        .then((response) => {
          this.info = response.data;
          console.log(this.info);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

展示页面中的电影列表时，我们需要调用一个获取收藏列表的接口。这个接口是一个 GET 请求，需要在请求的 Header 中添加一个名为 "Authorization" 的参数。

获取到收藏列表后，我们将其赋值给页面中的 info 变量。如果请求过程发生异常，我们需要打印出错误信息。

接下来，我们使用 v-if 来判断是否存在收藏列表。如果存在，则展示电影列表；如果不存在，则提示暂无收藏电影。

使用 v-for 对收藏列表进行遍历，获取电影的各种信息，并将其展示在页面上。

当用户取消收藏一个电影后，在收藏列表页面中也需要及时更新。

运行效果如下图所示。

总结

通过以上步骤，我们实现了一个电影收藏列表页面。用户登录后，可以在页面中查看自己收藏的电影，并且可以取消收藏。