详解vue-Resource（与后端数据交互）

单来说，vue-resource就像jQuery里的$.ajax，用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据...
vue-resource文档：https://github.com/vuejs/vue-resource/blob/master/docs/http.md
结合vue-router

data（）{return{toplist:[],alllist:[]}},//vue-routerroute:{data（{to}）{//并发请求，利用 Promise return Promise.all（[//简写this.$http.get（"http://192.168.30.235:9999/rest/knowledge/list",{"websiteId":2,"pageSize":5,"pageNo":1,"isTop":1}）,//this.$http.get（"http://192.168.30.235:9999/rest/knowledge/list",{"websiteId":2,"pageSize":20,"pageNo":1,"isTop":0}）//不简写this.$http（{method:"GET",url:"http://192.168.30.235:9999/rest/knowledge/list",data:{"websiteId":2,"pageSize":20,"pageNo":1,"isTop":0},headers: {"X-Requested-With": "XMLHttpRequest"},emulateJSON: true}）]）.then（function（data）{//es5写法 return{toplist:data[0].data.knowledgeList,alllist:data[1].data.knowledgeList}//es6写法 .then（）部分//.then（（[toplist,alllist]）=>（{toplist,alllist}）） },function（error）{//error}）}}

在其他地方使用

ready（）{var that=this;var websiteid = 2,pagesize = 20,pageno =1; that.$http（{method:"GET",url:"http://192.168.30.235:9999/rest/knowledge/list",data:{"websiteId":websiteid,"pageSize":pagesize,"pageNo":pageno,"isTop":0}}）.then（function（data）{//赋值给alllist数组,that.$set（"alllist",data.data.knowledgeList）}）//简写/*that.$http.get（"http://192.168.30.235:9999/knowledge/list",{"websiteId":2,"pageSize":20,"pageNo":1,"isTop":0}）.then（function（response）{that.$set（"alllist",response.data.knowledgeList）}）*/}

若定义全部变量（在data（）中定义），使用$get（）获取

data（）{return{toplist:[],alllist:[],websiteid:2,pagesize:20,pageno:1}},ready（）{var that=this;that.$http（{method:"GET",url:"http://192.168.30.235:9999/rest/knowledge/list",//使用定义的全局变量 用$get（）获取data:{"websiteId":that.$get（"websiteid"）,"pageSize":that.$get（"pagesize"）,"pageNo":that.$get（"pageno"）,"isTop":0}}）.then（function（data）{//赋值给alllist数组,that.$set（"alllist",data.data.knowledgeList）},function（error）{//error }）}

post方式同理
将数据绑定到dom上

<ul><li v-for="item in alllist" v-if="item.istop == false"><a v-link="{ name: "getReceiptDetail",params:{knowledgeId: item.id }}"><div class="fl know-info">          <！-- | limit 和 | timer是filter 在后续会说到-->          <！--字段含义: --><p class="font-normal nomal-height">{{item.title | limit 30 }}</p>           <p class="co9a9a9a" ><span style="margin-right: 1rem;">{{item.viewTimes}}K</span><span>{{item.publishTime | timer }}</span></p> <！--viewTimes:有多少人查看 , publishTime:发布时间--></div><div class="fr know-img"><img v-bind:src=item.coverImage /></div><div class="clearfix"></div></a></li></ul>

在vue-validator中做post示例 , 将接口请求地址定义为全局详见VUEX

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。