spring+springMVC+mybatis的整合 part10-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

spring+springMVC+mybatis的整合 part10

简介: 可以设置其他的页码和条数测试,均可以通过,所以分页的接口已经完成。单独拿出一个页面来实现 其实分页列表也没什么,重点在于做出列表局部刷新,减少页面请求。 具体的流程图如下: 按照上图中,可以看到我们只需要把上一页和下一页的ajax调用写好就能完成我们这个简单分页的网络请求。

可以设置其他的页码和条数测试,均可以通过,所以分页的接口已经完成。单独拿出一个页面来实现

其实分页列表也没什么,重点在于做出列表局部刷新,减少页面请求。
具体的流程图如下:


ssm%E5%BA%94%E7%94%A8%E4%B8%83-%E8%AE%BF

按照上图中,可以看到我们只需要把上一页和下一页的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时才会出现。而且如果你本机通过localhost127.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
跳转到行为日志表页面

Paste_Image.png

也许有人会问,URL中的ssm哪来的?
这个是在项目部署的时候配置的,可以看part2
至此 spring+springMVC+mybatis的简单整合基本结束
项目github地址:https://github.com/JinBinPeng/spring-springMVC-mybatis

主要参考于大牛Clone丶记忆的SSM集成之路

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章