关于vue2.0异步获取后端数据且在页面进行数据的输出显示做成前后端分离

        如果要用vue2.0进行前后端分离官网提供了一个插件:vue-resource,安装方法我就不在这里介绍了官网有记得要全局注册

对于vue-resource官方是这么介绍用法的:

   

这个跟ajax用法差不多也就是改变了一些语法格式,从获取路径到值的获取都是一样的,但是有一点是不同的就是ajax获取到的数据会自动转成json格式,而vue-resource获取到的数据要手段转成json格式,具体怎么转官方是这么介绍的:


具体用法:response = response.body;

这样就能转成json格式了,如果你输入的路径没错的话那么异步获取数据也就完成了下面是我的完整代码:


上面说完了异步获取数据下面说一下怎么把获取到的数据在页面输出且显示:

我在获取到后台传来的数据我是用this.seller来进行接收的,为了把数据传递到其他页面,然后我自定义了一个标签:


这个标签的header指向的是页面:


然后我在app.vue加上我自定的标签跟我刚刚接收数据参数名:


这样就能带上数据到其它页面了,重点一定要加上:seller,一定要加上冒号,否则会报错,这个是为了让页面执行这个标签的时候先执行异步数据的获取,成功后在执行标签,可能我的理解有误,如果各位有更好的理解希望能留言

这个是我传数据过去的页面叫header.vue,那么在这个页面怎么获取到我刚刚传过来的数据呢,我直接贴代码:


seller名字你们要修改,传过来的class名叫什么就改什么,那么该怎么调用呢:


这个完全按照你传过来的json数据为主,我的json数据:"seller" : { "name": "粥品香坊(回龙观)"}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值