這是博客系統(tǒng)的第三章吓妆，也是堅持寫這個系列文章的第三個月了。在這期間我建立了全棧技術交流群吨铸，感謝一路鼓勵我的朋友們行拢。也要感謝我的大學導師，是他們在我需要的時候诞吱，告訴我做人的品質舟奠。

今天這一篇竭缝，主要是關于上一張的編碼實現(xiàn)。為什么我要單路分離出來沼瘫？因為做事要分先后抬纸，明白道理，執(zhí)行才能確定無誤耿戚。

我們還是從老套路（Dao→Service→Controller）做起來湿故，讓我們先看看數(shù)據(jù)存儲相關的東西吧。

項目github地址：https://github.com/pc859107393/SpringMvcMybatis

我的簡書首頁是：http://www.reibang.com/users/86b79c50cfb3/latest_articles

上一期是：[手把手教程][第二季]java后端博客系統(tǒng)文章系統(tǒng)——No1

wordpress做的文章存儲

在上次我們已經看過了wordpress的數(shù)據(jù)庫模型（有朋友問我什么是逆向分析膜蛔，拿著別人的產品逆向推導這就是逆向分析）坛猪，我們可以很清楚的看到數(shù)據(jù)庫關于文章存儲的兩張表，它們分別存儲了文章的主體信息和文章的其他信息皂股，具體的我們再看看數(shù)據(jù)庫模型：

第二章文章系統(tǒng)-wordpress數(shù)據(jù)庫模型

在上面的途中墅茉，我們很明顯的看到數(shù)據(jù)庫關于文章的存儲主要分為兩張表：

• wp_posts 存放文章主體信息
• wp_postmeta 存放文章的附加信息

我們先看看wp_posts的主要結構：

