vue电影功能实现

Vue 电影功能实现

数据获取与展示

通过 Vue 的 axios 或 fetch 从电影 API 获取数据。常见的免费 API 包括 TMDb、OMDb。创建一个 movies 数组存储数据，使用 v-for 在模板中循环渲染电影列表。

<template>
  <div>
    <div v-for="movie in movies" :key="movie.id">
      <h3>{{ movie.title }}</h3>
      <img :src="movie.poster" alt="Poster">
    </div>
  </div>
</template>

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

搜索功能

添加搜索输入框，使用 v-model 绑定搜索关键词。通过计算属性或方法过滤电影列表。

<template>
  <input v-model="searchQuery" placeholder="Search movies">
  <div v-for="movie in filteredMovies" :key="movie.id">
    <h3>{{ movie.title }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      movies: []
    };
  },
  computed: {
    filteredMovies() {
      return this.movies.filter(movie =>
        movie.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

分页功能

使用分页组件或手动实现分页逻辑。计算总页数，根据当前页码切片显示数据。

<template>
  <div v-for="movie in paginatedMovies" :key="movie.id">
    <h3>{{ movie.title }}</h3>
  </div>
  <button @click="prevPage">Previous</button>
  <button @click="nextPage">Next</button>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      movies: []
    };
  },
  computed: {
    paginatedMovies() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.movies.slice(start, end);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage * this.itemsPerPage < this.movies.length) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

电影详情页

使用 Vue Router 实现路由跳转。创建详情页组件，通过路由参数获取电影 ID，并显示详细信息。

// router.js
const routes = [
  { path: '/movie/:id', component: MovieDetail }
];

// MovieDetail.vue
<template>
  <div>
    <h1>{{ movie.title }}</h1>
    <p>{{ movie.overview }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: {}
    };
  },
  async created() {
    const id = this.$route.params.id;
    const response = await axios.get(`API_URL/${id}`);
    this.movie = response.data;
  }
};
</script>

状态管理

对于复杂应用，使用 Vuex 管理电影数据状态。创建 store 模块处理电影数据的获取、搜索和分页。

// store.js
export default new Vuex.Store({
  state: {
    movies: [],
    searchQuery: ''
  },
  mutations: {
    setMovies(state, movies) {
      state.movies = movies;
    },
    setSearchQuery(state, query) {
      state.searchQuery = query;
    }
  },
  actions: {
    async fetchMovies({ commit }) {
      const response = await axios.get('API_URL');
      commit('setMovies', response.data.results);
    }
  },
  getters: {
    filteredMovies: state => {
      return state.movies.filter(movie =>
        movie.title.toLowerCase().includes(state.searchQuery.toLowerCase())
      );
    }
  }
});

通过以上方法，可以实现一个功能完整的电影应用，包括数据展示、搜索、分页和详情查看等功能。