1:进入项目,npm安装
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
3:准备json数据 自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据 http://47.xxx.xx.78:8091/ConfigServer/picture.action
4:跨域问题,设置代理,利用proxyTable属性实现跨域请求 在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码 (这里处于安全考虑,我隐藏了自己的而服务器域名,如果需要测试,改成你自己的即可)
proxyTable: {
'/api': {
target: 'http://x.xx.xx.78:8091',//设置你调用的接口域名和端口号
changeOrigin: true,//允许跨域
pathRewrite: {
'^/api': '' //这个是定义要访问的路径,名字随便写
}
}
},
5:打开一个界面picture.vue,开始写请求数据的方法
methods: {
getData() {
axios.get('/api/ConfigServer/picture.action').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
picture.vue参考代码:
<template>
<div id="app">
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('/api/ConfigServer/picture.action').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
6:再次运行
npm run dev
运行成功之后,打开f12,查看network的请求 这个时候,我们可以看见,本地的localhost替代 了我之前放在服务器上的链接的域名,这也是设置代理成功,就解决了跨域的问题了。
请求成功
response里面也有返回值,ok,下一步就要开始将这些数据渲染在前端界面上面了。