一.Vue2.5开发去哪儿网app首页⑦——ajax获取首页数据

使用axios第三方模块来进行项目的ajax请求

安装axios

npm install axios --save

每一个组件都有数据，都发送一次ajax请求就会有太多的请求，所以可以在Home组件中一次性发送一个请求

在Home组件中引入axios

import axios from 'axios'

在static/mock文件夹下新建index.json文件， 在方法中写入函数，引用生命周期钩子调用getHomeInfo函数，浏览器会打印出index.json文件中的内容 

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  methods: {
    getHomeInfo () {
      axios.get('/static/mock/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}

除了static文件夹下的静态文件才能在浏览器中访问，如http://localhost:8080/static/mock/index.json能访问到本地index.json中的内容，项目中的其他文件夹下的数据都不能够访问，所以我们在本地开发的所有模拟数据都应该放在static文件夹下

因为这是本地的模拟数据，我们并不想把它放到线上，所以可以在.gitignore文件中写入static/mock

但是我们这样做只是本地模拟接口地址，如果我们的代码要上线，那我们的地址就要写成/api/index.json类似格式

如果有一个转发机制，它可以帮助我们在api下的所有json文件的请求都转发到我们本地的mock文件夹下

webpack-dev-server恰好给我们提供了一个在index.js中的proxyTable这个代理功能来解决这个问题，

将地址改为/api/index.json

axios.get('/api/index.json')

配置proxyTable，当我们访问api这个目录时，让这个配置项帮助我们将请求转发到http://localhost:8080，然后将这个路径做一个替换，一旦请求的地址以api开头，就将它替换成请求到/static/mock这个文件夹下，这样就获取到了数据

    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite:{
          '^/api': '/static/mock'
        }
      }
    },