經過前面幾篇文章的介紹，現在已經把博客後臺管理和前臺界面都已經搭建好了，其中前端界面是我完全手寫實現的，其中分頁部分是比較麻煩的，這兒簡單說下我是如何完成的。分頁涉及三個要素：1、請求地址；2、每頁的數量；3、當前是第幾頁，所以我這的的做法如下：
1. 在分頁的div上添加如下屬性：

1 <div class="pageSection" addr="/home/first" rows="3" page="1">
2     <ul>
3     </ul>
4 </div>

其中addr表示地址，rows表示每頁的數量、page表示當前頁索引。在頁面加載時首先從後臺獲取要顯示數據的條數，然後算出總的頁數，並生成分頁的標簽，代碼如下：

 1 $.ajax({
 2     url:"/home/firstcount",
 3     success:function(data){
 4         if(data && data.msg){
 5             var count = parseInt(data.msg);
 6             if(count > 0){
 7                 $(".pageSection ul").html("");
 8                 var rows = parseInt($(".pageSection").attr("rows"));
 
 9                 var temp = parseInt(count / rows);
10                 if(temp * rows == count){
11                     count = temp;
12                 } else {
13                     count = temp + 1;
14                 }
15                 for(var i=1; i<=count; i++){
16                     var content 
 
= ‘<li class="item">‘ + i + ‘</li>‘;
17                     $(".pageSection ul").append(content);
18                 }
19                 $(".pageSection .item:first").addClass("select");
20                 $(".pageSection .item").mouseenter(function(){
21                     $(this).addClass("hover");
22                 }).mouseleave(function(){
23                     $(this).removeClass("hover");
24                 }).click(function(){
25                     $(".pageSection .item").removeClass("select");
26                     var page = $(this).text();
27                     $(".pageSection").attr("page", page);
28                     $(this).addClass("select");
29                     loadArticle($(".pageSection").attr("addr"), 
30                             $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
31                     window.scrollTo(0,0);
32                 });
33                 loadArticle($(".pageSection").attr("addr"), 
34                     $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
35             }
36         }
37     }
38 });
39 function loadArticle(addr, rows, page){
40     var pagedata = {};
41     pagedata.rows = rows;
42     pagedata.page = page;
43     $.ajax({
44         url:addr,
45         type:"post",
46         data:pagedata,
47         success:function(data){
48             $(".maincontainer .left .articles").html("");
49             for(var i in data){
50                 var content = ‘<div class="contentSection article">‘;
51                 content += ‘<div class="articleTitle" addr="/articles/article/‘ + data[i].id + ‘">‘ + data[i].name + ‘</div>‘
52                 content += ‘<div class="articleContent">‘;
53                 content += data[i].summary;
54                 content += ‘</div>‘;
55                 content += ‘<div class="articleInfo">‘;
56                 content += ‘<span>分類：‘ + data[i].category.name + ‘</span>‘;
57                 content += ‘<span>作者：‘ + data[i].author.name + ‘</span>‘;
58                 content += ‘<span>時間：‘ + data[i].createTime + ‘</span>‘;
59                 content += ‘</div>‘;
60                 content += ‘</div>‘;
61                 $(".maincontainer .left .articles").append(content);
62             }
63             $(".articleTitle").click(function(){
64                 var addr = $(this).attr("addr");
65                 window.location = addr;
66             });
67         }
68     });
69 }

在點擊分頁標簽後就會通過ajax來從後臺獲取當前頁的數據，然後加載到界面上。截圖如下：

這種方法比較笨，是反復通過ajax回調完成的，雖然沒什麽問題，但是在設計上是叫做Calback Hell，可以通過promise的方式來重寫，但因為這只是我的博客的模板，前臺界面後面會重新設計，所以這些工作就安排到以後了。今天的代碼下載地址是：https://pan.baidu.com/s/1T8eDeAe8iCxK8uqOOt5YHA，密碼：acmt

9. 前端文章分頁功能實現