VUE2.0 Axios深入浅出

本文主要解决一下几个问题：
1.app.get is not a function解决方案（vue1.0升级到vue2.0的bug）
2.没有dev-server.js文件，如何进行后台数据模拟？
3.axios如何直接跨域mock网站的返回值

一、基本配置
1.安装axios
配置package.json>dependencies 输入：

"dependencies": {
    "axios": "^0.18.0" //根据实际情况选择最新的即可
  },

重启服务

npm install
npm run dev

2.在webpack-dev-conf.js文件中引入axios，并进行域名的转换

//调用axios 
const axios = require('axios')
const express = require('express')
const app = express()
//找到devServer,添加
devServer: { 
   before(app) {
     app.get('/api/getDiscList', (req, res) => {
       var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
       axios.get(url, {
         headers: {
           referer: 'https://c.y.qq.com/',
           host: 'c.y.qq.com'
         },
         params: req.query
       }).then((response) => {
         res.json(response.data)
       }).catch((e) => {
         console.log(e)
       })
     })
   }
 },

3.集成封装api文件夹下的recommend.js

export function getDiscList() {
  const url = '/api/getDiscList'

  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

4.调用集成封装的接口recommend.vue

<script type="text/ecmascript-6">
    import {getDiscList} from 'api/recommend'
    import {ERR_OK} from 'api/config' //ERR_OK为自定义全局变量
    export default {
  name: 'recommend',
  data() {
    return {
      recommends: []
    }
  },
  created() {
    this._getDiscList()
  },
  methods: {
    _getDiscList() {
      getDiscList().then((res) => {
        if (res.code === ERR_OK) { 
        }
        console.log(res.data.list)
      })
    }
  }
}
</script>

效果图：

源码下载地址