Vue 03.vue-resource
vue-resource 发送请求
除了 vue-resource 之外,还可以使用 axios
的第三方包实现实现数据的请求
vue-resource 的配置
-
直接在页面中,通过
script
标签,引入vue-resource
的脚本文件; -
注意:引用的先后顺序是:先引用
Vue
的脚本文件,再引用vue-resource
的脚本文件; -
全局配置根路径及emulateJSON 选项
-
// 如果通过全局配置请求的数据接口根域名,则在每次单独发起 http 请求的时候,请求的 url 路径,应该以相对路径开头,前面不能带/,否则不会启用根路径做拼接; Vue.http.options.root = 'http://baidu.com/'; // 全局启用 emulateJSON 选项 Vue.http.options.emulateJSON = true;
get请求
getInfo() { // get 方式获取数据
this.$http.get('http://vue.studyit.io/api/getlunbo').then(res => {
console.log(res.body);
})
}
post请求
postInfo() {
var url = 'http://vue.studyit.io/api/post';
// post 方法接收三个参数:
// 参数1: 要请求的URL地址
// 参数2: 要发送的数据对象
// 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
jsonp请求
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://vue.studyit.io/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
JSONP的实现原理
- 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;
- 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);
- 具体实现过程:
- 先在客户端定义一个回调方法,预定义对数据的操作;
- 再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
- 服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
- 客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
demo:品牌管理改造
html
<div id="app">
<input type="text" v-model="add_name">
<button @click="addInfo">添加</button>
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>time</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="" @click.prevent="delInfo(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
js
Vue.http.options.root = 'http://127.0.0.1:5000/';
var vm = new Vue({
el:"#app",
data:{
add_name:'',
list:[]
},
created(){
this.getInfo()
},
methods:{
getInfo() { // 获取所有数据
url = "get_brand";
this.$http.get(url).then(res => {
this.list = res.body.data
})
},
addInfo(){ // 添加数据
url = "add_brand";
this.$http.post(url,{name:this.add_name}, { emulateJSON: true }).then(res => {
this.getInfo()
this.add_name=''
})
},
delInfo(id){ // 删除数据
url = "del_brand";
this.$http.post(url,{id:id}, { emulateJSON: true }).then(res => {
this.getInfo()
})
},
}
})