除了 vue-resource 之外,还可以使用 axios
的第三方包实现实现数据的请求
script
标签,引入 vue-resource
的脚本文件;
Vue
的脚本文件,再引用 vue-resource
的脚本文件;
getInfo() { // get 方式获取数据
this.$http.get('http://vue.studyit.io/api/getlunbo').then(res => {
console.log(res.body);
})
}
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);
});
}
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://vue.studyit.io/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
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()
})
},
}
})