Question

vue前端收到的数据与后台发送的数据不一致是什么原因？

vue前端收到的数据与后台发送的数据不一致是什么原因？关联的shop属性前端未打印





Answer 1

打印出后台从数据库中查询出的数据，发现字段是完整的，并无缺失；打印JSON字符串，发现缺少字段，定位到问题入口；查看JSON.toJSONString()方法后，并未发现异常；将该模块的所有文件重新审阅一遍后发现，实体类User.java中有个布尔类型的成员变量的get方法不对头；这就导致JSON将User对象转换成json字符串时，无法通过反射获取到其state字段，最终给前端的json数据也就没有该字段。


处理方法，重写实体类User的get、set方法并检验，确保不再出错。重启后，测试显示正常。查看后台支持的编码格式和前端axios发送过去的的编码格式是否一致。不一致就会出现跨域问题。至于为什么也不明白，可能是浏览器认为不一致的编码就是跨域也可能就是浏览器的bug。Vue请求后端数据的方法，首先在api文件夹下，建立接口js文件；然后确定baseURL和url后缀；最后输入需要获取数据的代码即可。千锋教育截止目前已在北京、深圳、上海、广州、郑州、成都、大连等20余个核心城市建立直营校区，服务近20万学员、近千所高校和数万家企业。

Answer 2

使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])
具体举例如下：
1、导入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
2、基于全局Vue对象使用http
// 通过someUrl获取后台数据，成功后执行then的代码
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
3、在一个Vue实例内使用$http
// $http是在vue的局部范围内的实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
说明：
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。