Vue2.5 学习笔记 7.8 Ajax获取数据

这次是讲解如何通过Ajax获取数据

1. 首先要安装axios

npm install axios --save

2. 在Hme.vue中导入 axios，并且在HTML加载完成后使用生命周期函数 mounted加载Ajax数据

  methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
//这个输入res可以不做 只是测试的时候用
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }

这样就能获取到数据了。

这里有一个点要注意 '/api/index.json'可以设置路径为别名路径  意思就是在Home.vue中的路径都是固定的。只是在config/index.js中配置/api/指向的真正路径（有点类似路由）

module.exports = {
  dev: {

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

这样 以后如果json路径放到别的位置  在这里改即可（也适用别的文件）