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

来源：互联网发布：appserv怎么进入mysql 编辑：程序博客网时间：2024/05/23 20:21

单来说，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-router    route:{        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

阅读全文

1 0