個人博客系列（一）---概念框架搭建

前言

我，渣渣程序猿一枚，偏偏又有寫作的愛好。從業一年有餘，已在我的CSDN博客上寫了幾十篇技術博客。寫的博客多了，也就萌生了自己開發一個個人博客的念頭。然後結合一年多的web開發經歷，覺得自己的技術棧是能夠支持個人博客的開發的。只是有想法沒用，還需要制定相應的開發計劃並按期執行，才能把個人博客這個想法付諸實踐。因此，纔會有這篇博客。

萬里長征第一步，這篇博客僅僅是羅列出“個人博客”的功能點以及框架大綱。

草版原型

遵循着自己心底的訴求，在參考了多個個人博客前端模板後，我覺得自己個人博客的前臺草版原型如下：

雖然前臺草版原型不是那麼美觀，但基本符合我的訴求，也能夠概括出個人博客中的前臺功能點。

後臺草版原型如下：

後臺草版原型，必須要做權限控制，保證只有輸入正確的用戶名和密碼才能進入。因爲能進入博客後臺系統的，是能夠對博客的內容進行操作的。

功能點彙總

• 前臺
  • 主頁的展示（個人簡介、相關鏈接、文章列表、文章排行、評論排行）
  • 文章的大類別（技術專欄、生活雜談、心情隨筆）分別展示
  • 文章詳情頁及該文章的相關評論展示
  • 博客建言的展示
• 後臺
  • 登錄權限功能的實現
  • 對文章、分類、評論、鏈接等的管理

數據庫中表及字段的設計

在PowerDesigner中設計“個人博客”的概念模型如下：

最終的建表語句如下：

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for article
-- ----------------------------
DROP TABLE IF EXISTS `article`;
CREATE TABLE `article` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '文章表主鍵id',
  `title` varchar(64) NOT NULL COMMENT '文章標題',
  `content_path` varchar(256) NOT NULL COMMENT '文章存放的路徑',
  `type` tinyint(1) NOT NULL DEFAULT '0' COMMENT '大類別（0:技術專欄，1:生活雜談，2:心情隨筆）',
  `category_id` int(11) NOT NULL COMMENT '自定義的類別id',
  `gmt_create` datetime DEFAULT NULL COMMENT '創建時間',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章表';

-- ----------------------------
-- Table structure for category
-- ----------------------------
DROP TABLE IF EXISTS `category`;
CREATE TABLE `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '文章類別表主鍵id',
  `name` varchar(32) DEFAULT NULL COMMENT '類別名稱',
  `note` varchar(256) DEFAULT NULL COMMENT '備註',
  `gmt_create` datetime DEFAULT NULL COMMENT '創建時間',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章類別表';

-- ----------------------------
-- Table structure for comment
-- ----------------------------
DROP TABLE IF EXISTS `comment`;
CREATE TABLE `comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '評論表主鍵id',
  `user_id` int(11) NOT NULL COMMENT '遊客id',
  `article_id` int(11) DEFAULT NULL COMMENT '文章主鍵id',
  `content` varchar(256) DEFAULT NULL COMMENT '評論內容',
  `gmt_create` datetime DEFAULT NULL COMMENT '創建時間',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='評論表';

-- ----------------------------
-- Table structure for link
-- ----------------------------
DROP TABLE IF EXISTS `link`;
CREATE TABLE `link` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '鏈接表主鍵id',
  `link_desc` varchar(64) NOT NULL COMMENT '鏈接介紹',
  `link_path` varchar(256) NOT NULL COMMENT '鏈接地址',
  `gmt_create` datetime DEFAULT NULL COMMENT '創建時間',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='鏈接表';

-- ----------------------------
-- Table structure for suggestion
-- ----------------------------
DROP TABLE IF EXISTS `suggestion`;
CREATE TABLE `suggestion` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '博客建言表主鍵id',
  `user_id` int(11) DEFAULT NULL COMMENT '建言人id',
  `content` varchar(255) DEFAULT NULL COMMENT '建言內容',
  `status` tinyint(1) DEFAULT NULL COMMENT '建言狀態（0:未確認，1:處理中，2:處理成功，3:不處理）',
  `gmt_create` datetime DEFAULT NULL COMMENT '創建時間',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='博客建言表';

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '遊客表主鍵id',
  `nick` varchar(32) DEFAULT NULL COMMENT '遊客暱稱',
  `gmt_create` datetime DEFAULT NULL COMMENT '創建時間',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='遊客表';

框架搭建

受我的技術棧所限，我會採用前後端分離的方式進行“個人博客”的開發。

• 後端接口基於SSM框架來實現
• 前端頁面基於Vue框架來實現

後端項目，是用IDEA的Spring Initializr進行構築項目。在構築項目時，只需要導入"web,mysql,redis"等POM依賴，項目的基礎架構就已經搭建成功。

後端的項目結構如下所示：

後端項目blog_back能夠正常啓動，說明博客系統的後端項目框架搭建完成。

前端項目，是利用webpack打包工具搭建Vue腳手架，作爲前端項目的基礎的架構。命令是vue init webpack {projectName}。同時，前後臺也進行了分離，所以前端的前後臺也是兩個vue項目。

初始化後的前端前臺項目blog_front_desk、前端後臺項目blog_front_backstage的項目結構都如下所示：

通過npm run dev命令分別啓動兩個前端項目，目前的項目效果圖如下所示：

題外話

目前這三個項目都放在我的github上面，後期我即時根據我的開發進度（前端頁面開發和後端接口開發），把項目開發中遇到的難點及解決方法以博客的方式發佈，並上傳代碼到github上面。

這個三個項目的github地址如下：

• 後端項目地址：blog_back
• 前端前臺項目地址：blog_front_desk
• 前端後臺項目地址：blog_front_backstage