补全前端部分的代码，还是那句话，postman真的好用，这个软件可以测试你写的后端接口，能不能正常返回数据。
打个比方，我这次写了mybaties_plus的分页，controller里面，返回的JSON如下
{
"records": [
{
"id": 13,
"name": "i"
},
{
"id": 14,
"name": "j"
},
{
"id": 15,
"name": "k"
},
{
"id": 16,
"name": "l"
},
{
"id": 19,
"name": "aq"
}
],
"total": 16,//总共多少数据
"size": 5,//每页最多多少数据
"current": 3,//当前第几页
"orders": [],
"searchCount": true,
"pages": 4
}
可以看出，真正的JSON数据，隐藏在“records”里面，这也是我的上个随笔里面，存储JSON数据集合的beans要这么获取的原因：
不废话了，开始分页代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div class="pageDiv" th:fragment="html">
<nav>
<ul class="pagination">
<li >
<a href="#nowhere" @click="jump('first')">首页</a>
</li>
<li >
<a href="#nowhere" @click="jump('pre')">上一页</a>
</li>
<li >
<a href="#nowhere" @click="jump('next')">下一页</a>
</li>
<li >
<a href="#nowhere" @click="jump('last')"> 末页</a>
</li>
</ul>
</nav>
</div>
</html>
这边偷懒了，没有让用户直接选择第几页的操作
jump函数如下，js写的，具体啥意思，建议结合上面的JSON数据来看
function jump(page,vue){
if('first'== page && !vue.pagination.first)
vue.list(1);
else if('pre'== page )//根据我的尝试，mybaties_plus自带的分页，假如页码参数start<1，还是查询出第一页数据，假如页码参数大于总共的页码数，查询的也是第一页的数据。。挺贴心的，不用害怕过界
vue.list(vue.pagination.current-1);//如果是跳转上一页，大胆的展示比当前页码小1的页码就行
else if('next'== page )//查询下一页，有点讲究，要让点到最后一页之后，还停留在当前页。
{
if(vue.pagination.total%vue.pagination.size==0)//记录数除以每一页最大记录，假如能整除，说明每一页数据能放满，有这么多页
{
if(vue.pagination.current!=(vue.pagination.total/vue.pagination.size)) vue.list(vue.pagination.current+1);//当前不到最后一页，照常加一页
else vue.list(vue.pagination.current);//到了最后一页，还是展示当前页
}
else //记录数和每一页的总数size不能整除，说明必定有一页，商品数量不满size这么多，则需要思考一下，
{
var a=vue.pagination.total%vue.pagination.size;//思路太麻烦不写了。。。提醒一下，js的变量，很迷，10/3会计算出3.333.。。
if(vue.pagination.current!=((vue.pagination.total-a)/vue.pagination.size+1)) vue.list(vue.pagination.current+1);//不到最后一页，照常展示+1页
else vue.list((vue.pagination.total-a)/vue.pagination.size+1);//否则显示当前页就好了
}
}
//“末页”的跳转
else if('last'== page )
{
var a=vue.pagination.total%vue.pagination.size;
if(vue.pagination.total%vue.pagination.size==0)//能整除
vue.list(vue.pagination.total/vue.pagination.size);
else vue.list((vue.pagination.total-a)/vue.pagination.size+1);
}
}