[手把手教程][JavaWeb]优雅的SpringMvc+Mybatis应用（七）
项目github地址：https://github.com/pc859107393/SpringMvcMybatis
我的简书首页是：http://www.jianshu.com/users/86b79c50cfb3/latest_articles
上一期是：优雅的SpringMvc+Mybatis应用（六）
工具
- IDE为idea16
- JDK环境为1.8
- gradle构建，版本：2.14.1
- Mysql版本为5.5.27
- Tomcat版本为7.0.52
- 流程图绘制（xmind）
本期目标
- 完整列表分页
完整分页列表界面
其实分页列表也没什么，重点在于做出列表局部刷新，减少页面请求。
我们先要新建一个页面用来显示列表，由于我们的后台网页结构基本已经固定，所以我们在后台主页那边设定一个访问入口，然后链接上我们的网页。这里我把左边的一个菜单改成了列表，具体效果如图：
ssm应用七-访问列表-分页列表
在上一期结束后，我已经在列表的返回数据中加入了总页码和当前页码。这是返回的json数据：
{
"code": 1,
"msg": "查询成功",
"data": [
{
"id": 713,
"sessionId": "35B4776D32F8E12679FBC8F45A11F8F1",
"ipAddrV4": "127.0.0.1",
"osName": "Windows 10",
"broName": "Microsoft Edge 14",
"broVersion": "14.14393",
"description": "/mvc/listActionLog",
"other": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393",
"method": "GET"
}
],
"pageNum": 1,
"pageSize": 15,
"totalNum": 44
}
具体的流程图如下：
ssm应用七-访问列表-流程图
按照上面我的截图中，我们可以看到我们只需要把上一页和下一页的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', //当这里指定为json的时候，获取到了数据后会自己解析的，只需要 返回值.字段名称 就能使用了
cache: false, //不适用缓存
success: function (data) {
if (data.code == 1) {
updateList(data); //更新列表界面
pageNum = data.pageNum;
$("#log-controller-now").html(pageNum); //把当前页面输出到网页对应ID的标签上面
}
}
});
}
从上面我们可以看到，我们的分页列表的请求变化的是页码，然后每一页长度是固定（也可以按照你的喜好来）的，然后我们拿到返回的数据进行加载就行了。
既然我们上面已经看到了下一页的界面数据加载了，同理我们可以得出上一页的代码如下：
function goToLastPage() {
pageNum = parseInt(pageNum) - 1;
$.ajax({
type: "GET",
url: '/actionLog/findLogList?pageNum=' + pageNum + '&pageSize=15',
dataType: 'json', //当这里指定为json的时候，获取到了数据后会自己解析的，只需要 返回值.字段名称 就能使用了
cache: false,
success: function (data) {
if (data.code == 1) {
updateList(data);
pageNum = data.pageNum;
$("#log-controller-now").html(pageNum);
}
}
});
}
但是我们虽然说js写出来，但是怎么把网页数据加载进去呢？？？就这一点我踩了4个钟头的坑，然后问了下老司机，然后老司机告诉我使用模版进行网页数据的加载。在这里我们需要引入模版的js，js名称是：doT.min.js。模版官方文档。
从上面的上一页和下一页访问的js方法中，我们可以看到都使用了updateList(data)这个方法，这个方法就是来加载界面的，具体如下：
//这一点js我们写在网页的body后面，因为我们网页的列表数据是异步加载的。所以让他直接执行就好了
<script type="application/javascript">
$.ajax({
type: "GET",
url: '/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后，我们需要开始写网页代码了，先建立一个table，然后写表头(head,因为我使用的是妹子UI，所以我的表头是thead)，接着写列表部分(body，妹子UI里列表位tbody)，最后再把上一页、下一页和当前页的标签写上，如下：
<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这个位模版类型，具体的大家可以查看我引入的模版js的官方资源
{{for(var i=0; i < it.length ; i++){ }} //循环
<tr>
<td> {{=it[i].id}}</td> //这里取得全是json中的字段名称
<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>
可能上面的html中混合js代码会麻烦一点，看起来也不是那么清晰，但是我们只要细心体会也是没有问题的。网页中的js操作我都喜欢用标签的onclick属性，个人习惯纯属爱好，勿喷。
同时插入一个web页面优化的文章，有兴趣的可以看看。
里面讲解的知识点有：
- Google的Web优化最佳实践
- 雅虎的Web优化最佳实践
- 一些工具
虽然说文章很古老了，但是很多原理现在一样通用。
这一期比较短，我这边很多事情花费的时间太多了，今天就先这样。等两天出多角色管理和权限控制。
网友评论