vue 数据请求

作者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");