vue-resource的介绍
vue-resource是Vue高度集成的第三方包。
官网链接：
vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。
解释：
vue.js文件向Windows对象暴露了Vue这个关键词；vue-resource.js向Vue身上挂载了this.$http这个属性。于是，我们可以直接写this.$http.get或者this.$http.post或者this.$http.jsonp来调用。
vue-resource 发送Ajax请求
常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。
get 请求
格式举例：
1
2
3
4
5
6
7
8
| this.$http.get(url)
.then(function (result) {
console.log(result.body);
var result = result.body;
},
function (err) {
});
|
获取到的response.body就是要获取的数据，但直接打印出来是 object，所以要记得转成string。
举例：获取数据
现规定，获取品牌数据的 api 接口说明如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#app {
width: 800px;
margin: 20px auto;
}
#tb {
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th {
background-color: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td {
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<script src="../vue.js"></script>
<script src="../vue-resource121.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="id">
<input type="text" v-model="pname">
<button>添加数据</button>
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void(0)">删除</a>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el :'#app',
data:{
list:[]
},
created:function(){
this.getlist();
},
methods:{
getlist:function(){
this.$http.get('http://vueapi.ittun.com/api/getprodlist')
.then(function(response){
if(response.body.status != 0){
alert(response.body.message);
return;
}
this.list = response.body.message;
console.log(this.list);
});
}
}
});
</script>
</html>
|
上方代码中，我们用到了生命周期函数created，意思是：程序一加载，就马上在created这个函数里执行getlist()方法。
运行的结果如下：
如果我直接在浏览器中输入请求的url，获取的json数据如下：（可以看到，这种方式获取的是相同的数据）
post请求
格式举例：
1
2
3
4
5
6
7
8
9
|
this.$http.post(url, { name: '奔驰' }, { emulateJSON: true })
.then(function (response) {
alert(response.body.message);
},
function (error) {
});
|
上方代码中，post()方法中有三个参数，其中第三个参数是固定值，照着写就可以了。
代码举例：（添加数据）
现规定，添加品牌数据的 api 接口说明如下：
代码如下：（在上一段代码的基础之上，添加代码）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#app {
width: 800px;
margin: 20px auto;
}
#tb {
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th {
background-color: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td {
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<script src="vue.js"></script>
<script src="vue-resource121.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="pname">
<button @click="adddata">添加数据</button>
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void(0)">删除</a>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
pname: '',
list: []
},
created: function () {
this.getlist();
},
methods: {
adddata: function () {
var url = 'http://vueapi.ittun.com/api/addproduct';
var postData = { name: this.pname };
var options = { emulateJSON: true };
this.$http.post(url, postData, options).then(function (response) {
if (response.body.status != 0) {
alert(response.body.message);
return;
}
this.pname = '';
this.getlist();
});
},
getlist: function () {
this.$http.get('http://vueapi.ittun.com/api/getprodlist')
.then(function (response) {
if (response.body.status != 0) {
alert(response.body.message);
return;
}
this.list = response.body.message;
console.log(this.list);
});
}
}
});
</script>
</html>
|
代码举例：（删除数据）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#app {
width: 800px;
margin: 20px auto;
}
#tb {
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th {
background-color: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td {
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<script src="vue.js"></script>
<script src="vue-resource121.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="pname">
<button @click="adddata">添加数据</button>
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void(0)" @click="deldata(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
pname: '',
list: []
},
created: function () {
this.getlist();
},
methods: {
adddata: function () {
var url = 'http://vueapi.ittun.com/api/addproduct';
var postData = { name: this.pname };
var options = { emulateJSON: true };
this.$http.post(url, postData, options).then(function (response) {
if (response.body.status != 0) {
alert(response.body.message);
return;
}
this.pname = '';
this.getlist();
});
},
getlist: function () {
this.$http.get('http://vueapi.ittun.com/api/getprodlist')
.then(function (response) {
if (response.body.status != 0) {
alert(response.body.message);
return;
}
this.list = response.body.message;
console.log(this.list);
});
},
deldata: function (id) {
this.$http.get('http://vueapi.ittun.com/api/delproduct/' + id)
.then(function (response) {
if (response.body.status != 0) {
alert(response.body.message);
return;
}
this.getlist();
});
}
}
});
</script>
</html>
|
jsonp
格式举例：
1
2
3
4
5
6
7
8
|
this.$http.jsonp('http://vuecms.ittun.com/api/getlunbo?id=1')
.then(function (response) {
console.log(JSON.stringify(response.body));
}, function (err) {
});
|
请求结果：
JSONP的实现原理
由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。
JSONP的实现原理：通过动态创建script标签的形式，用script标签的src属性，代表api接口的url，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。
具体实现过程：
-
先在客户端定义一个回调方法，预定义对数据的操作
-
再把这个回调方法的名称，通过URL传参的形式，提交到服务器的api接口；
-
服务器api接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
-
客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了
axios
除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求。
通过Vue全局配置api接口的url地址
api接口的url地址包括：绝对路径+相对路径。
我们在做Ajax请求的时候，所填写的url建议填相对路径，然后把绝对路径放在全局的位置。
Vue就提供了这个功能。举例如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<script>
Vue.http.options.root = 'http://smyhvae/';
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [
]
},
created() {
this.getAllList()
},
methods: {
getAllList() {
this.$http.get('api/getprodlist').then(result => {
var result = result.body
if (result.status === 0) {
this.list = result.message
} else {
alert('获取数据失败！')
}
})
}
}
});
</script>
|
如上方代码所示，第一步是在全局的位置写绝对路径：
1
| Vue.http.options.root = 'http://smyhvae/';
|
第二步是在Ajax请求的url中写相对路径：（注意，前面不要带/）
1
| this.$http.get('api/getprodlist')
|
