Vue学习笔记-项目开发3.1Ajax获取数据（axios）

一、安装axios

npm install axios --save

二、引入axios

import axios from 'axios'

三、axios的使用
       以首页数据为例编写axios的使用
       由于项目中多处均要使用到ajax获取数据，所以在Home.vue中将axios引入，由于首页是分成多个组件进行组合的，所以需要一次性获取到多个部分的数据，且要在页面加载的时候将数据显示出来，所以在声明周期函数mounted中进行声明，调用方法进行数据的获取
        axios.get(‘路由’).then(结果处理的函数)

  methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
   //res即为获取到的数据
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }

三A、路由修改
这里有一个点要注意 '/api/index.json’可以设置路径为别名路径 意思就是在Home.vue中的路径都是固定的。只是在config/index.js中配置/api/指向的真正路径（有点类似路由），在proxyTable中增加api的等效地址，即我们在使用本地模拟json时需要将路由指向本地静态文件路径，可以设置这个来实现，/api=/static/mock，但是调用路由的地方还写成api

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:8080',
            pathRewrite: {
                '^/api': '/static/mock'
            }
        }
    },