[手把手教程][JavaWeb] 优雅的 SpringMvc+Mybatis 应用(七)

阅读 727
收藏 37
2016-11-17
原文链接:acheng1314.cn

[手把手教程][JavaWeb]优雅的SpringMvc+Mybatis应用(七)

项目github地址:github.com/pc859107393…

我的简书首页是:www.jianshu.com/users/86b79…

上一期是:优雅的SpringMvc+Mybatis应用(六)

扫描下面二维码加入交流QQ群:

工具

  • IDE为idea16
  • JDK环境为1.8
  • gradle构建,版本:2.14.1
  • Mysql版本为5.5.27
  • Tomcat版本为7.0.52
  • 流程图绘制(xmind)

本期目标

完整分页列表界面

其实分页列表也没什么,重点在于做出列表局部刷新,减少页面请求

我们先要新建一个页面用来显示列表,由于我们的后台网页结构基本已经固定,所以我们在后台主页那边设定一个访问入口,然后链接上我们的网页。这里我把左边的一个菜单改成了列表,具体效果如图:

在上一期结束后,我已经在列表的返回数据中加入了总页码和当前页码。这是返回的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
}

具体的流程图如下:

按照上面我的截图中,我们可以看到我们只需要把上一页和下一页的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后面,因为我们网页的列表数据是异步加载的。所以让他直接执行就好了
 

引入js后,我们需要开始写网页代码了,先建立一个table,然后写表头(head,因为我使用的是妹子UI,所以我的表头是thead),接着写列表部分(body,妹子UI里列表位tbody),最后再把上一页、下一页和当前页的标签写上,如下:

id IP地址 系统名称 访问地址 SessionId 浏览器名

可能上面的html中混合js代码会麻烦一点,看起来也不是那么清晰,但是我们只要细心体会也是没有问题的。网页中的js操作我都喜欢用标签的onclick属性,个人习惯纯属爱好,勿喷。

同时插入一个web页面优化的文章,有兴趣的可以看看。

里面讲解的知识点有:

  • Google的Web优化最佳实践
  • 雅虎的Web优化最佳实践
  • 一些工具

虽然说文章很古老了,但是很多原理现在一样通用。

这一期比较短,我这边很多事情花费的时间太多了,今天就先这样。等两天出多角色管理和权限控制。

评论