轉(zhuǎn)眼到了博客系統(tǒng)第二章了狗超。這一張我們主要介紹文章系統(tǒng)瞳腌。畢竟博客系統(tǒng)的核心就是文章的發(fā)布和閱讀论颅。閑話(huà)不多說(shuō),老規(guī)矩走起來(lái)囱嫩。
[手把手教程][JavaWeb]第一季點(diǎn)擊這里查看所有文章恃疯。當(dāng)然,也可以直接訪(fǎng)問(wèn)我的博客墨闲。
工具
- IDE為idea16
- JDK環(huán)境為1.8
- gradle構(gòu)建今妄,版本:2.14.1
- Mysql版本為5.5.27
- Tomcat版本為7.0.52
- 流程圖繪制(xmind)
- 建模分析軟件PowerDesigner16.5
思維導(dǎo)圖
按照前面我們第二季第一章闡述的,我們需要先了解我們這個(gè)文章系統(tǒng)的整個(gè)功能模塊組合鸳碧,也就是我們的思維導(dǎo)圖盾鳞,只有這樣才能實(shí)現(xiàn)整體功能的架設(shè)。

其實(shí)在上面的系統(tǒng)中瞻离,我已經(jīng)把前端用戶(hù)的文章查閱功能排除掉的腾仅。為什么我這里會(huì)單獨(dú)排掉前端的查閱呢?前端的文章查閱功能基本在后端的所有文章中已經(jīng)有體現(xiàn)相應(yīng)功能套利。大概功能如下:
- 前端文章查閱
- 文章列表
- 文章歸檔
- 文章分類(lèi)
- 文章詳情
流程圖

在上面的流程圖中推励,我們可以看到我們清楚的把業(yè)務(wù)流程描述出來(lái)了∪馄龋可能很多哥們會(huì)說(shuō)我們有其他不一樣的方式验辞,或者類(lèi)似的方式但是實(shí)現(xiàn)比現(xiàn)在的強(qiáng)勢(shì),這個(gè)無(wú)可否認(rèn)喊衫。但是我認(rèn)為這個(gè)是別人項(xiàng)目中存在且我使用的很符合個(gè)人習(xí)慣的東西跌造。好的東西要學(xué)習(xí),不友好的東西我們需要自己改進(jìn)族购。
首先我們?cè)L問(wèn)站點(diǎn)的方式只有訪(fǎng)問(wèn)主頁(yè)壳贪,然后才會(huì)有web應(yīng)用的展示陵珍,也就是說(shuō)我們網(wǎng)站的首頁(yè)是我們web應(yīng)用的總?cè)肟凇?/p>
而我們主頁(yè)的功能也是需要圍繞我們的中心——博客來(lái)制作,這樣才能達(dá)到我們建設(shè)這個(gè)后端的目的撑碴。所以首頁(yè)元素需要有以下方面:
- 文章列表
- 文章歸類(lèi)
- 作者介紹
- 熱門(mén)文章
- 最高評(píng)論
- 最近動(dòng)態(tài)
- 聯(lián)系信息(二維碼)
- 標(biāo)簽導(dǎo)航
- 等···
數(shù)據(jù)流圖

為什么我們需要數(shù)據(jù)流圖撑教,我們不是為了軟件工程二故意做這個(gè)數(shù)據(jù)流圖。而是數(shù)據(jù)流圖能清晰的表明我們這些流程中需要哪些關(guān)鍵的東西醉拓,能在一定程度上反應(yīng)業(yè)務(wù)邏輯伟姐。所以我們做這個(gè)還是有意義。在上面我們可以看到在我們程序流轉(zhuǎn)的過(guò)程中亿卤,我們需要知道具體的文章ID才能進(jìn)行詳情查看操作愤兵,所以我們?cè)谀玫搅斜淼臅r(shí)候就需要把文章ID拿到,同時(shí)文章歸檔的依據(jù)信息排吴,也需要拿到秆乳,大概需要哪些簡(jiǎn)單的東西,具體跟下面首頁(yè)的json數(shù)據(jù)相關(guān)钻哩。具體的首頁(yè)預(yù)想效果如下圖:

