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

作者: 穆風 | 来源:发表于2017-03-09 22:48 被阅读8005次

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