[手把手教程][第二季]java 後端部落格系統文章系統——No1

pc859107393發表於2016-12-05
Java後端

轉眼到了部落格系統第二章了。這一張我們主要介紹文章系統。畢竟部落格系統的核心就是文章的釋出和閱讀。閒話不多說，老規矩走起來。

工具

  • IDE為idea16
  • JDK環境為1.8
  • gradle構建，版本：2.14.1
  • Mysql版本為5.5.27
  • Tomcat版本為7.0.52
  • 流程圖繪製（xmind）
  • 建模分析軟體PowerDesigner16.5

思維導圖

按照前面我們第二季第一章闡述的，我們需要先了解我們這個文章系統的整個功能模組組合，也就是我們的思維導圖，只有這樣才能實現整體功能的架設。下面如圖所示：

[手把手教程][第二季]java 後端部落格系統文章系統——No1


其實在上面的系統中，我已經把前端使用者的文章查閱功能排除掉的。為什麼我這裡會單獨排掉前端的查閱呢？前端的文章查閱功能基本在後端的所有文章中已經有體現相應功能。大概功能如下：

  • 前端文章查閱
    • 文章列表
    • 文章歸檔
    • 文章分類
    • 文章詳情

流程圖

[手把手教程][第二季]java 後端部落格系統文章系統——No1


在上面的流程圖中，我們可以看到我們清楚的把業務流程描述出來了。可能很多哥們會說我們有其他不一樣的方式，或者類似的方式但是實現比現在的強勢，這個無可否認。但是我認為這個是別人專案中存在且我使用的很符合個人習慣的東西。好的東西要學習，不友好的東西我們需要自己改進。

首先我們訪問站點的方式只有訪問主頁，然後才會有web應用的展示，也就是說我們網站的首頁是我們web應用的總入口。

而我們主頁的功能也是需要圍繞我們的中心——部落格來製作，這樣才能達到我們建設這個後端的目的。所以首頁元素需要有以下方面：

  • 文章列表
  • 文章歸類
  • 作者介紹
  • 熱門文章
  • 最高評論
  • 最近動態
  • 聯絡資訊（二維碼）
  • 標籤導航
  • 等···

資料流圖

[手把手教程][第二季]java 後端部落格系統文章系統——No1


為什麼我們需要資料流圖，我們不是為了軟體工程二故意做這個資料流圖。而是資料流圖能清晰的表明我們這些流程中需要哪些關鍵的東西，能在一定程度上反應業務邏輯。所以我們做這個還是有意義。在上面我們可以看到在我們程式流轉的過程中，我們需要知道具體的文章ID才能進行詳情檢視操作，所以我們在拿到列表的時候就需要把文章ID拿到，同時文章歸檔的依據資訊，也需要拿到，大概需要哪些簡單的東西，具體跟下面首頁的json資料相關。具體的首頁預想效果如下圖：

[手把手教程][第二季]java 後端部落格系統文章系統——No1


當然具體的原作者的部落格請看這裡。原作者的導航欄在右邊，個人喜好，所以改到左邊。根據這一張圖，我們也能看到大概的功能如下：

  • 部落格文章列表展示
  • 作者資訊展示
  • 最新、熱點、隨機文章
  • *日期歸檔導航
  • 標籤導航

資料來源

按照第二季開發標準來說，前端頁面展示的資料都是儘量從伺服器介面獲得，將前後端解耦。所以按照通用介面標準來說，我們首頁資料需要JSON的標準資料。分析可得，我們的json格式大概如下：

{"code":1,
    "msg":"success",
    "data":{
        "posts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "totalNum":20,
        "author":{},
        "newPosts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "hotPosts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "randomPosts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "tag":{},
        "date":{}
    }
}複製程式碼

可能一些朋友看到這裡就會迷糊了，你的json資料的實體型別怎麼來的呢？其實我們一開始就提過我們的資料庫是wordpress的資料庫，也就是資料內容是來自我的個人部落格系統上面的資料庫。所以我們需要看看wrodpress的部落格系統上面文章表的結構和內容才能推測是表中欄位及其分佈各有什麼意義。具體的資料庫表結構如下：

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 '文章建立時間',
  `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 '文章狀態',
  `comment_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open' COMMENT '評論狀態',
  `ping_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open' COMMENT 'ping狀態',
  `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 '評論數',
  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;複製程式碼

