前端--电影网站

🎬 Movie Hub：基于Vue3的现代化电影网站项目

一个使用Vue 3构建的现代化电影介绍网站，提供电影浏览、搜索、收藏和用户管理功能。项目采用Element Plus UI框架，实现了响应式设计和丰富的交互效果。

在线预览电影网站

📖 目录

• 项目简介
• 技术栈
• 功能特点
• 项目结构
• 安装与运行
• 核心功能实现
• 设计亮点
• 项目展示
• 总结

🌟 项目简介

Movie Hub是一个全功能的电影信息展示平台，旨在为用户提供便捷的电影浏览、搜索和收藏体验。项目采用前后端分离架构，前端使用Vue 3框架开发，实现了丰富的用户交互和精美的界面设计。

🛠️ 技术栈

✨ 功能特点

🎬 电影浏览

• 丰富的电影库展示
• 详细的电影信息页面
• 精美的电影卡片设计
• 电影分类浏览

🔍 智能搜索

• 按电影名称快速搜索
• 按演员名称搜索
• 高级筛选功能
• 实时搜索建议

⭐ 收藏系统

• 用户登录后可收藏电影
• 个人收藏列表管理
• 收藏状态持久化存储
• 收藏数量统计

👤 用户管理

• 用户注册和登录
• 密码找回功能
• 个人中心页面
• 用户信息管理

🎨 界面设计

• 响应式布局适配
• 现代化UI设计
• 流畅的动画效果
• 渐变色彩主题

📁 项目结构

movie-hub/
├── public/ # 静态资源目录
│ ├── favicon.ico # 网站图标
│ └── 电影封面/ # 电影海报图片资源
├── src/ # 源代码目录
│ ├── assets/ # 项目资源文件
│ │ ├── base.css # 基础样式
│ │ ├── image.png # 图片资源
│ │ └── main.css # 主样式文件
│ ├── components/ # 可复用组件
│ │ └── MovieCard.vue # 电影卡片组件
│ ├── router/ # 路由配置
│ │ └── index.js # 路由定义文件
│ ├── stores/ # Pinia状态管理
│ │ └── favorites.js # 收藏状态管理
│ ├── utils/ # 工具函数
│ │ └── userStorage.js # 用户存储工具
│ ├── views/ # 页面组件
│ │ ├── AboutView.vue # 关于页面
│ │ ├── ForgotPasswordView.vue # 忘记密码页面
│ │ ├── HomeView.vue # 首页
│ │ ├── LoginView.vue # 登录页面
│ │ ├── MoviesView.vue # 电影列表页面
│ │ ├── RegisterView.vue # 注册页面
│ │ ├── UserView.vue # 用户中心页面
│ │ └── movies/ # 电影详情相关页面
│ ├── App.vue # 根组件
│ ├── main.js # 应用入口文件
│ └── mock-movies.js # 模拟电影数据
├── index.html # HTML模板文件
├── package.json # 项目配置文件
└── vite.config.js # Vite配置文件

🚀 安装与运行

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0

安装步骤

git clone https://github.com/iue2002/movie-hub.git
cd movie-hub

npm install

npm run dev

npm run build

npm run preview

💻 核心功能实现

首页轮播实现

首页使用Element Plus的Carousel组件实现电影轮播展示：

<template>
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item v-for="movie in carouselMovies" :key="movie.id">
<img :src="movie.cover" :alt="movie.title" class="carousel-image">
<div class="carousel-overlay">
<h3>{{ movie.title }}</h3>
<p>{{ movie.description }}</p>
</div>
</el-carousel-item>
</el-carousel>
</template>

电影卡片组件

MovieCard组件是项目的核心UI组件，用于展示电影信息：

<template>
<el-card class="movie-card" @click="goToDetail(movie.id)">
<img :src="movie.cover" class="movie-cover" :alt="movie.title">
<div class="movie-info">
<h3 class="movie-title">{{ movie.title }}</h3>
<div class="movie-meta">
<span class="movie-rating">⭐ {{ movie.rating }}</span>
<span class="movie-year">{{ movie.year }}</span>
</div>
<el-button
v-if="isAuthenticated"
@click.stop="toggleFavorite(movie)"
:type="isFavorite(movie.id) ? 'danger' : 'default'"
size="small"
class="favorite-btn"
>
{{ isFavorite(movie.id) ? '已收藏' : '收藏' }}
</el-button>
</div>
</el-card>
</template>

状态管理

使用Pinia管理用户收藏状态：

import { defineStore } from 'pinia'

export const useFavoritesStore = defineStore('favorites', {
state: () => ({
favorites: []
}),
actions: {
addToFavorites(movie) {
if (!this.isFavorite(movie.id)) {
this.favorites.push(movie)
this.saveFavorites()
}
},
removeFromFavorites(movieId) {
this.favorites = this.favorites.filter(movie => movie.id !== movieId)
this.saveFavorites()
},
isFavorite(movieId) {
return this.favorites.some(movie => movie.id === movieId)
},
saveFavorites() {
localStorage.setItem('favorites', JSON.stringify(this.favorites))
},
loadFavorites() {
const saved = localStorage.getItem('favorites')
if (saved) {
this.favorites = JSON.parse(saved)
}
}
}
})

🎨 设计亮点

渐变色彩设计

项目采用现代渐变色彩方案，营造视觉冲击力：

.hero-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 60px 0;
color: white;
}

.movie-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}

响应式布局

使用CSS Grid和Flexbox实现响应式布局：

.movies-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}

@media (max-width: 768px) {
.movies-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
}

动画效果

精心设计的过渡和微交互效果：

.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}

.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

📸 项目展示

首页展示

• 精美的轮播图展示热门电影
• 电影推荐网格布局
• 搜索功能入口

电影列表页

• 分类浏览所有电影
• 高级搜索和筛选
• 电影卡片网格展示

电影详情页

• 详细的电影信息展示
• 演职员表
• 评分和收藏功能

用户系统

• 用户注册和登录界面
• 个人中心页面
• 收藏的电影列表管理

🎯 总结

Movie Hub项目是一个功能完整、设计精美的电影信息展示平台。通过Vue 3的现代化开发方式和Element Plus的丰富组件，实现了优秀的用户体验。项目展示了前端开发的多个重要方面：

该项目适合作为Vue 3学习的实践案例，也可以作为实际项目的基础进行扩展开发。

Movie Hub – 让电影发现之旅更加精彩 ✨

项目地址：https://github.com/iue2002/movie-hub