Skip to main content

使用模板显示首页数据

现在我们已经向api/movie/这个接口发送了请求，并且获取到了这些响应数据。响应数据就是我们在请求接口中看到的，以列表形式包含的，然后是一个一个的字典。接下来我们需要把这些数据显示到我们的页面上。按照我们传统的Django项目的流程，我们需要使用一些Django的模板技术，使用循环、使用判断等等这些模板的常用知识来实现这样的功能。

那其实对于我们的Vue也是一样的，它也有模板。在我们的Vue中，这里也有很多模板的标签和我们的Django非常非常类似。所以大家在学习的时候可以对比着来进行学习。

图18-django和vue

好，接下来我们就看一下，在Vue中如何在模板中显示我们这些数据。因为显示数据的时候，我们要对它进行一个遍历，一个一个来获取，然后获取这些电影的详细信息，包括名称啊、包括发布时间啊等等。所以接下来我们就来看一下Vue中的模板是怎么实现的。

在文档中，这里有模板语法，那这些模板最常用的语法无外乎就是赋值。赋值的时候，它使用的是两个大括号，和我们的Django一样。最常用的2个，v-for，用于循环，V-if用于判断。

在MovieList.vue文件中，通过请求'/api/movie/'接口得到的接口数据如下：

[
        {
            "id": 2,
            "movie_name": "人生大事",
            "release_year": 2022,
            "director": "刘江江",
            "scriptwriter": "刘江江",
            "actors": "朱一龙/杨恩又/王戈/刘陆/罗京民",
            "region": 1,
            "types": "剧情/家庭",
            "language": "汉语普通话",
            "release_date": "2022-06-24",
            "duration": "112分钟",
            "alternate_name": "Lighting Up The Stars / Funeral Family",
            "image_url": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2874262709.jpg",
            "rate": 7.3,
            "review": "殡葬师莫三妹（朱一龙 饰）在刑满释放不久后的一次出殡中，遇到了孤儿武小文（杨恩又 饰），小文的出现，意外地改变了莫三妹对职业和生活的态度。",
            "is_hot": false,
            "is_top": false,
            "quality": 2,
            "subtitle": "",
            "update_info": "",
            "update_progress": "",
            "download_info": "百度网盘:http://www.baidu.com 提取码:8888",
            "is_show": true,
            "is_free": false,
            "category": 1
        },
      
      ...
   ]

而我们使用v-for遍历电影信息，所以需要遍历的是info,所以我们使用下面的语句:

v-for="movie in info" :key="movie.id"

这行代码是Vue框架中的一个常见模式，用于渲染一个列表或一组元素。详细来说：

  1. v-for="movie in info.results"：

    • v-for 是Vue中的一个指令，用于基于源数据多次渲染元素或模板块。
    • 在这个例子中，movie in info.results 表示对 info.results 数组进行遍历。数组的每个元素都会被临时命名为 movie，然后在 v-for 所在的元素或模板块中可以访问到。
    • 这意味着对于 info.results 数组中的每个对象，Vue都会复制 v-for 所在的 HTML 结构一次，每次复制时都会把数组中的一个对象赋给 movie，以便在HTML结构中使用。

  2. :key="movie.id"：

    • :key 是Vue中处理列表渲染的一个重要概念。当Vue渲染使用 v-for 的列表时，它使用一种默认的策略来更新列表的DOM，这种策略是尽可能高效的重用元素。
    • 为了给Vue一个提示，帮助它跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性（通常是数据项的一个唯一ID）。
    • 在这个例子中，:key="movie.id" 意味着每个通过 v-for 创建的元素都会绑定一个唯一的 key，其值为当前迭代的 movie 对象的 id 属性。这有助于Vue进行高效的DOM更新。

综上所述，这行代码告诉Vue：对 info.results 数组中的每个 movie 对象，复制一次模板内容，并为每次复制的内容使用 movie.id 作为唯一的 key。这种方式不仅可以渲染出一个列表，还能优化Vue的渲染性能。

通过遍历获取的movie就是每一个电影的信息，然后我们通过具体的属性，就可以获取对应值了，比如

{{ movie.movie_name }}可以获取电影的名字。{{ movie.release_year }}可以获取电影的上映年份。

接下来，修改MovieList.vue文件，来获取所有电影，代码如下:

frontend/src/components/MovieList.vue
<template>
    <div class="flex items-center justify-center">
      <div class="w-full px-2" style="max-width:1440px;">
        <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" :key="movie.id">
                <a href="#"> 
                    <div class="relative">
                        <div class="" style="min-height: 259px; max-height: 300px;height: 274px;" >
                        <img :src="movie.image_url" alt="" class="rounded h-full w-full" referrerPolicy="no-referrer">
                        </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>
</template>

<script>
import axios from 'axios'

// 省略代码

</script>

代码解析

这段Vue模板代码主要用于展示一个电影列表。重点解释 v-for 和 v-if 这两个Vue指令：

  1. v-for 指令：

    • 在这个模板中，v-for="movie in info.results" 被用于遍历 info.results 数组。每个数组元素都被临时命名为 movie，然后用于生成电影列表中的每一项。
    • 对于数组中的每一个 movie 对象，都会创建一个包含电影信息的 <div class="movie"> 元素。
    • v-for 还用了 :key="movie.id" 来给每个循环的项目指定一个独特的键值。这是Vue中一个重要的性能优化，可以帮助Vue更高效地更新DOM。

  2. v-if 和 v-else-if 指令：

    • 这些指令被用于根据电影的某些属性条件性地显示或隐藏HTML元素。
    • <div v-if="movie.is_top">置顶</div>：这里 v-if 检查 movie.is_top 是否为真。如果为真，就会显示这个 <div> 元素（一个显示“置顶”的标签）。否则，这个元素不会被添加到DOM中。
    • <div v-if="movie.quality==1">720p</div>、<div v-else-if="movie.quality==2">1080p</div>、<div v-else-if="movie.quality==3">4K</div>：这些行用于根据 movie.quality 的值显示电影质量。v-if 和 v-else-if 确保只有当特定条件满足时，对应的标签（720p, 1080p, 4K）才会显示。

总的来说，这段代码通过 v-for 在页面上列出了电影，而 v-if 和 v-else-if 则用于根据电影的属性显示特定的信息，比如是否置顶或电影的质量等级。这种方式使得最终用户界面非常动态且富有信息，提供了良好的用户体验。

运行效果如下图所示。

图18-首页效果