一、安装axios
npm install axios --save
二、引入axios
import axios from 'axios'
三、axios的使用
以首页数据为例编写axios的使用
由于项目中多处均要使用到ajax获取数据,所以在Home.vue中将axios引入,由于首页是分成多个组件进行组合的,所以需要一次性获取到多个部分的数据,且要在页面加载的时候将数据显示出来,所以在声明周期函数mounted中进行声明,调用方法进行数据的获取
axios.get(‘路由’).then(结果处理的函数)
methods: {
getHomeInfo () {
axios.get('/api/index.json')
.then(this.getHomeInfoSucc)
},
//res即为获取到的数据
getHomeInfoSucc (res) {
console.log(res)
}
},
mounted () {
this.getHomeInfo()
}
三A、路由修改
这里有一个点要注意 '/api/index.json’可以设置路径为别名路径 意思就是在Home.vue中的路径都是固定的。只是在config/index.js中配置/api/指向的真正路径(有点类似路由),在proxyTable中增加api的等效地址,即我们在使用本地模拟json时需要将路由指向本地静态文件路径,可以设置这个来实现,/api=/static/mock,但是调用路由的地方还写成api
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/mock'
}
}
},