其實個人博客已經有好幾個版本了，一直沒有很滿意的版本，所以一直在不斷改進不斷測試還未正式上線。還記得第一版是去年四五月份開發的，當時用jsp寫的，UI則採用百度貼吧pc版風格，但是使用了幾個月，因爲jsp前後端不分離不好維護，加上前後端不分離的項目沒有太大價值，所以放棄了維護。後面工作使用vue框架，因爲vue組件的單一，重寫的界面效果沒有達到自己滿意的狀態，所以第二版還未上線就被我捨棄掉。年假開始設計第三版個人博客，一開始設定爲Vue.js + Node.js + Angular.js，但是後面想着瞭解一下新框架，所以用了Angular4替代了Vue.js，界面比較簡單，因爲我個人比較喜歡簡單一點的頁面。
這是前臺主頁，實現了主頁·歸類·關於這三個功能的開發，我目前將前臺展示和後臺管理系統進行了分離，前期的話主要是自己發文章爲主，後臺管理系統暫時不對外開放。
項目分爲三個服務器進行開發：client前臺展示功能，接口採用4200，主要功能如上圖所示，admin後臺管理系統，接口採用4201，主要用於添加刪除新文章，添加新標籤，server服務功能，爲前端後臺同時提供服務，進行數據庫操作等，接口採用4001.
目前數據我直接存儲在MongoDB,後期上線可能轉移到mysql進行存儲。整個項目環境搭建：Node.js + MongoDB，將環境搭建完畢，需要先開啓MongoDB服務。
因爲前臺系統和後臺管理系統都依賴於server服務，所以需要先啓動server服務，server服務裏面有對MongoDB的操作，所以要先開啓MongoDB，然後npm run dev開啓server服務。
server服務其實主要就是封裝了前臺展示和後臺管理的所有數據庫操作。因爲目前工作負責服務器端開發使用的Node.js,於是自己的項目也使用Node.js作爲開發語言。爲了方便我維護，我是把client,admin,server三個部分代碼都寫在一個項目結構裏面，server服務結構如圖
client前臺展示界面,採用Angular4框架進行架構，因爲client服務器端口4200，server服務端口4001，如果直接訪問會出現跨域的問題。所以我使用了Proxy進行代理，將前臺4200端口所有查詢數據庫的操作代理到4001端口，所以前提必須開啓server服務，否則會出現代理失敗的警告.
我在不開啓server服務的前提啓動了client服務，啓動成功了，但是最下方報了警告：無法從localhost:4200代理請求到localhost:4001，所以雖然啓動成功了但是讀取不到數據庫任何數據，其實原因就是你server服務沒有啓動，所以現在4001端口並沒有開啓，當開啓server服務之後重啓client服務會發現前臺界面可以正常展現了。因爲現在移動端使用人數會比較多，所以特意花時間去將博客適配了移動端，其實有不少方法可以使用，BootStrap或者rem,我的項目其實比較簡單，我對所有界面的移動端展示單獨設計了css，使用框架確實開發效率提高不少，不過開發項目目的就是讓自己能夠學到東西，所以最後我沒有采用框架。
由於前臺展現功能比較多，所以項目結構比較複雜。具體流程就是app.component.html中設計導航欄，其中針對pc端和移動端分別進行設計不同的css樣式，然後點擊導航欄不同功能會跳轉到src/app/page中不同界面中去顯示不同的效果。文章瀏覽評論功能使用了基於Github Issues的評論系統--gitment，具體可以看下我公衆號上一篇文章：https://mp.weixin.qq.com/s?__biz=MzU5MTc1ODA0OQ==&mid=2247483833&idx=1&sn=ce7dee57c3836ffba2aae3088ff8c3cd&chksm=fe2b5637c95cdf21c29feb442e7a33da7aa10ac435dfe37e14744829b5118d5d13aaea86801c&token=2114299132&lang=zh_CN#rd
前臺展示截圖(包括pc端和移動端)：
admin後臺管理界面,採用Angular4進行架構，Admin服務器端口4201，server服務器端口4001，和client服務器一樣，如果直接訪問會出現跨域的問題。所以我一樣使用了Proxy進行代理，將後臺管理4201端口所有針對數據庫的操作代理到server服務4001端口，所以前提必須開啓server服務，否則會出現代理失敗的警告.
admin服務項目結構：
admin後臺管理主要是進行帖子的發佈，以及標籤的保存，目前後臺管理界面是未對外進行開放，所以目前後臺管理界面設計了一個登錄界面，設定了一個管理員賬號進行登錄。
登錄驗證成功就會進入後臺管理界面，可以進行帖子的發佈，輸入框集成了MarkDown插件，可以使用MarkDown支持的功能。
後臺管理系統第二個功能就是可以新增便籤，這個功能沒啥說的，就是保存數據操作而已。
後臺管理最後一個功能就是查看歸檔文章，支持按照標籤分類進行查找鄭州婦科醫院：http://www.zztjyy.com/
因爲後臺管理系統是用於新文章的發佈等用途，已主要適用於pc端，未對移動端進行適配。其實個人博客的博客功能現在已經實現了，本來打算這幾天進行內網穿透，生成測試地址進行測試的，測試沒問題就準備發佈上線，但是好像因爲代理出了點bug，在本地測試沒問題，內網穿透完就會出現訪問速度很慢的問題，所以最近在調試，還未正式上線。這篇文章沒有具體對源碼進行講解，有想要源碼的可以私下聯繫我要源碼自己研究。歡迎加入我的技術交流羣，不定期在羣裏更新學習資源。羣二維碼請看公衆號。