当前位置：首页 > VUE

vue实现得猫眼

2026-01-19 13:16:21VUE

Vue 实现猫眼电影功能

Vue 可以用来实现类似猫眼电影的功能，包括电影列表展示、详情页、购票功能等。以下是实现的关键步骤和技术要点。

项目初始化

使用 Vue CLI 或 Vite 初始化项目，安装必要的依赖：

npm create vue@latest maoyan-app
cd maoyan-app
npm install axios vue-router pinia

路由配置

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/movie/:id', component: MovieDetail }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

状态管理

使用 Pinia 管理全局状态，创建 src/stores/movie.js：

vue实现得猫眼

import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'

export const useMovieStore = defineStore('movie', () => {
  const movies = ref([])

  async function fetchMovies() {
    const res = await axios.get('https://api.example.com/movies')
    movies.value = res.data
  }

  return { movies, fetchMovies }
})

电影列表组件

创建 src/components/MovieList.vue：

<template>
  <div class="movie-list">
    <div v-for="movie in movies" :key="movie.id" class="movie-item">
      <img :src="movie.poster" :alt="movie.title">
      <h3>{{ movie.title }}</h3>
      <p>评分：{{ movie.rating }}</p>
    </div>
  </div>
</template>

<script setup>
import { useMovieStore } from '../stores/movie'
import { onMounted } from 'vue'

const store = useMovieStore()
const { movies } = store

onMounted(() => {
  store.fetchMovies()
})
</script>

电影详情页

创建 src/views/MovieDetail.vue：

<template>
  <div v-if="movie">
    <h1>{{ movie.title }}</h1>
    <img :src="movie.poster" class="detail-poster">
    <p>导演：{{ movie.director }}</p>
    <p>主演：{{ movie.cast }}</p>
    <p>评分：{{ movie.rating }}</p>
    <button @click="showCinemas">立即购票</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const movie = ref(null)

axios.get(`https://api.example.com/movies/${route.params.id}`)
  .then(res => {
    movie.value = res.data
  })
</script>

API 请求封装

创建 src/api/movie.js 封装 API 请求：

vue实现得猫眼

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
})

export const getMovies = () => instance.get('/movies')
export const getMovieById = id => instance.get(`/movies/${id}`)

样式设计

使用 CSS 或 UI 库（如 Element Plus）美化界面：

.movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.detail-poster {
  max-width: 300px;
  border-radius: 8px;
}