spring+springMVC+mybatis的整合 part10

可以設定其他的頁碼和條數測試，均可以通過，是以分頁的接口已經完成。單獨拿出一個頁面來實作

其實分頁清單也沒什麼，重點在于做出清單局部重新整理，減少頁面請求。

具體的流程圖如下：

按照上圖中，可以看到我們隻需要把上一頁和下一頁的

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

跳轉到行為日志表頁面

Paste_Image.png

也許有人會問，URL中的ssm哪來的？

這個是在項目部署的時候配置的，可以看part2

至此 spring+springMVC+mybatis的簡單整合基本結束

項目github位址:

https://github.com/JinBinPeng/spring-springMVC-mybatis

主要參考于大牛

Clone丶記憶

的SSM內建之路