從上面的文章資訊表中我們可以看到這一張表只是用來儲存所有的文章的基本資訊，但是文章的一些其他資訊都是沒有的，比如說：

  • 評論
  • 特色圖片
  • 文章歸檔
  • 等···

一般來說，我們的常規思路是需要將這些資訊關聯在一起的，而且這個思路也是沒錯的。但是可能有的實現我們並沒有較好的設計思想，所以我們可以簡單的把資料庫逆向到模型。所以閒話不多說，直接在有wrodpress環境的電腦上面連結資料庫，開啟wordpress資料庫，選擇逆向到模型。那麼，資料庫逆向模型如下所示：

[手把手教程][第二季]java 後端部落格系統文章系統——No1


從上面的資料庫模型中我們可以看出維持wordpress中心的有幾張表，如下：

  • wp_posts 文章基礎資訊表
  • wp_postmeta 文章擴充套件資料表
  • wp_comments 評論基本表
  • wp_commentmeta 評論擴充套件表
  • wp_links 連結表
  • wp_options 設定資訊表
  • wp_users 使用者資訊表
  • wp_usermeta 使用者資訊擴充套件表

為什麼我說上面這幾張表是核心表呢？首先我們可以看到這幾張表都是儲存了部落格系統的一些基本的東西。接著我們可以看到這些各個表中一些關聯的表都是有彼此的鍵對應其他表的主鍵，所以看到這裡大家可能也就心裡有數。

所以上面我們的json資訊中的實體型別該怎麼設定也就是很明顯的，必須對應資料庫欄位嘛。既然都這樣了，那我們是不是也可以進一步猜想出其他的json內容呢？

日期歸檔

文章按照日期歸檔相信很多人都看到過，大概樣子就是一個下拉選單中顯示年月日後面加上數量，大概樣子如下（節約流量，不上圖）：

  • 請選擇日期 ↓
    • 所有
    • 2016年11月12日（2）
    • 2016年11月15日（1）
    • 2016年10月28日（3）

我們要把這樣的效果做出來，其實可以直接把文章資訊傳遞給前臺讓前端完成。但是資料量過多的時候，網路傳輸也就相對吃力，所以我們還是直接後端處理，將網路傳輸的資料最精簡。

那麼我們簡單的首頁集合的資料應該如下所示了：

{"code":1,
    "msg":"success",
    "data":{
        "posts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "totalNum":20,
        "author":{},
        "newPosts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "hotPosts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "randomPosts":[
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"},
            {
            "id": "282",
            "postDate": "Nov 16, 2016 12:51:13 AM",
            "postContent": "文章內容",
            "postTitle": "[手把手教程][JavaWeb]優雅的SpringMvc+Mybatis應用（八）"}
        ],
        "tag":{},
        "date": [
            {
                "date": "2016-11-22",
                "idList": [
                    "286"
                ]
            },
            {
                "date": "2016-5-19",
                "idList": [
                    "192",
                    "191"
                ]
            }
        ]
    }
}複製程式碼

這裡應該有朋友可能會問，為啥你的date（根據日期歸檔）的json資料這麼奇怪呢？

其實我們最直接的可以看到，在上面的日期歸檔的json中，日期可以很直觀的看出來，同時idList中把文章ID也是展示出來的，所以我們根據ID和日期都還是可以互相參考的，同時ID的數量可以讓我們明白每個日期有多少篇文章。

既然我們在上面把基本的首頁框架資料歸類，寫出的json介面，同時通過逆向開發的思路等把專案我們需要使用的一些模型圖完成了，這樣接下來就是具體編碼的事情。 具體的編碼問題，且聽下回分解。

福利：使用者密碼演算法

核心演算法：SHA-256

步驟：

  • 註冊使用者
    • 客戶端進行16位MD5小寫加密
  • 生成隨機的salt
  • 將密碼和salt進行SHA-256加密
  • 資料庫存入使用者資訊和對應的salt

這一期，我們把文章系統一些做了基礎的分析，下一期我們需要完成wordpress資料庫內容分析和文章系統模組開發，和文章的撰寫相關的東西。其實經過上一季的一些東西我們能明白，專案開發中的一些基本思想，但是可能我們最終目的是倚賴wordpress的部落格。所以在實際開發中，我們可以參考別人的完成並加以列用。

相關文章