作者QQ：1095737364 QQ群：123300273 欢迎加入！
要引入模块: vue-resource
1.在package.json中的dependencies中添加vue-resource模块,然后安装(运行npm instal)
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.6.0",
"vue-resource":"^1.2.1"
},
2.在router路由文件夹的index 下添加如下代码:
import VueResource from ‘vue-resource‘
Vue.use(VueResource)
3.要使用请求的地方使用如下代码模板:
this.$http.get(‘/http://localhost:8080/graphicOneData‘).then(response => {
console.log(response);
var datas = JSON.parse(response.bodyText);
}, response => {
console.log("error");
});
注意:
1.在请求接口数据时,涉及到跨域请求出现下面错误:
XMLHttpRequest cannot load http://localhost:8088/test. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.
解决办法:
在接口中设置:
response.setHeader("Access-Control-Allow-Origin", "*");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials","true");