最近在自学vue,开始以为跟angular大同小异,但是真正使用的时候发现还是很多不一样的地方,可能是因为刚刚开始理解的还不够深入O(∩_∩)O。 下面说说前端jsp怎么和后台交互,后台使用的是springMvc框架。
html部分
xxx
xxx
xx
js部分,此处需要引入vue-resource库才能使用$http请求,可以用: https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js
$(function(){
var params = {};
var vm = new Vue( {
el: '#app',
data: {
currentPage :"1",
exceptionList : [],
totalItems: ''
},
created: function () { // created为创建Vue实例后立马执行
// `this` 指向 vm 实例
// var pageIndex = 1;
// params.length = 10;
// params.start = (pageIndex -1) * 10;
// POST请求
this.$http.post(
BasePath + "/PriceException/search.do",
// 请求体重发送的数据
{length: '10', start : 2},{emulateJSON:true}).then(function (resp) {
// 请求成功回调
debugger;
this.totalItems = resp.data.data.count;
// this.$set('exceptionList', resp.data.data.posts);
this.exceptionList = resp.data.data.posts;
// this.totalItems = resp.data.count;
}, function () {
// 请求失败回调
});
}
} );
vm.$watch("currentPage",function(val,oldval){
alert(val);
})//主动调用$watch方法来进行数据监测
})
java后台部分
@RequestMapping(value = "/search", method= RequestMethod.POST )
@ResponseBody
public Object searchResult(PagenationVo pVo) {
参数pVo对象里面一定要包含js传递过来的属性。
到这里,这样就能实现vue和后台交互了。
PS:在使用过程中,开始怎么都不能把参数传到后台,springMvc的Controller怎么都拿不到值, 一直报错400、415错误,应该是参数解析问题,实验了很久,按上面那种方式终于成功了,汗!
还有因为我是分页功能,需要传入length参数,开始写成:{length: 10, start : 2}也是传不过去这两个参数,搞了很久,后来才知道是因为length:10,这里把它当做10个参数传入了
改成:{length: ‘10’, start : 2}就好, 目前还没搞明白为什么会这样,难道是因为vue-resource冲突??