DROP TABLE IF EXISTS `wp_posts`;
CREATE TABLE `wp_posts` (
  `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `post_author` bigint(20) unsigned NOT NULL DEFAULT '0' COMMENT '作者ID',
  `post_date` datetime NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '文章創(chuàng)建時間',
  `post_date_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '文章最近修改時間',
  `post_content` longtext COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文章內容',
  `post_title` text COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文章標題',
  `post_excerpt` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'publish' COMMENT '文章狀態(tài)',
  `comment_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open' COMMENT '評論狀態(tài)',
  `ping_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open' COMMENT 'ping狀態(tài)',
  `post_password` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '文章密碼',
  `post_name` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '文章名字',
  `to_ping` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `pinged` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_modified` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `post_modified_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `post_content_filtered` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_parent` bigint(20) unsigned NOT NULL DEFAULT '0',
  `guid` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
  `menu_order` int(11) NOT NULL DEFAULT '0',
  `post_type` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'post' COMMENT '文章類型',
  `post_mime_type` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '文件類型',
  `comment_count` bigint(20) NOT NULL DEFAULT '0' COMMENT '評論數(shù)',
  PRIMARY KEY (`ID`),
  KEY `type_status_date` (`post_type`,`post_status`,`post_date`,`ID`),
  KEY `post_parent` (`post_parent`),
  KEY `post_author` (`post_author`),
  KEY `post_name` (`post_name`(191))
) ENGINE=InnoDB AUTO_INCREMENT=289 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

上面的數(shù)據(jù)庫表，也是根據(jù)表生成的sql語句呜呐，當然注釋是我加上去的就斤。

可能看到這里很多朋友說我們現(xiàn)在只看到了表結構，而且又是你添加的注釋蘑辑，你這想怎么忽悠就怎么忽悠洋机。既然這樣，我們不妨一看數(shù)據(jù)庫以躯。

我的博客第三章文章系統(tǒng)-數(shù)據(jù)庫截圖片段

嗯槐秧，上面的圖需要放大后才看得清楚== 這個有點尷尬啄踊。
從上面的圖中我們可以看到如下關鍵信息：

關鍵信息就和上面的類似了忧设，為什么我挑選這三個：

• 博客的系統(tǒng)，主要的就是文章存儲和多媒體資源存儲
• 上面三個分別代表了文章颠通、圖片址晕、rar壓縮包
• 上面這個縮略表，剛好提取了目前我們可能會用到區(qū)分的不同信息

沒時間解釋了顿锰，我們直接分析上面的數(shù)據(jù)庫表中的字段谨垃。

• 文章
  • post_content一般有內容
  • post_status 會有多種狀態(tài)
  • post_type 指向文章 post
  • post_mime_type為空
• 多媒體文件
  • post_content 為空
  • post_status一般是inherit
  • post_type 一般是 attachment
  • post_mime_type 一般為具體的文件類型，如： image/png硼控、 application/rar

所以根據(jù)上面的一些信息刘陶，我們可以開始實現(xiàn)我們文章系統(tǒng)下面的文章列表接口了，首先按照老規(guī)矩實現(xiàn)Dao層：

import cn.acheng1314.domain.PostBean;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.io.Serializable;
import java.util.List;

/**
 * Created by 程 on 2016/11/27.
 */
@Repository
public interface PostDao extends Dao<PostBean> {

    @Override
    int add(PostBean postBean);

    @Override
    int del(PostBean postBean);

    @Override
    int update(PostBean postBean);

    @Override
    PostBean findOneById(Serializable Id);

    @Override
    List<PostBean> findAll();


    List<PostBean> findAllNew();

    /**
     * 分頁查詢
     *
     * @param offset 起始位置
     * @param limit  每頁數(shù)量
     * @return
     */
    List<PostBean> findAllPublish(@Param("offset") int offset, @Param("limit") int limit);
    
    /**
    * 獲取總的條數(shù)
    */
    int getAllCount();

    List<PostBean> getAllPostDateCount();
}

其實上面的接口我們可以看到和以前的差不多牢撼，畢竟數(shù)據(jù)庫操作就是一些基本的增刪改查匙隔。沒道理的，我們必須接著實現(xiàn)mapper熏版，mapper如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.acheng1314.dao.PostDao">
    <select id="findAllPublish" resultType="cn.acheng1314.domain.PostBean">
        SELECT
          `ID`,`post_title`,`post_date`,`post_content`
        FROM
          `wp_posts`
        WHERE
        `post_type`='post'
        AND
        `post_status`='publish'
        ORDER BY
        `ID`
        DESC
        LIMIT #{offset}, #{limit}
    </select>

    <select id="findAllNew" resultType="cn.acheng1314.domain.PostBean">
        SELECT
          `ID`,`post_title`
        FROM
          `wp_posts`
        WHERE
        `post_type`='post'
        AND
        `post_status`='publish'
        ORDER BY
        `ID`
        DESC
        LIMIT 1, 10
    </select>

    <select id="getAllCount" resultType="int">
        SELECT
        COUNT(*)
        FROM
        `wp_posts`;
    </select>

    <select id="getAllPostDateCount" resultType="cn.acheng1314.domain.PostBean">
    SELECT `post_date`,`ID` FROM `wp_posts`
    WHERE
      `post_type`='post'
      AND
      `post_status`='publish'
    ORDER BY `post_date` DESC
    </select>
</mapper>

我們上面唯一需要注意的就是我們的文章查詢的時候纷责，必須指定post_type='post'和post_status='publish'捍掺，這樣我們首頁展示的文章列表就是公開的文章。

每次按照套路來再膳，大家都會知道我這邊Dao層完成后挺勿，就應該進行Service層的操作，那么我們看下這里我們的Service層是怎么回事喂柒。

import cn.acheng1314.domain.DateCountBean;
import cn.acheng1314.domain.PostBean;
import cn.acheng1314.service.BaseService;

import java.util.List;

/**
 * Created by 程 on 2016/11/27.
 */
public interface PostService extends BaseService<PostBean> {
    @Override
    void add(PostBean postBean) throws Exception;

    @Override
    List<PostBean> findAll(int pageNum, int pageSize);

    List<PostBean> findAllPublish(int pageNum, int pageSize);

    /**
     * 獲取總條數(shù)
     * @return  獲取總條數(shù)
     */
    int getAllCount();

    /**
     * 獲取熱點文章
     * @return
     */
    List<PostBean> findAllNew();

    /**
     * 獲取所有文章的日期歸檔
     * @return  返回歸檔信息
     */
    List<DateCountBean> getAllPostDateCount();
}


import cn.acheng1314.dao.PostDao;
import cn.acheng1314.domain.DateCountBean;
import cn.acheng1314.domain.PostBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

/**
 * Created by 程 on 2016/11/27.
 */
@Service("postService")
public class PostServiceImpl implements PostService {

    @Autowired
    private PostDao dao;

    @Override
    public void add(PostBean postBean) throws Exception {

    }

    @Override
    public List<PostBean> findAll(int pageNum, int pageSize) {
        return null;
    }

    @Override
    public List<PostBean> findAllPublish(int pageNum, int pageSize) {
        //因為數(shù)據(jù)庫內容是從第一條出的數(shù)據(jù)不瓶，所以我們查詢的 起始位置 = 頁碼 * 條數(shù) + 1；
        pageNum -= 1;
        return dao.findAllPublish(pageNum * pageSize + 1, pageSize);
    }

    @Override
    public int getAllCount() {
        return dao.getAllCount();
    }

    @Override
    public List<PostBean> findAllNew() {
        return dao.findAllNew();
    }

    @Override
    public List<DateCountBean> getAllPostDateCount() {
        /*
         * 這里存入的json數(shù)據(jù)為：
         *  [ {"date": "2015-11-16", "idList": [ "75", "73"] } ]
         *  解釋一下：日期歸檔本身應該是個下拉列表胳喷。下拉列表中的某個item包含了這個日期有：文章數(shù)量湃番，文章ID
         */
        List<PostBean> tmpList = new ArrayList<>(); //創(chuàng)建日期歸檔的數(shù)據(jù)集合
        if (null != dao.getAllPostDateCount()
                && !dao.getAllPostDateCount().isEmpty()) {  //從dao層獲取的文章日期和ID的集合不為空
            tmpList.addAll(dao.getAllPostDateCount());  //先將獲取的數(shù)據(jù)存入緩存變量中，避免多次讀取數(shù)據(jù)庫
            List<DateCountBean> myDateCount = new ArrayList<>();    //創(chuàng)建一個日期歸檔的集合格式和上面所訴的json數(shù)據(jù)格式相同
            //也就是外層是一個集合吭露，里面是多個對象
            for (PostBean tmpBean : tmpList) {  //遍歷獲取文章信息數(shù)據(jù)
                DateCountBean dateCountBean = new DateCountBean();  //創(chuàng)建文章信息緩存的對象
                if (!myDateCount.isEmpty() &&
                        DateFormat.getDateInstance().format(tmpBean.getPostDate().getTime()).equals(myDateCount.get(myDateCount.size() - 1).getDate())) {
                    //上一個日期和當前日期的相同吠撮，則只需存入ID
                    myDateCount.get(myDateCount.size() - 1).getIdList().add(tmpBean.getId());
                } else {    //集合為或者上一條的日期和當前的日期不相同，添加一條數(shù)據(jù)
                    //把文章緩存信息添加到集合中
                    dateCountBean.setDate(DateFormat.getDateInstance().format(tmpBean.getPostDate().getTime()));    //日期格式化讲竿，把date格式化為String泥兰，也就是2015-09-28 00:01:07 ==> 2015-09-28
                    List<String> idList = new ArrayList<>();
                    idList.add(tmpBean.getId());
                    dateCountBean.setIdList(idList);
                    myDateCount.add(dateCountBean);
                }
            }
            return myDateCount;
        } else return null;
    }
}

在上面我這里在一個Service層的一個接口寫這么多代碼？對的题禀，沒錯鞋诗，我們強調的是Service層用來做數(shù)據(jù)驅動，那么我們需要在Service層完成一些基本數(shù)據(jù)的組織迈嘹。所以說我們最后首頁的數(shù)據(jù)如下：

{
    "code": 1,
    "msg": "success",
    "data": {
        "date": [
            {
                "date": "2016-5-19",
                "idList": [
                    "192",
                    "191"
                ]
            },
            {
                "date": "2016-3-30",
                "idList": [
                    "187"
                ]
            }
        ],
        "posts": [
            {
                "id": "282",
                "postDate": "Nov 16, 2016 12:51:13 AM",
                "postContent": "多角色控制思路整理</h3>\r\n關于多角色控制削彬，起始用戶角色按照用戶職能分工，一般來說思路如下",
                "postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應用（八）"
            },
            {
                "id": "278",
                "postDate": "Nov 9, 2016 8:46:18 PM",
                "postContent": "其實分頁列表也沒什么秀仲，重點在于做出<strong>列表局部刷新融痛，減少頁面請求</strong>。\r\n\r\n我們先要新建一個頁面用來顯示列表神僵，由于我們的后臺網(wǎng)頁結構基本已經固定雁刷，所以我們在后臺主頁那邊設定一個訪問入口，然后鏈接上我們的網(wǎng)頁保礼。這里我把左邊的一個菜單改成了列表沛励，具體效果如圖：",
                "postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應用（七）"
            }
        ],
        "newPosts": [
            {
                "id": "282",
                "postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應用（八）"
            },
            {
                "id": "278",
                "postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應用（七）"
            },
            {
                "id": "192",
                "postTitle": "正如雨下"
            }
        ],
        "totalNum": 19,
        "pageNum": 1,
        "pageSize": 10
    }
}

由于后臺數(shù)據(jù)存儲的是富文本，所以我們能看到有很多網(wǎng)頁標簽炮障。

光是這樣說明也是沒有多少實際意義的目派，我們仍然需要曬一曬具體的Controller的方法的代碼，如下：

    @RequestMapping("/main")
    public ModelAndView frontMain() {
        ModelAndView view = new ModelAndView("frontMain");
        view.addObject("homeJson", getHomeJson(null));  //把首頁需要的json數(shù)據(jù)直接扔到view里面胁赢，在下面的js代碼中可以看到如何使用
        return view;
    }
    
    @RequestMapping(value = "/home"
            , produces = "application/json; charset=utf-8")
    @ResponseBody
    public Object getHomeJson(User user) {
        if (null != user) {
            //埋點企蹭，AOP日志記錄
        }
        HomeBean homeBean = new HomeBean(); //首頁內容
        HomeBean.DataBean dataBean = new HomeBean.DataBean();   //首頁下面的Data內容對象
        try {
            int toalNum; //總頁碼

            toalNum = postService.getAllCount();    //先把總條數(shù)賦值給總頁數(shù)，作為緩存變量，減少下面算法的查找次數(shù)

            toalNum = toalNum % 10 > 0 ? toalNum / 10 + 1 : toalNum / 10;     //在每頁固定條數(shù)下能不能分頁完成练对，有余則加一頁碼

            List<PostBean> postsData = postService.findAllPublish(1, 10);   //首頁下面的文章內容
            List<PostBean> newData = postService.findAllNew();   //首頁下面的文章內容
            if (null == postsData || postsData.isEmpty()) {
                dataBean.setPosts(null);
            } else {
                dataBean.setPosts(postsData);   //首頁文章列表信息設定
            }
            if (null == newData || newData.isEmpty()) {
                dataBean.setNewPosts(null);
            } else {
                dataBean.setNewPosts(newData);   //首頁文章列表信息設定
            }
            List<DateCountBean> allPostDateCount = postService.getAllPostDateCount();
            if (null != allPostDateCount && !allPostDateCount.isEmpty()) {
                dataBean.setDate(allPostDateCount);
            } else {
                dataBean.setDate(null);
            }
            dataBean.setPageNum(1);
            dataBean.setPageSize(10);
            dataBean.setTotalNum(toalNum);
            homeBean.setData(dataBean);
            homeBean.setCode(ResponseObj.OK);
            homeBean.setMsg(ResponseList.OK_STR);
            return new GsonUtils().toJson(homeBean);
        } catch (Exception e) {
            e.printStackTrace();
            //查詢失敗
            homeBean.setCode(ResponseObj.FAILED);
            homeBean.setMsg(ResponseList.FAILED_STR);
            return new GsonUtils().toJson(homeBean);
        }
    }

注意看我上面代碼的Try-Catch處理遍蟋，我這里基本目標是保證程序功能正常，不會因為我這邊的異常而產生其他錯誤信息螟凭。

那我們都看到了首頁上面的一些數(shù)據(jù)虚青，那么我們現(xiàn)在是不是需要查看前端頁面的完成呢？此處不必驚慌螺男，前端頁面的完成棒厘，我們是不會少的，而且這一期完成后的代碼下隧，我也一樣會同步到github奢人。

現(xiàn)在我們需要的是把前臺頁面列表加載出來并且實現(xiàn)局部刷新。so淆院，我們需要先獲取到前臺頁面何乎，具體代碼省略，我們展示核心代碼：

    <!--從modelAndView的名為“homeJson”的Object中獲取數(shù)據(jù)土辩，并且轉換位json的字符串支救，然后再轉換位json對象-->
    var homeJsonStr = JSON.stringify(${homeJson});
    var homeJsonObj = JSON.parse(homeJsonStr);
    var pageNum = homeJsonObj.data.pageNum; //獲取當前頁碼
    var pageSize = homeJsonObj.data.pageSize;   //獲取頁面長度
    var totalNum = homeJsonObj.data.totalNum;   //獲取總得頁碼
    if (homeJsonObj.code == 1) {    //獲取數(shù)據(jù)成功
        pagefn = doT.template($("#pagetmpl").html());   //初始化列表模板
        updateList(homeJsonObj.data.posts);   //更新數(shù)據(jù)
    } else {
        alert("獲取數(shù)據(jù)失敗拷淘！請聯(lián)系管理員");
    }

    function updateList(data) {
        $("#pagetmpl").empty(); //清空模板數(shù)據(jù)
        $("#blog-table-list").html(pagefn(data));   //加入數(shù)據(jù)到模板
    }

    function goToNextPage() {
        pageNum = parseInt(pageNum) + 1;
        $.ajax({
            type: "POST",
            url: '<c:url value="/front/findPublishPost"/>',
            data: {pageNum: pageNum, pageSize: pageSize},
            dataType: 'json', //當這里指定為json的時候各墨，獲取到了數(shù)據(jù)后會自己解析的，只需要 返回值.字段名稱 就能使用了
            cache: false,
            success: function (data) {
                if (data.code == 1) {
                    updateList(data.data);
                    pageNum = data.pageNum;
                    $("#log-controller-now").html(pageNum);
                }
            }
        });
    }

    function goToLastPage() {
        pageNum = parseInt(pageNum) - 1;
        $.ajax({
            type: "POST",
            url: '<c:url value="/front/findPublishPost"/>',
            data: {pageNum: pageNum, pageSize: pageSize},
            dataType: 'json', //當這里指定為json的時候启涯，獲取到了數(shù)據(jù)后會自己解析的贬堵，只需要 返回值.字段名稱 就能使用了
            cache: false,
            success: function (data) {
                if (data.code == 1) {
                    updateList(data.data);
                    pageNum = data.pageNum;
                    $("#log-controller-now").html(pageNum);
                }
            }
        });
    }

當然上面的代碼，必須有jquery结洼、doT.min.js和json2.js才能運行黎做。

最后出來的整體效果，也就和上一章的截圖類似补君，具體圖片就不再截圖了引几。稍后上傳本章的代碼到github