当前位置：首页 > VUE

vue 实现豆瓣

2026-01-12 10:44:23VUE

Vue 实现豆瓣应用

使用 Vue 实现一个豆瓣应用需要整合多个功能模块，包括电影列表、详情页、搜索和用户交互。以下是关键实现步骤：

项目初始化

使用 Vue CLI 创建项目：

vue create douban-app

安装必要依赖：

npm install axios vue-router vuex

数据获取

通过豆瓣 API 获取数据（需注意跨域问题，建议使用代理或第三方封装接口）：

// api.js
import axios from 'axios'

export const getMovieList = (params) => {
  return axios.get('/v2/movie/in_theaters', { params })
}

路由配置

设置基本路由结构：

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import MovieList from './views/MovieList.vue'
import MovieDetail from './views/MovieDetail.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: MovieList },
    { path: '/movie/:id', component: MovieDetail }
  ]
})

状态管理

使用 Vuex 管理全局状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    movies: []
  },
  mutations: {
    setMovies(state, payload) {
      state.movies = payload
    }
  },
  actions: {
    async fetchMovies({ commit }) {
      const res = await getMovieList()
      commit('setMovies', res.data.subjects)
    }
  }
})

电影列表组件

实现基本的电影列表展示：

<template>
  <div class="movie-list">
    <div v-for="movie in movies" :key="movie.id" class="movie-item">
      <router-link :to="'/movie/' + movie.id">
        <img :src="movie.images.small" :alt="movie.title">
        <h3>{{ movie.title }}</h3>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    movies() {
      return this.$store.state.movies
    }
  },
  created() {
    this.$store.dispatch('fetchMovies')
  }
}
</script>

电影详情组件

展示单个电影的详细信息：

<template>
  <div v-if="movie" class="movie-detail">
    <img :src="movie.images.large" :alt="movie.title">
    <h1>{{ movie.title }}</h1>
    <p>{{ movie.summary }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: null
    }
  },
  async created() {
    const res = await getMovieDetail(this.$route.params.id)
    this.movie = res.data
  }
}
</script>

样式处理

使用 CSS 或预处理器美化界面：

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

.movie-item img {
  width: 100%;
  height: auto;
}