前端--电影网站
🎬 Movie Hub：基于Vue3的现代化电影网站项目
一个使用Vue 3构建的现代化电影介绍网站，提供电影浏览、搜索、收藏和用户管理功能。项目采用Element Plus UI框架，实现了响应式设计和丰富的交互效果。
在线预览电影网站
📖 目录
🌟 项目简介
Movie Hub是一个全功能的电影信息展示平台，旨在为用户提供便捷的电影浏览、搜索和收藏体验。项目采用前后端分离架构，前端使用Vue 3框架开发，实现了丰富的用户交互和精美的界面设计。
🛠️ 技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Vue.js | 3.3.4 | 前端框架，构建用户界面 |
| Element Plus | 2.4.3 | UI组件库，提供丰富的界面组件 |
| Vue Router | 4.2.5 | 路由管理，实现页面导航 |
| Pinia | 2.1.7 | 状态管理，管理应用状态 |
| Axios | 1.6.2 | HTTP客户端，处理网络请求 |
| Vite | 5.0.0 | 构建工具，提供快速的开发体验 |
| Sass | 1.69.5 | CSS预处理器，增强样式编写 |
✨ 功能特点
🎬 电影浏览
- 丰富的电影库展示
- 详细的电影信息页面
- 精美的电影卡片设计
- 电影分类浏览
🔍 智能搜索
- 按电影名称快速搜索
- 按演员名称搜索
- 高级筛选功能
- 实时搜索建议
⭐ 收藏系统
- 用户登录后可收藏电影
- 个人收藏列表管理
- 收藏状态持久化存储
- 收藏数量统计
👤 用户管理
- 用户注册和登录
- 密码找回功能
- 个人中心页面
- 用户信息管理
🎨 界面设计
- 响应式布局适配
- 现代化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 - 安装项目依赖
npminstall- 启动开发服务器
npm run dev - 构建生产版本
npm run build - 预览生产版本
npm run preview 💻 核心功能实现
首页轮播实现
首页使用Element Plus的Carousel组件实现电影轮播展示：
<template> <el-carousel :interval="4000" type="card"> <el-carousel-item v-for="movie in carouselMovies" :key="movie.id"> <img :src="movie.cover" :alt="movie.title"> <div> <h3>{{ movie.title }}</h3> <p>{{ movie.description }}</p> </div> </el-carousel-item> </el-carousel> </template> 电影卡片组件
MovieCard组件是项目的核心UI组件，用于展示电影信息：
<template> <el-card @click="goToDetail(movie.id)"> <img :src="movie.cover" :alt="movie.title"> <div> <h3>{{ movie.title }}</h3> <div> <span>⭐ {{ movie.rating }}</span> <span>{{ movie.year }}</span> </div> <el-button v-if="isAuthenticated" @click.stop="toggleFavorite(movie)" :type="isFavorite(movie.id) ? 'danger' : 'default'" size="small" > {{ isFavorite(movie.id) ? '已收藏' : '收藏' }} </el-button> </div> </el-card> </template> 状态管理
使用Pinia管理用户收藏状态：
import{ defineStore }from'pinia'exportconst 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){returnthis.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的丰富组件，实现了优秀的用户体验。项目展示了前端开发的多个重要方面：
- 组件化开发：合理拆分组件，提高代码复用性
- 状态管理：使用Pinia进行集中式状态管理
- 路由管理：使用Vue Router实现单页面应用导航
- 响应式设计：适配不同设备屏幕尺寸
- 用户体验：流畅的动画和交互效果
该项目适合作为Vue 3学习的实践案例，也可以作为实际项目的基础进行扩展开发。
Movie Hub - 让电影发现之旅更加精彩 ✨
项目地址：https://github.com/iue2002/movie-hub
