共计 2668 个字符，预计需要花费 7 分钟才能阅读完成。
之前写了一篇无分页的 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 问题
