由于項目中用到了豆瓣api,涉及到跨域訪問，就需要在config的index.js添加代理,例如

 proxyTable: {
      '/api': {
        target: 'https://api.douban.com/v2',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

安裝axios

npm install --save axios vue-axios

在main.js引入axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

在各個組件里獲取數據，就是這么簡單

this.axios.get(api).then((response) => {
  console.log(response.data)
})

由于豆瓣app首頁的數據，我們不能直接通過api獲取數據，只能先將數據保存下來進行訪問，大家做項目的時候，訪問靜態數據json會遇到路徑404，這里我們可以通過在dev-server.js里添加靜態數據的路由，例如：我們先將豆瓣的首頁數據先保存到/src/data/homeData.json,

dev-server.js 添加

//添加靜態數據路由
var app = express()
var homeData=require('../src/data/homeData.json');
var apiRoutes = express.Router();
apiRoutes.get('/homeData',function (req,res) {
  res.json({
    errno:0,
    data:homeData
  });
});
app.use('/api',apiRoutes);

在組件里面訪問

this.axios.get('/api/homeData').then((response) => {
          console.log(response.data)
        })

數據就出來了

Paste_Image.png

接下來我們將靜態數據顯示到首頁中：靜態數據分為熱門和推薦，我么先fetchData獲取數據，通過判斷card.name，賦值給recommendData、hotData

data() {
      return {
        recommendData: [],
        hotData: []
      }
    },
 created() {
      this.fetchData();
    },
methods: {
      fetchData() {
        this.axios.get('/api/homeData').then((response) => {
          let data = response.data.data.recommend_feeds;
          let recommend = [];
          let hot = [];
          for (var i in data) {
            if (data[i].card && data[i].card.name == '為你推薦') {
              recommend.push(data[i]);
            } else {
              hot.push(data[i]);
            }
          }

          this.recommendData = recommend;
          this.hotData = hot;

        })
      }
    }

在index.vue循環media-cell組件

<m-cell-media :author="item.target.author.name" :column="item.source_cn" :img="item.target.cover_url" v-for="(item,index) in hotData"
          :key="item.id">

          <span slot="title">{{item.title}}</span>
          <span slot="describe">{{item.target.desc}}</span>
 </m-cell-media>

Paste_Image.png

git地址：
https://github.com/MrMoveon/doubanApp

vue專題目錄：
1-vuejs2.0實戰：仿豆瓣app項目，創建自定義組件tabbar

2-vuejs2.0實戰：仿豆瓣app項目，創建組件header,tabbar路由跳轉

3-vuejs2.0實戰：仿豆瓣app項目，創建Swipe圖片輪播組件

4-vuejs2.0實戰：仿豆瓣app項目,創建cell,media-cell組件