vue 实现豆瓣

以下是在 Vue 中实现豆瓣电影功能的主要方法和步骤：

环境准备

安装 Vue CLI 并创建项目
npm install -g @vue/cli
vue create douban-movie
安装 axios 用于 API 请求
npm install axios

豆瓣 API 配置

豆瓣开放 API 需要添加请求头
在 main.js 中设置默认请求头：

axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.headers.common['Accept'] = 'application/json'

电影列表组件

创建 MovieList.vue 组件
使用 axios 获取正在热映的电影数据：

methods: {
  fetchMovies() {
    axios.get('https://api.douban.com/v2/movie/in_theaters')
      .then(response => {
        this.movies = response.data.subjects
      })
  }
}

电影详情组件

创建 MovieDetail.vue 组件
通过路由参数获取电影 ID：

created() {
  const id = this.$route.params.id
  axios.get(`https://api.douban.com/v2/movie/subject/${id}`)
    .then(response => {
      this.movie = response.data
    })
}

路由配置

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

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

样式设计

使用 CSS Flexbox 布局电影列表
为电影卡片添加悬停效果：

.movie-card {
  transition: transform 0.3s ease;
}
.movie-card:hover {
  transform: scale(1.05);
}

实现搜索功能

添加搜索组件 SearchBar.vue
使用豆瓣搜索 API：

searchMovies(query) {
  axios.get(`https://api.douban.com/v2/movie/search?q=${query}`)
    .then(response => {
      this.searchResults = response.data.subjects
    })
}

分页加载

实现滚动加载更多功能
监听滚动事件并触发 API 请求：

window.addEventListener('scroll', () => {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    this.loadMore()
  }
})

错误处理

添加全局错误处理拦截器
在 main.js 中配置：

axios.interceptors.response.use(
  response => response,
  error => {
    console.error('API Error:', error)
    return Promise.reject(error)
  }
)

部署上线

构建生产版本
npm run build
配置 Nginx 代理解决跨域问题
在 nginx.conf 中添加：

location /api {
  proxy_pass https://api.douban.com;
}