当前位置：首页 > VUE

vue电影功能实现

2026-03-28 05:25:16VUE

Vue 电影功能实现

创建 Vue 项目

使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。Vue CLI 是官方提供的脚手架工具，Vite 是新一代前端构建工具，速度更快。

npm init vue@latest movie-app
cd movie-app
npm install

安装依赖

根据项目需求安装必要的依赖，例如 axios 用于 HTTP 请求，vue-router 用于路由管理。

npm install axios vue-router

配置路由

在 src/router/index.js 中配置路由，定义电影列表和电影详情页的路由。

vue电影功能实现

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

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

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

export default router

电影列表组件

创建 MovieList.vue 组件，用于展示电影列表。通过 axios 获取电影数据并渲染。

<template>
  <div>
    <h1>电影列表</h1>
    <div v-for="movie in movies" :key="movie.id">
      <router-link :to="'/movie/' + movie.id">{{ movie.title }}</router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      movies: []
    }
  },
  async created() {
    const response = await axios.get('https://api.example.com/movies')
    this.movies = response.data
  }
}
</script>

电影详情组件

创建 MovieDetail.vue 组件，展示单个电影的详细信息。通过路由参数获取电影 ID 并请求详情数据。

vue电影功能实现

<template>
  <div>
    <h1>{{ movie.title }}</h1>
    <p>{{ movie.description }}</p>
    <img :src="movie.poster" alt="Movie Poster">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      movie: {}
    }
  },
  async created() {
    const movieId = this.$route.params.id
    const response = await axios.get(`https://api.example.com/movies/${movieId}`)
    this.movie = response.data
  }
}
</script>

样式优化

使用 CSS 或 SCSS 为电影列表和详情页添加样式，提升用户体验。

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

.movie-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}