vue学习笔记(8)：v-resource

1.vue-resource

getAllList(){

this.$http.get('请求地址').then(result=>{

var result = result.body

if(result.status===0){

//成功

this.list = result.message;

}else{

alert("获取数据失败")

}

})

}

写在created生命周期里，来调用

created(){

this.getAllList()

}

2.添加数据到后台服务器

//this.$http.post()中接受3个参数

第一个参数：请求的地址

第二个参数：要提交给服务器的数据，要以对象形式提交给服务器{name:this.name}

第三个参数：是一个配置对象，要以哪种表单数据类型提交过去，{emulateJSON:true},以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded

3.add(){

this.$http.post('请求地址',{name:this.name},{emulateJSON:true}).then(result=>{

if(result.body.status==0){

//添加成功后只需手动，在调用一下getAllList就能刷新品牌列表了

this.getAllList()

//清空name

this.name=' '

}else{

alert("请求失败")

}

})

}

4.<a href=" " @click.prevent="del(item.id)"></a>

del(id){

this.$http.get("请求地址"+id).then(result=>{

if(result.body.status==0){

this.getAllList()

}else{

}

})

}

5.全局配置数据接口的根域名

<script>

//如果我们通过全局配置了，请求的数据接口根域名，则，在每次单独发起http请求的时候，请求的url路径，应该以相对路径开头，前面不能带/，否则不会启用根路径做拼接

Vue.http.option.root='http://vue.studyit.io'

//this.$http.get('http://vue.studyit.io/api/getprodlist').then(result=>{

})

this.$http.get('api/getprodlist').then(result=>{

})

</script>

6.全局配置emulateJSON

Vue.http.options.emulateJSON=true;