之前写了一篇无分页的 vue 展示列表,
https://segmentfault.com/a/11…
而有分页的列表和无分页的列表又非常类似,所以在这里介绍一下有分页的列表。关键还是要弄懂每一行代码,深刻理解每一行代码,才能在遇到类似的业务时,设计出对应的方案。
以后会陆续的增加
1.jquery+mybatis 的分页
2.jquery+hibernate 的分页
3.vue+hibernate 的分页
4.angular+mybatis 的分页
等等等吧,其实都是非常类似的,把一个搞懂了,其他的就是规则稍微变化一下,难度都差不多
不多说了,有问题留言吧
–【有分页分支】
面试的时候问分页的也是比较多的,其实各种分页都是类似的,在 SSH 阶段我 i 们学习 jquery+hibernate 分页,在 SSM 阶段我们学习了 jquery+SSM 分页。通过比较我们发现这两个分页的前端处理方式非常类似。此处我们学习 vue 分页,其实他们的写法都是非常类似的,只要反复对比练习,都可以掌握,面试的时候一般说出一种就可以了。
分页和不分页的 url 请求参数不同
分页需要向后台传页码
接口测试
http://localhost:8888/classes?start=2 第二页
http://localhost:8888/classes?start=1 第一页
–pageNum 属性代表现在查询的页码,pageSize 代表每页显示的数据条数,size 代表总共有多少页,total 代表有多少条数据,list 是查询过来的数据,prePage 是上一页的页码,nextPage 是下一页的页码,lastPage 是末页的页码。
– 以上的属性需要我们对应接口返回的数据,自行能够写出,会在分页的时候使用,非常重要
– 这些属性在调用的时候区分大小写吗?如何调用?
– 如果以前没有写过分页,那么此处最好多练习几遍,以后慢慢的自己就可以写分页工具类了。
后台代码:
后台代码更是简单了,和之前学习的基本一样,只是把 page 对象作为返回的参数,之前是把 page 对象放到 request 作用域中。
@GetMapping(“/classes”) // 显示 List
public PageInfo<com.zz.entity.Class> classes(@RequestParam(value = "start", defaultValue = "0") int start,
@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {PageHelper.startPage(start, size, "classid desc");
ClassExample classExample = new ClassExample();
List<com.zz.entity.Class> classList = classService.selectByExample(classExample);
PageInfo<com.zz.entity.Class> page = new PageInfo<>(classList, 5); // 5 表示导航分页最多有 5 个,像
// [1,2,3,4,5]
return page;
}
– 这个代码不多做介绍了,在浏览器测试一下接口,没有错误说明接口正确
之前学习的放到 request 作用域的写法,
code as below
@RequestMapping(“/studentList”) // 显示 List
public String studentList(Model m, @RequestParam(value = "start", defaultValue = "0") int start,
@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {PageHelper.startPage(start, size, "studentid desc");
StudentExample studentExample = new StudentExample();
List<Student> studentList = studentMapper.selectByExample(studentExample);
PageInfo<Student> page = new PageInfo<>(studentList);
m.addAttribute("studentList", studentList);
m.addAttribute("page", page);
return "studentList";
}
–model 是什么,回忆 mvc 时学习的内容
var data4Vue={classes:[], pagination: {}}// 数据域增加分页部分
list: function(start){
var url = "classes?start="+start;// 分页查询
axios.get(url).then(function(response) {
vue.pagination = response.data;
console.log(vue.pagination);
console.log(response.data);
vue.classes = response.data.list;// 分页查询
});
},
–pagination 代表的就是上面的 json 对象,此处为什么有用 json 对象了呢?用 json array 是否可以?
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了 –>jquery ready()–>body onload 事件
// 查询第一页
this.list(1);
},
<input type=”button” v-on:click=”prePage” value=” 上一页”/>
当前 {{pagination.pageNum}} 页
<input type=”button” v-on:click=”nextPage” value=” 下一页”/>
方法域增加方法
prePage:function(){
vue.list(pagination.prePage);
}
nextPage: function(){
vue.list(pagination.prePage);
}
– 方法名叫 prePage 和 nextPage 就是为了和 mybatis 分页返回的属性名保持一致。
effect as below
– 下节课增加首页和末页的功能,解决一些分页的 bug 问题