可以设置其他的页码和条数测试，均可以通过，所以分页的接口已经完成。单独拿出一个页面来实现
其实分页列表也没什么，重点在于做出列表局部刷新，减少页面请求。
具体的流程图如下：
按照上图中，可以看到我们只需要把上一页和下一页的ajax调用写好就能完成我们这个简单分页的网络请求。 至于第一页和最后一页的按钮事件也就是把页码设定为1和最后一页。
下一页的js调用：
var pageNum; function goToNextPage() { pageNum = parseInt(pageNum) + 1;//这里必须用parseInt(pageNum)这样才能拿到int型值，否则这里拿出来的是字符串 $.ajax({ type: "GET",//后端分页接口这里是没有指定请求方式 url: '/actionLog/findLogList?pageNum=' + pageNum + '&pageSize=15', dataType: 'json', cache: false, success: function (data) { if (data.code == 1) { updateList(data);//更新列表界面 pageNum = data.pageNum; $("#log-controller-now").html(pageNum);//把当前页面输出到网页对应ID的标签上面 } } }); } 从上面可以看到，分页列表的请求变化的是页码，然后每一页长度是固定的，然后拿到返回的数据进行加载就行了。
既然上面已经看到了下一页的界面数据加载了，
同理我们可以得出上一页的的js调用如下：
function goToLastPage() { pageNum = parseInt(pageNum) - 1; $.ajax({ type: "GET", url: '/actionLog/findLogList?pageNum=' + pageNum + '&pageSize=15', dataType: 'json', cache: false, success: function (data) { if (data.code == 1) { updateList(data); pageNum = data.pageNum; $("#log-controller-now").html(pageNum); } } }); } js写出来，下面需要把网页数据加载进去
需要使用模版进行网页数据的加载。
在这里我们需要引入模版的js，js名称是：doT.min.js。
从上面的上一页和下一页访问的js方法中，我们可以看到都使用了updateList(data)这个方法，这个方法就是来加载界面的
引入js后，我们需要开始写网页代码了
<div class="am-scrollable-horizontal am-text-ms" style="font-family: '微软雅黑';"> <table class="am-table am-text-nowrap"> <thead> <tr> <th>id</th> <th>IP地址</th> <th>系统名称</th> <th>访问地址</th> <th>SessionId</th> <th>浏览器名</th> </tr> </thead> <tbody id="log-table-body"> <script id="pagetmpl" type="text/x-dot-template"> <%--//这里js的ID为模版的id，type这个位模版类型--%> {{for(var i=0; i < it.length ; i++){ }} <tr> <%--这里取得全是json中的字段名称--%> <td> {{=it[i].id}}</td> <td>{{=it[i].ipAddrV4}}</td> <td>{{=it[i].osName}}</td> <td><span class="label label-danger"> {{ =it[i].description }} </span></td> <td>{{=it[i].sessionId}}</td> <td>{{=it[i].broName}}</td> </tr> {{ } }} </script> </tbody> </table> <div class="am-cf"> <div class="am-fr"> <ul class="am-pagination tpl-pagination" id="log-table-page-controller"> <li><a id="log-controller-last" onclick='goToLastPage()'>上一页</a></li> <li class="am-disabled"><a id="log-controller-now">1</a></li> <li><a id="log-controller-next" onclick="goToNextPage()">下一页</a></li> </ul> </div> </div> </div> 我们知道应该怎么追加列表条目了，现在我们需要的是实现追加。按照代码结构观察我们可以发现，我们要想实现数据自动装载到页面上面，我们需要让程序顺序执行就对了。
<%--这一点js我们写在网页的body后面，因为我们网页的列表数据是异步加载的。所以让他直接执行就好了--%> <script type="application/javascript"> $.ajax({ type: "GET", url: '<%=request.getContextPath()%>/actionLog/findLogList?pageNum=1&pageSize=15', dataType: 'json', //当这里指定为json的时候，获取到了数据后会自己解析的，只需要 返回值.字段名称 就能使用了 cache: false, success: function (data) { if (data.code == 1) { pagefn = doT.template($("#pagetmpl").html()); //初始化列表模板 updateList(data); //更新数据 pageNum = data.pageNum; } } }); function updateList(data) { $("#pagetmpl").empty(); //清空模板数据 $("#log-table-body").html(pagefn(data.data)); //加入数据到模板 } </script> 前面我们的JS是写在头部的，如果说自动执行肯定会找不到控件，所以我们需要让自动加载在页面完成后加载。也就是在</body>后加上
可能有人会发现我获取到的IPV4地址是0:0:0:0:0:0:0:1
这代码的问题只会出现在本机访问服务，获取ip时才会出现。而且如果你本机通过localhost、127.0.0.1和本机真实地址访问时获取到的ip也有区别
如果你把localhost改成127.0.0.1的话获取到的IP地址就是127.0.0.1，如果换成localhost获取到的就是0:0:0:0:0:0:0:1
然后我们在MainController中让页面可以跳转到行为日志表中
/* *日志主页 */ @GetMapping("/listActionLog") public String listActionLog() { return "list_action_log"; } 下面我们可以测试下，登录后输入http://localhost:8080/ssm/mvc/listActionLog
跳转到行为日志表页面
也许有人会问，URL中的ssm哪来的？
这个是在项目部署的时候配置的，可以看part2
至此 spring+springMVC+mybatis的简单整合基本结束
项目github地址:https://github.com/JinBinPeng/spring-springMVC-mybatis
主要参考于大牛Clone丶记忆的SSM集成之路