當(dāng)然具體的原作者的博客請(qǐng)看這里屹堰。原作者的導(dǎo)航欄在右邊,個(gè)人喜好街氢,所以改到左邊扯键。根據(jù)這一張圖,我們也能看到大概的功能如下:
- 博客文章列表展示
- 作者信息展示
- 最新珊肃、熱點(diǎn)荣刑、隨機(jī)文章
- *日期歸檔導(dǎo)航
- 標(biāo)簽導(dǎo)航
數(shù)據(jù)來(lái)源
按照第二季開(kāi)發(fā)標(biāo)準(zhǔn)來(lái)說(shuō),前端頁(yè)面展示的數(shù)據(jù)都是盡量從服務(wù)器接口獲得伦乔,將前后端解耦厉亏。所以按照通用接口標(biāo)準(zhǔn)來(lái)說(shuō),我們首頁(yè)數(shù)據(jù)需要JSON的標(biāo)準(zhǔn)數(shù)據(jù)烈和。分析可得爱只,我們的json格式大概如下:
{"code":1,
"msg":"success",
"data":{
"posts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"totalNum":20,
"author":{},
"newPosts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"hotPosts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"randomPosts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"tag":{},
"date":{}
}
}
可能一些朋友看到這里就會(huì)迷糊了,你的json數(shù)據(jù)的實(shí)體類(lèi)型怎么來(lái)的呢招刹?其實(shí)我們一開(kāi)始就提過(guò)我們的數(shù)據(jù)庫(kù)是wordpress的數(shù)據(jù)庫(kù)虱颗,也就是數(shù)據(jù)內(nèi)容是來(lái)自我的個(gè)人博客系統(tǒng)上面的數(shù)據(jù)庫(kù)。所以我們需要看看wrodpress的博客系統(tǒng)上面文章表的結(jié)構(gòu)和內(nèi)容才能推測(cè)是表中字段及其分布各有什么意義蔗喂。具體的數(shù)據(jù)庫(kù)表結(jié)構(gòu)如下:
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)建時(shí)間',
`post_date_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '文章最近修改時(shí)間',
`post_content` longtext COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文章內(nèi)容',
`post_title` text COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文章標(biāo)題',
`post_excerpt` text COLLATE utf8mb4_unicode_ci NOT NULL,
`post_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'publish' COMMENT '文章?tīng)顟B(tài)',
`comment_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open' COMMENT '評(píng)論狀態(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 '文章類(lèi)型',
`post_mime_type` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '文件類(lèi)型',
`comment_count` bigint(20) NOT NULL DEFAULT '0' COMMENT '評(píng)論數(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;
從上面的文章信息表中我們可以看到這一張表只是用來(lái)存儲(chǔ)所有的文章的基本信息忘渔,但是文章的一些其他信息都是沒(méi)有的,比如說(shuō):
- 評(píng)論
- 特色圖片
- 文章歸檔
- 等···
一般來(lái)說(shuō)缰儿,我們的常規(guī)思路是需要將這些信息關(guān)聯(lián)在一起的畦粮,而且這個(gè)思路也是沒(méi)錯(cuò)的。但是可能有的實(shí)現(xiàn)我們并沒(méi)有較好的設(shè)計(jì)思想,所以我們可以簡(jiǎn)單的把數(shù)據(jù)庫(kù)逆向到模型宣赔。所以閑話(huà)不多說(shuō)预麸,直接在有wrodpress環(huán)境的電腦上面鏈接數(shù)據(jù)庫(kù),打開(kāi)wordpress數(shù)據(jù)庫(kù)儒将,選擇逆向到模型吏祸。那么,數(shù)據(jù)庫(kù)逆向模型如下所示:

從上面的數(shù)據(jù)庫(kù)模型中我們可以看出維持wordpress中心的有幾張表钩蚊,如下:
- wp_posts 文章基礎(chǔ)信息表
- wp_postmeta 文章擴(kuò)展數(shù)據(jù)表
- wp_comments 評(píng)論基本表
- wp_commentmeta 評(píng)論擴(kuò)展表
- wp_links 鏈接表
- wp_options 設(shè)置信息表
- wp_users 用戶(hù)信息表
- wp_usermeta 用戶(hù)信息擴(kuò)展表
為什么我說(shuō)上面這幾張表是核心表呢贡翘?首先我們可以看到這幾張表都是存儲(chǔ)了博客系統(tǒng)的一些基本的東西。接著我們可以看到這些各個(gè)表中一些關(guān)聯(lián)的表都是有彼此的鍵對(duì)應(yīng)其他表的主鍵砰逻,所以看到這里大家可能也就心里有數(shù)鸣驱。
所以上面我們的json信息中的實(shí)體類(lèi)型該怎么設(shè)定也就是很明顯的,必須對(duì)應(yīng)數(shù)據(jù)庫(kù)字段嘛蝠咆。既然都這樣了踊东,那我們是不是也可以進(jìn)一步猜想出其他的json內(nèi)容呢?
日期歸檔
文章按照日期歸檔相信很多人都看到過(guò)刚操,大概樣子就是一個(gè)下拉列表中顯示年月日后面加上數(shù)量闸翅,大概樣子如下(節(jié)約流量,不上圖):
- 請(qǐng)選擇日期 ↓
- 所有
- 2016年11月12日(2)
- 2016年11月15日(1)
- 2016年10月28日(3)
我們要把這樣的效果做出來(lái)菊霜,其實(shí)可以直接把文章信息傳遞給前臺(tái)讓前端完成缎脾。但是數(shù)據(jù)量過(guò)多的時(shí)候,網(wǎng)絡(luò)傳輸也就相對(duì)吃力占卧,所以我們還是直接后端處理,將網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)最精簡(jiǎn)联喘。
那么我們簡(jiǎn)單的首頁(yè)集合的數(shù)據(jù)應(yīng)該如下所示了:
{"code":1,
"msg":"success",
"data":{
"posts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"totalNum":20,
"author":{},
"newPosts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"hotPosts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"randomPosts":[
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"},
{
"id": "282",
"postDate": "Nov 16, 2016 12:51:13 AM",
"postContent": "文章內(nèi)容",
"postTitle": "[手把手教程][JavaWeb]優(yōu)雅的SpringMvc+Mybatis應(yīng)用(八)"}
],
"tag":{},
"date": [
{
"date": "2016-11-22",
"idList": [
"286"
]
},
{
"date": "2016-5-19",
"idList": [
"192",
"191"
]
}
]
}
}
這里應(yīng)該有朋友可能會(huì)問(wèn)华蜒,為啥你的date(根據(jù)日期歸檔)的json數(shù)據(jù)這么奇怪呢?
其實(shí)我們最直接的可以看到豁遭,在上面的日期歸檔的json中叭喜,日期可以很直觀(guān)的看出來(lái),同時(shí)idList中把文章ID也是展示出來(lái)的蓖谢,所以我們根據(jù)ID和日期都還是可以互相參考的捂蕴,同時(shí)ID的數(shù)量可以讓我們明白每個(gè)日期有多少篇文章。
既然我們?cè)谏厦姘鸦镜氖醉?yè)框架數(shù)據(jù)歸類(lèi)闪幽,寫(xiě)出的json接口啥辨,同時(shí)通過(guò)逆向開(kāi)發(fā)的思路等把項(xiàng)目我們需要使用的一些模型圖完成了,這樣接下來(lái)就是具體編碼的事情盯腌。 具體的編碼問(wèn)題溉知,且聽(tīng)下回分解。
福利:用戶(hù)密碼算法
核心算法:SHA-256
步驟:
- 注冊(cè)用戶(hù)
- 客戶(hù)端進(jìn)行16位MD5小寫(xiě)加密
- 生成隨機(jī)的salt
- 將密碼和salt進(jìn)行SHA-256加密
- 數(shù)據(jù)庫(kù)存入用戶(hù)信息和對(duì)應(yīng)的salt
這一期,我們把文章系統(tǒng)一些做了基礎(chǔ)的分析级乍,下一期我們需要完成wordpress數(shù)據(jù)庫(kù)內(nèi)容分析和文章系統(tǒng)模塊開(kāi)發(fā)舌劳,和文章的撰寫(xiě)相關(guān)的東西。其實(shí)經(jīng)過(guò)上一季的一些東西我們能明白玫荣,項(xiàng)目開(kāi)發(fā)中的一些基本思想甚淡,但是可能我們最終目的是倚賴(lài)wordpress的博客。所以在實(shí)際開(kāi)發(fā)中捅厂,我們可以參考別人的完成并加以列用贯卦。