Angular4+Koa2+MongoDB開發我的博客

文章原創於公衆號：程序猿周先森。本平臺不定時更新，喜歡個人文章，歡迎關注個人微信公衆號。

其實我的博客已經有好幾個版本了，一直沒有很滿意的版本，因此一直在不斷改進不斷測試還未正式上線。還記得初版是去年四五月份開發的，當時用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支持的功能。

後臺管理系統第二個功能就是能夠新增便籤，這個功能沒啥說的，就是保存數據操做而已。

後臺管理最後一個功能就是查看歸檔文章，支持按照標籤分類進行查找

由於後臺管理系統是用於新文章的發佈等用途，已主要適用於pc端，未對移動端進行適配。其實我的博客的博客功能如今已經實現了，原本打算這幾天進行內網穿透，生成測試地址進行測試的，測試沒問題就準備發佈上線，可是好像由於代理出了點bug，在本地測試沒問題，內網穿透完就會出現訪問速度很慢的問題，因此最近在調試，還未正式上線。這篇文章沒有具體對源碼進行講解，有想要源碼的能夠私下聯繫我要源碼本身研究。歡迎加入個人技術交流羣，不按期在羣裏更新學習資源。羣二維碼請看公衆號。

歡迎關注我我的公衆號：程序猿周先森