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

时间:2022-08-28 15:31:27

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

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

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

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

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

具体用法:response = response.body;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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