5-vuejs2.0实战：仿豆瓣app项目：axios的简单使用

由于项目中用到了豆瓣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组件

          {{item.title}}
          {{item.target.desc}}
 

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组件