使用vue-resource进行数据交互

一.使用vue-resource插件进行数据交互式,返回的并不是直接的json数据,其实还封装了一层。

如下代码:直接使用 res.result.list 取不到数据。

1 methods:{
2         cartview:function(){
3             var _this = this;
4             this.$http.get("data/cartData.json").then(function(res){
5                 _this.productList = res.result.list;
6                 _this.totalMoney = res.result.totalMaoney;
7             });
8         }
9     }

错误信息如下:

这时进行断点调试:

 F12 打开chrome浏览器控制台——ctrl+p ——查找相应的代码文件(car.js 即上面那段代码所在的文件。)——在19行打断点——刷新——鼠标移到res,可以看到整个封装好的结构,这里我们看到result实际上是在data里面。

所以正确获取数据的代码如下:

1 methods:{
2         cartview:function(){
3             var _this = this;
4             this.$http.get("data/cartData.json").then(function(res){
5                 _this.productList = res.data.result.list;
6                 _this.totalMoney = res.data.result.totalMaoney;
7             });
8         }
9     }

json文件结构如如下;

 1 {
 2   "status":1,
 3   "result":{
 4     "totalMoney":109,
 5     "list":[
 6       {
 7         "productId":"600100002115",
 8         "productName":"黄鹤楼香烟",
 9         "productPrice":19,
10         "productQuantity":1,
11         "productImage":"img/goods-1.jpg",
12         "parts":[
13           {
14             "partsId":"10001",
15             "partsName":"打火机",
16             "imgSrc":"img/part-1.jpg"
17           },
18           {
19             "partsId":"10002",
20             "partsName":"打火机",
21             "imgSrc":"img/part-1.jpg"
22           }
23         ]
24       },
25       {
26         "productId":"600100002120",
27         "productName":"加多宝",
28         "productPrice":8,
29         "productQuantity":5,
30         "productImage":"img/goods-2.jpg",
31         "parts":[
32           {
33             "partsId":"20001",
34             "partsName":"吸管",
35             "imgSrc":"img/part-2.jpg"
36           }
37         ]
38       },
39       {
40         "productId":"600100002117",
41         "productName":"金装黄鹤楼",
42         "productPrice":25,
43         "productQuantity":2,
44         "productImage":"img/goods-1.jpg",
45         "parts":[
46           {
47             "partsId":"10001",
48             "partsName":"打火机-1",
49             "imgSrc":"img/part-1.jpg"
50           },
51           {
52             "partsId":"10002",
53             "partsName":"打火机-2",
54             "imgSrc":"img/part-1.jpg"
55           }
56         ]
57       }
58     ]
59   },
60   "message":""
时间: 2024-10-14 10:18:02

使用vue-resource进行数据交互的相关文章

vue 前后端数据交互问题解决

先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 第三  解决跨域问题 处理数据交互 这样前端就拿到了数据 原文地址:https://www.cnblogs.com/tangda/p/10987082.html

使用django和vue进行数据交互

一.前端请求的封装 1.将请求地址封装起来,以便日后修改,在src/assets/js目录下创建getPath.js文件 export default function getUrl(str) { let url = 'http://localhost:8000/' + str; return url; } 2.在同一个目录下创建axios.js文件 我的前端数据交互使用的模块使用的是axios import axios from 'axios' import getUrl from './ge

vue+mockjs 模拟数据,实现前后端分离开发

在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发. 与以往的自己

也谈跨域数据交互解决方案

先来句题外话,最开始Ajax应该是用来特指用XMLHttpRequest传输数据这门技术,但就像最近大家把一切web新技术都归到html5名下一样,现在一切异步获取数据的手段都被人称之为Ajax. 由于JavaScript同源策略的存在,跨域数据交互是个老生常谈的话题了.网上相关文章很多,不过随着时间的推移和浏览器的更新,一部分解决方案已经不适用了,同时也出现了一些更好的方法.抛开纯服务器Proxy这种跟前端没什么关系的方案不说,这里简单总结下常见的其他几种方式. JSONP JSONP是最常见

Vue2.0子同级组件之间数据交互

接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一 .我们先来创建中央事件总线,在src/assets/下创建一个eventBus.js,内容如下(eventBus中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线.) 二 . 创建一个firstChild组件,引入eventBus这个事件总

Vue之九数据劫持实现MVVM的数据双向绑定

vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛戳这里 整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2.实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数3.实现

jsp数据交互基础

一.动态网页开发基础 1.动态网页:能跟用户进行交互的网页,能够处理用户请求的网页 2.B/S架构:浏览器:客户端零维护:与操作系统平台的关系最小化:在响应速度和安全性上需要花费更多设计成本 C/S架构:需要专门的客户端应用:客户端需要单独维护和升级:对客户端操作系统一般有限制:能充分发挥客户端处理能力,客户端响应快 3.URL:Uniform Resource Locator统一资源定位符 http://localhost:8080/xxxx http:协议 localhost:8080代表I

AJAX+REA实现前后台数据交互的加密解密

AJAX+REA实现前后台数据交互的加密解密 1.创建js文件Encryption.js /**  * 加密解密  */ /** RSA加密用 生成key */ function bodyRSA(){ /** 1024位的key参数写130,2014位的key参数写260 */ setMaxDigits(130); /** ajax 调用后台方法,取回公钥 */ var keyR ;     $.ajax({      url: "/GHGL/Key/pk",//请求后台的url,本例

浅谈混合开发与Android,JS数据交互

本文是作者原创,如转载请注明出处! 一.概论 现在时代已经走过了移动互联网的超级火爆阶段,市场上移动开发人员已经趋于饱和,显然,只会原生APP的开发已不能满足市场的需求,随着H5的兴起与火爆,H5在原生APP中的使用越来越广泛,也就是我们常说的混合开发(Hybrid APP).最新很火的微信小程序相信大家都是知道的,实际上微信小程序加载的界面就是一个HTML5的界面,HTML5界面在一些电商类的APP中主要承担展示数据的作用,但是他的作用并不仅限于此,最起码js调用原生方法和原生调用js的方法是

Struts2基本使用(三)--数据交互

Struts2中的数据交互 在Struts2中我们不必再使用request.getParameter()这种方式来获取前台发送到服务器的参数. 我们可以在服务器端的Java类中直接声明一个和前台发送数据的同名变量即可,然后生成它的set/get方法即可以实现前后台数据的交互. 假如我们在前台页面中的表单如下: <form method="post" action="demo!register.action"> username:<input typ