50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | MovieApp（电影卡片组件）

📅 我们继续 50 个小项目挑战！—— MovieApp组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

使用 Vue 3 的 Composition API 和 <script setup> 语法结合 TailwindCSS 构建一个电影信息展示组件。该组件将从 TMDb 获取热门电影数据，并支持通过关键词进行搜索，点击卡片还能查看影片简介。

🎯 组件目标

• 展示从 TMDb 接口获取的热门电影列表
• 支持用户输入关键词搜索电影
• 每张电影卡片包含封面图、标题、评分和上映日期
• 点击卡片时显示电影概要
• 使用 TailwindCSS 快速构建现代 UI 界面

⚙️ 技术实现点

🧱 组件实现

模板结构 <template>

<template>
    <div class="relative h-16 bg-gray-900">
        <input
            type="text"
            class="absolute top-3 right-3 h-10 rounded-2xl bg-gray-600 p-2"
            placeholder="Search"
            v-model="searchTerm" />
    </div>
    <div class="flex flex-wrap items-center justify-center gap-6 p-4">
        <div
            v-for="item in movies"
            :key="item.id"
            class="group relative flex-1/6 overflow-hidden bg-white transition-all duration-300 hover:shadow-lg">
            <img :src="IMG_PATH + item.poster_path" alt="" class="h-4/6 w-full object-cover" />
            <div class="p-2">
                <div class="text-lg font-bold">{{ item.title }}</div>
                <div class="text-sm text-gray-500">{{ item.release_date }}</div>
                <div class="text-sm text-gray-500">{{ item.vote_average }}</div>
            </div>
            <!-- 影片概要滑出区域 -->
            <div
                class="absolute right-0 bottom-0 left-0 translate-y-full transform overflow-y-auto bg-white p-4 transition-transform duration-300 ease-out group-hover:translate-y-0">
                <div class="mb-4 font-mono text-2xl">Overview</div>
                <div class="font-mono text-gray-700">
                    {{ item.overview || 'No overview available' }}
                </div>
            </div>
        </div>
    </div>
</template>

脚本逻辑 <script setup>

<script setup>
import { ref, onMounted } from 'vue'

const movies = ref([])
const searchTerm = ref('')
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
const API_URL =
    'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
const SEARCH_API =
    'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query='

const getMovies = async (searchTerm = '') => {
    const url = searchTerm ? `${SEARCH_API}${searchTerm}` : API_URL
    try {
        const response = await fetch(url)
        if (!response.ok) throw new Error('Network response was not ok')
        const data = await response.json()
        movies.value = data.results
    } catch (error) {
        console.error('Fetch error:', error)
        movies.value = []
    }
}

onMounted(() => getMovies())
</script>

🔍 重点效果实现

✅ 电影数据加载

我们通过调用 TMDb 提供的 API 加载热门电影数据：

const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=...'

并在 onMounted() 生命周期中加载初始数据：

onMounted(() => getMovies())

🔍 搜索功能实现

通过监听输入框的 v-model 并触发搜索函数：

<input v-model="searchTerm" @input="getMovies(searchTerm)" />

🖼️ 图片路径拼接

每部电影的图片地址为相对路径，需要拼接基础 URL：

<img :src="IMG_PATH + item.poster_path" />

📝 卡片悬停动画

使用 Tailwind 的 group-hover 类实现在鼠标悬停时滑出电影简介：

<div class="absolute ... group-hover:translate-y-0">

🎨 TailwindCSS 样式重点讲解

这些 Tailwind 工具类帮助我们快速构建了一个视觉丰富、交互性强的电影卡片展示界面。

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{
        id: 17,
        title: 'Movie App',
        image: 'https://50projects50days.com/img/projects-img/17-movie-app.png',
        link: 'MovieApp',
    },

router/index.js 中添加路由选项：

{
        path: '/MovieApp',
        name: 'MovieApp',
        component: () => import('@/projects/MovieApp.vue'),
    },

🏁 总结

这个电影卡片展示组件不仅是一个优秀的学习项目，也非常适合用于实际应用中，如影视推荐网站、个人观影记录页面等。它涵盖了 Vue 3 的异步请求、响应式数据绑定、条件渲染以及 TailwindCSS 的灵活样式组合能力。

你可以进一步扩展的功能包括：

• 添加分页加载更多电影
• 显示电影评分星级或颜色标签
• 支持收藏电影功能（本地存储）
• 添加电影详情跳转链接
• 支持暗色主题切换

感谢阅读，欢迎点赞、收藏和分享 😊

👉 下一篇，我们将完成BackgroundSlider组件，一个非常具有现代风格的手动轮播组件！🚀