一个vue的电影资讯demo

最新推荐文章于 2025-05-20 21:29:57 发布

weixin_34254823

最新推荐文章于 2025-05-20 21:29:57 发布

阅读量450

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript git ViewUI

原文链接：https://juejin.im/post/5b3c54835188251b216108ac

最近学习了一段时间的vue了，摸索着做一个demo出来。

涉及到的技术栈：vue、vue-router(多页面切换)、sass(css预处理器)、axios(api请求)、swiper(轮播图插件)

数据来源：电影类的数据全部来源于豆瓣api

其他数据：静态数据。找不到数据源，接下来我会自己mok数据替换掉。

细说

1.vue-router

这个主要用啦做多页面的切换，比如点击底部tabbar的时候切换不同的页面，以及点击电影的时候切换的详情页等等。没有太多的技术性，只需要在index.js下做好相应的配置就行了。

//主页路由
{
      path: '/index',
      name: 'Index',
      component: Index
},
......
//详情页路由
{
      path: '/movie/subject/:id',
      component: MovieView,
      name: 'movie-detail'
}
复制代码

2. axios

axios用来做ajax请求，动态的获取豆瓣电影api中的数据。由于豆瓣api有请求限制，所有我使用的是一个转义的地址：https://douban.uieee.com/v2/

import axios from 'axios';//导入模块

// 使用代理
const HOST = process.env.NODE_ENV === 'production' ? 'https://douban.uieee.com/v2/' : 'http://localhost:8080';

export const API_TYPE = {
  movie: {
    in_theaters: 'in_theaters',//热门电影列表
    coming_soon: 'coming_soon',//最新电影列表
  }
};

//定义一个通用函数，根据不同的url来获取不同的数据
export function fetch(url) {
  return new Promise((resolve, reject) => {
    axios.get(HOST + url)
      .then(response => {
        resolve(response.data);
      })
  })
}

//根据电影类型来获取列表数据，从start到count一共几条数据
export function fetchMoviesByType(type, start = 0, count = 20) {
  return fetchItemByType(`/movie/${type}?start=${start}&count=${count}`)
}


//根据电影的id来发送请求，获取此id电影的详情
export function fetchMovieById(id) {
  return fetch(`/movie/subject/${id}`);
}
复制代码

3.动态获取详情页数据

我们实现的功能是点击列表中的某个电影，然后切换到电影的详情页，并且显示出内容。切换页面的时候，我们只需要用vue-router做路由配置就行了。

获取详情页的数据的具体思路是，在router-link中把电影的id传给详情页，然后详情页获取到这个id，以这个id去发送ajax请求就可以了。

//把id传给子路由
<router-link :to="{name:'movie-detail',params:{id:item.id}}"> 
    <img :src="item.images.large" />
    <h4>{{ item.title }}</h4>
    <span class="score">评分:{{ item.rating.average }}</span>
    <span class="year">{{item.year}}</span>
</router-link>
复制代码

然后在详情页获取这个id

mounted() {
    //拿到这个id
    this.id = this.$route.params.id;
    
    //以这个id去发送ajax请求来获取详情页数据
    fetchMovieById(this.id).then(data => {
        this.movie = data;
    });
}
复制代码