vue中使用axios首先需要npm下载axios的安装包
npm install axios --save
在main.js中引入axios,这样就可以在全局使用axios了
//main.js
import axios from 'axios'
然后在项目根目录下的static中创建mock文件夹,里面放测试用的json文件
在需要调接口的文件中使用axios调取接口
//Home.vue
mounted(){
this.getHomeInfo();
},
methods: {
getHomeInfo(){
axios.get('/api/index.json').then(this.getHomeInfoSucc)
},
getHomeInfoSucc(res){
const ress = res.data
if (ress.ret && ress.data) {
const data = ress.data
this.swiperList = data.swiperList
this.iconList = data.iconList
this.recommendList = data.recommendList
this.weekendList = data.weekendList
}
console.log(res)
}
}
可以看到在get方法中请求的路径是: ‘/api/index.json’,这里的/api需要我们去配置
打开config文件夹下的index.js文件,然后找到proxyTable进行配置
proxyTable: {
'/api': {
target: 'http://localhost:8081/',
pathRewrite: {
'^/api': '/static/mock'
}
}
这样就可以访问到数据了