?

項目背景?

可行性方面

需求分析：

詳細設計：

數據庫設計

博客管理API的設計

標簽相關API

服務器端的實現

對數據庫操作進行封裝

對服務器操作進行封裝

客戶端實現

具體操作

使用markdown

具體實現

測試

項目效果展示

維護

完整代碼

---

項目背景?

? ? ? ?現在的時代信息越來越多，我們每時每刻都在學習和接受各種信息，我們要怎樣保存這些信息，并且 向他人展示，寫博客就是一個很好的方法。
? ? ? ? 現在有很多的博客網站就是實現這樣的功能，這個項目就是實現一個自己的博客網站，可以把我們平時的學習和生活記錄下來。

可行性方面

• 經濟可行性——低成本
• 操作可行性——簡單
• 技術可行性——借助其他工具

需求分析：

? ? ? ?支持單個用戶

? ? ? ?我們的客戶端是在瀏覽器上實現的，要在瀏覽器上進行對博客的操作，編輯，修改，刪除，增加等。

? ? ? ?服務器器端在Linux上實現，針對每一個客戶端的按鈕都要有對應的事件處理。

? ? ? ?存儲用MySQL數據庫，調用c/c++API進行對博客的管理

博客服務器端要實現的功能

?對博客的管理能力

?對標簽的管理能力

博客客戶端要實現的功能

博客標題列表頁面?

博客內容展示頁面

博客管理頁面

博客內容編輯頁面

數據存儲要實現的功能

服務器存儲 markdown 格式的數據

?前端通過 editor.md 這個工具將markdown的文檔內容提交給服務器, 或者解析服務器返回的 markdown 作為 前端頁面內容.?

詳細設計：

數據庫設計

? ? ? ?對于博客管理而言，一個博客除了自己的編號外，一但博客量比較大，我們還需要標簽來對其進行管理。所以我們的數據庫需要兩張表

對于博客表，那么它肯定有博客編號，標題，正文，創建時間，還有所對應的標簽信息

drop table if exists blog_table create table blog_table(blog_id int(6) not null primary key auto_increment,title varchar(50),content text,tag_id int,create_time varchar(50));

對于標簽表而言，我們只需要有標簽的編號，和標簽所對應的名字即可

drop table if exists tag_table create table tag_table(tag_id int not null primary key auto_increment ,tag_name varchar(50) );

有了這兩張表后接下來我們就要實現服務器端的程序了

博客管理API的設計

?新增博客
?

POST/blog {title:xxxx,content:xxxx,create_time:xxxx,tag_id:xxxxx, } 成功返回一個: HTTP/1.1 200 OK {ok:truereason: " "?? ??? ?//失敗的原因 }

展示博客列表
?

GET/blog?? ??? ??? ??? ??? ?//獲取所有 GET/blog?tag_id = 1;?? ?//按照標簽來篩選HTTP/1.1 200 OK [{blog_id:1,title:"我的第一篇博客",create_time:"2019/--/--"tag_id:1?? ?}, ]

展示博客詳細內容
?

GET/blog/:blog_id?? ??? ?//冒號后面代表一個真正的博客id，是一個數字。類似于/blog/10HTTP/1.1 200 OK {"blog_id":1,"title":"我的第一篇博客",create_time:"2019/--/--",tag_id:1 }

?刪除博客
?

DELETE/blog/:blog_idHTTP/1.1 200 OK {ok:true; }

?修改博客
?

PUT/blog/:blog_id {title:"修改后的標題",content:"修改之后的正文",tag_id:"修改之后的tag_id", }HTTP/1.1 200 OK {ok:true }

?

標簽相關API

?新增標簽
?

POST/tag {"tag_name": "新增的標簽名" }HTTP/1.1 200 OK {ok:true }

?

刪除標簽
?

DELETE/tag/:tag_idHTTP/1.1 200 OK {ok:true }

查看所有標簽
?

GET/tagHTTP/1.1 200 OK [{tag_id:1,tag_name:c++} ]

服務器端的實現

由于數據庫封裝和服務器端封裝代碼比較多，所以另寫兩篇博客

對數據庫操作進行封裝

封裝數據庫

對服務器操作進行封裝

服務器封裝的鏈接

客戶端實現

HTML-----網頁的骨架

CSS-----網頁的樣式(大小/顏色/位置/邊框/...)

JavaScript-----網頁和用戶之間的交互動作

我并沒有專門學過前端，但是考慮到開發項目客戶端，我還是專門學了一些簡單前端知識

JS教程? ? ?css教程? ??HTML教程

最后綜合各種的前端開發語言，我還是決定選擇用JQuery+Vue.js來實現

使用 Vue.js

為什么使用Vue.js。？

因為它的開源社區是中文的，而且作者是中國人(尤雨溪)，既然是中國人肯定按照中國人的思維開發出的vue.js。所以因該用起來不是很難

網頁中需要動態交互的部分, 使用 JS 來實現. 但是原生的基于 Dom API 的交互方式比較麻煩, 因此 Vue.js 提供了更簡
單更方便的做法.

使用ajax來獲取數據

ajax具體操作學習----->學習網站

具體操作

使用markdown

提交，存儲博客的時候，都可以用markdown格式的數據來表示，展示的時候，就自動把markdown數據轉成html格式的數據

我們需要第三方庫來實現這樣的操作，Editor.md第三方的JS庫，完成markdown和html相互轉換，以及markdown在線編輯器的功能

具體的操作需要看官網介紹

http://editor.md.ipandao.com/

1. 博客列表頁

2.博客詳情頁

以上實現由于html靜態網頁實在是代碼量比較大，不方便在此展示，只能放到GitHub上，如果有需要請自行下載

上面兩個頁面都是給大家看的

而下面的頁面則是只能自己看

3.博客管理頁面

刪除博客

編輯博客:點擊博客進入編輯頁面，編輯頁面中應該有一個

插入博客:markdown編輯器，編輯器里的內容已經是博客當前內容了，編輯完成后，點擊提交按鈕，就把服務器發送到服務器上

?

具體實現

由于前端代碼量過大，不易展示，訪問下面網站查看詳情

https://github.com/514467952/Private-blog_workstation.git

測試

在完成三個面的實現后，我們需要對整個項目進行測

測試方式:在數據庫和服務器相應功能實現上，采用單元測試，且測試方法采用白盒測試

具體的測試代碼均在上面的網址。

文件加載測試：按鈕中實現跳轉頁面，確認是否能夠跳轉

總體測試:完整操作，驗證是否能和功能對應

項目效果展示

首頁展示

查看博客頁面

后臺管理博客頁面

后臺插入博客頁面

維護

• 這是一個輕量級的項目，目前只針對單人使用。以后等我技能提升后，會支持多用戶登陸并進行操作。
• 底層用的httplib的庫，這個底層實現了多線程，可以支持多用戶訪問。
• 目前實現的功能，尚且只有博客的增刪改查，雖然關于標簽的增改，后臺功能已實現，但由于本人前端編程語言并不是很熟所以還無法實現
• 博客的內容不易過長，因為本人端編程語言不是很熟，沒有實現翻頁的功能，

完整代碼

https://github.com/514467952/Private-blog_workstation.git

總結

以上是生活随笔為你收集整理的私人博客定制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。