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'
}
}
},
设置完毕后重启项目