一個vue的電影資訊demo

最近學習了一段時間的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;
    });
}
複製程式碼

待完善的地方

1.元件的複用

元件的複用並沒有最大化，其中New Movies 和Hot Game兩個模組結構以及樣式是完全一樣的，只是獲取的資料不同罷了。 可以抽離出來一個通用的元件，在使用的時候配置不同的ajax地址就行了。

2.詳情頁

詳情頁沒想好怎麼做，如果照抄其他app的設計就沒意思了，接下來我會繼續設計一個效果出來，完善資料的展示。

接下啦幾天我會繼續完善這個專案，歡迎各位來關注一下。 最後附一個git地址

上預覽圖：