1.vue-resource
getAllList(){
this.$http.get('請(qǐng)求地址').then(result=>{
var result = result.body
if(result.status===0){
//成功
this.list = result.message;
}else{
alert("獲取數(shù)據(jù)失敗")
}
})
}
寫(xiě)在created生命周期里灾炭,來(lái)調(diào)用
created(){
this.getAllList()
}
2.添加數(shù)據(jù)到后臺(tái)服務(wù)器
//this.$http.post()中接受3個(gè)參數(shù)
第一個(gè)參數(shù):請(qǐng)求的地址
第二個(gè)參數(shù):要提交給服務(wù)器的數(shù)據(jù)茎芋,要以對(duì)象形式提交給服務(wù)器{name:this.name}
第三個(gè)參數(shù):是一個(gè)配置對(duì)象,要以哪種表單數(shù)據(jù)類型提交過(guò)去蜈出,{emulateJSON:true},以普通表單格式田弥,將數(shù)據(jù)提交給服務(wù)器 application/x-www-form-urlencoded
3.add(){
this.$http.post('請(qǐng)求地址',{name:this.name},{emulateJSON:true}).then(result=>{
if(result.body.status==0){
//添加成功后只需手動(dòng),在調(diào)用一下getAllList就能刷新品牌列表了
this.getAllList()
//清空name
this.name=' '
}else{
alert("請(qǐng)求失敗")
}
})
}
4.<a href=" " @click.prevent="del(item.id)"></a>
del(id){
this.$http.get("請(qǐng)求地址"+id).then(result=>{
if(result.body.status==0){
this.getAllList()
}else{
}
})
}
5.全局配置數(shù)據(jù)接口的根域名
<script>
//如果我們通過(guò)全局配置了铡原,請(qǐng)求的數(shù)據(jù)接口根域名偷厦,則,在每次單獨(dú)發(fā)起http請(qǐng)求的時(shí)候燕刻,請(qǐng)求的url路徑只泼,應(yīng)該以相對(duì)路徑開(kāi)頭,前面不能帶/卵洗,否則不會(huì)啟用根路徑做拼接
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;