web前端的学习日志（8）

Vue.js的学习过程

第八天的学习

一、ajax请求
安装axios

npm install axios --save

在Home.vue里面引入axios

import axios form 'axios'

使用生命周期函数mounted调用函数getHomeInfo来发送ajax请求
函数getHomeInfoSucc接受数据

methods: {
  	getHomeInfo () {
  		axios.get('/static/mock/index.json')
  			.then(this.getHomeInfoSucc)
  	},
  	getHomeInfoSucc (res) {
  		console.log(res)
  	}
  },
  mounted () {
  	this.getHomeInfo()
  }

将存有模拟数据的json文件放在static里面，因为放在这里面才能被外部访问到
若不想把这些本地的模拟数据提交到线上，可以在.gitignore里加入一行static/mock

但是若要上线，就得使用’/api/index.json’这个地址
vue提供了一个转发机制，可以将对api下的请求转发到本地文件夹下
在config下的index.js文件中设置：

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

设置完毕后重启项目