Angular4+Koa2+MongoDB如何進(jìn)行開發(fā)個(gè)人博客

Angular4+Koa2+MongoDB如何進(jìn)行開發(fā)個(gè)人博客，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

其實(shí)個(gè)人博客已經(jīng)有好幾個(gè)版本了，一直沒有很滿意的版本，所以一直在不斷改進(jìn)不斷測(cè)試還未正式上線。還記得第一版是去年四五月份開發(fā)的，當(dāng)時(shí)用jsp寫的，UI則采用百度貼吧pc版風(fēng)格，但是使用了幾個(gè)月，因?yàn)?strong>jsp前后端不分離不好維護(hù)，加上前后端不分離的項(xiàng)目沒有太大價(jià)值，所以放棄了維護(hù)。后面工作使用vue框架，因?yàn)?strong>vue組件的單一，重寫的界面效果沒有達(dá)到自己滿意的狀態(tài)，所以第二版還未上線就被我舍棄掉。年假開始設(shè)計(jì)第三版?zhèn)€人博客，一開始設(shè)定為Vue.js + Node.js + Angular.js，但是后面想著了解一下新框架，所以用了Angular4替代了Vue.js，界面比較簡(jiǎn)單，因?yàn)槲覀€(gè)人比較喜歡簡(jiǎn)單一點(diǎn)的頁(yè)面。

這是前臺(tái)主頁(yè)，實(shí)現(xiàn)了主頁(yè)·歸類·關(guān)于這三個(gè)功能的開發(fā)，我目前將前臺(tái)展示和后臺(tái)管理系統(tǒng)進(jìn)行了分離，前期的話主要是自己發(fā)文章為主，后臺(tái)管理系統(tǒng)暫時(shí)不對(duì)外開放。

項(xiàng)目分為三個(gè)服務(wù)器進(jìn)行開發(fā)：client前臺(tái)展示功能，接口采用4200，主要功能如上圖所示，admin后臺(tái)管理系統(tǒng)，接口采用4201，主要用于添加刪除新文章，添加新標(biāo)簽，server服務(wù)功能，為前端后臺(tái)同時(shí)提供服務(wù)，進(jìn)行數(shù)據(jù)庫(kù)操作等，接口采用4001.

目前數(shù)據(jù)我直接存儲(chǔ)在MongoDB,后期上線可能轉(zhuǎn)移到mysql進(jìn)行存儲(chǔ)。整個(gè)項(xiàng)目環(huán)境搭建：Node.js + MongoDB，將環(huán)境搭建完畢，需要先開啟MongoDB服務(wù)。

因?yàn)榍芭_(tái)系統(tǒng)和后臺(tái)管理系統(tǒng)都依賴于server服務(wù)，所以需要先啟動(dòng)server服務(wù)，server服務(wù)里面有對(duì)MongoDB的操作，所以要先開啟MongoDB，然后npm run dev開啟server服務(wù)。

server服務(wù)其實(shí)主要就是封裝了前臺(tái)展示和后臺(tái)管理的所有數(shù)據(jù)庫(kù)操作。因?yàn)槟壳肮ぷ髫?fù)責(zé)服務(wù)器端開發(fā)使用的Node.js,于是自己的項(xiàng)目也使用Node.js作為開發(fā)語(yǔ)言。為了方便我維護(hù)，我是把client,admin,server三個(gè)部分代碼都寫在一個(gè)項(xiàng)目結(jié)構(gòu)里面，server服務(wù)結(jié)構(gòu)如圖

client前臺(tái)展示界面,采用Angular4框架進(jìn)行架構(gòu)，因?yàn)?strong>client服務(wù)器端口4200，server服務(wù)端口4001，如果直接訪問會(huì)出現(xiàn)跨域的問題。所以我使用了Proxy進(jìn)行代理，將前臺(tái)4200端口所有查詢數(shù)據(jù)庫(kù)的操作代理到4001端口，所以前提必須開啟server服務(wù)，否則會(huì)出現(xiàn)代理失敗的警告.

我在不開啟server服務(wù)的前提啟動(dòng)了client服務(wù)，啟動(dòng)成功了，但是最下方報(bào)了警告：無法從localhost:4200代理請(qǐng)求到localhost:4001，所以雖然啟動(dòng)成功了但是讀取不到數(shù)據(jù)庫(kù)任何數(shù)據(jù)，其實(shí)原因就是你server服務(wù)沒有啟動(dòng)，所以現(xiàn)在4001端口并沒有開啟，當(dāng)開啟server服務(wù)之后重啟client服務(wù)會(huì)發(fā)現(xiàn)前臺(tái)界面可以正常展現(xiàn)了。因?yàn)楝F(xiàn)在移動(dòng)端使用人數(shù)會(huì)比較多，所以特意花時(shí)間去將博客適配了移動(dòng)端，其實(shí)有不少方法可以使用，BootStrap或者rem,我的項(xiàng)目其實(shí)比較簡(jiǎn)單，我對(duì)所有界面的移動(dòng)端展示單獨(dú)設(shè)計(jì)了css，使用框架確實(shí)開發(fā)效率提高不少，不過開發(fā)項(xiàng)目目的就是讓自己能夠?qū)W到東西，所以最后我沒有采用框架。

由于前臺(tái)展現(xiàn)功能比較多，所以項(xiàng)目結(jié)構(gòu)比較復(fù)雜。具體流程就是app.component.html中設(shè)計(jì)導(dǎo)航欄，其中針對(duì)pc端和移動(dòng)端分別進(jìn)行設(shè)計(jì)不同的css樣式，然后點(diǎn)擊導(dǎo)航欄不同功能會(huì)跳轉(zhuǎn)到src/app/page中不同界面中去顯示不同的效果。文章瀏覽評(píng)論功能使用了基于Github Issues的評(píng)論系統(tǒng)--gitment，具體可以看下我公眾號(hào)上一篇文章：https://mp.weixin.qq.com/s?__biz=MzU5MTc1ODA0OQ==&mid=2247483833&idx=1&sn=ce7dee57c3836ffba2aae3088ff8c3cd&chksm=fe2b5637c95cdf21c29feb442e7a33da7aa10ac435dfe37e14744829b5118d5d13aaea86801c&token=2114299132&lang=zh_CN#rd

前臺(tái)展示截圖(包括pc端和移動(dòng)端)：

admin后臺(tái)管理界面,采用Angular4進(jìn)行架構(gòu)，Admin服務(wù)器端口4201，server服務(wù)器端口4001，和client服務(wù)器一樣，如果直接訪問會(huì)出現(xiàn)跨域的問題。所以我一樣使用了Proxy進(jìn)行代理，將后臺(tái)管理4201端口所有針對(duì)數(shù)據(jù)庫(kù)的操作代理到server服務(wù)4001端口，所以前提必須開啟server服務(wù)，否則會(huì)出現(xiàn)代理失敗的警告.

admin服務(wù)項(xiàng)目結(jié)構(gòu)：

admin后臺(tái)管理主要是進(jìn)行帖子的發(fā)布，以及標(biāo)簽的保存，目前后臺(tái)管理界面是未對(duì)外進(jìn)行開放，所以目前后臺(tái)管理界面設(shè)計(jì)了一個(gè)登錄界面，設(shè)定了一個(gè)管理員賬號(hào)進(jìn)行登錄。

登錄驗(yàn)證成功就會(huì)進(jìn)入后臺(tái)管理界面，可以進(jìn)行帖子的發(fā)布，輸入框集成了MarkDown插件，可以使用MarkDown支持的功能。

后臺(tái)管理系統(tǒng)第二個(gè)功能就是可以新增便簽，這個(gè)功能沒啥說的，就是保存數(shù)據(jù)操作而已。

后臺(tái)管理最后一個(gè)功能就是查看歸檔文章，支持按照標(biāo)簽分類進(jìn)行查找

因?yàn)楹笈_(tái)管理系統(tǒng)是用于新文章的發(fā)布等用途，已主要適用于pc端，未對(duì)移動(dòng)端進(jìn)行適配。

其實(shí)個(gè)人博客的博客功能現(xiàn)在已經(jīng)實(shí)現(xiàn)了，本來打算這幾天進(jìn)行內(nèi)網(wǎng)穿透，生成測(cè)試地址進(jìn)行測(cè)試的，測(cè)試沒問題就準(zhǔn)備發(fā)布上線，但是好像因?yàn)榇沓隽它c(diǎn)bug，在本地測(cè)試沒問題，內(nèi)網(wǎng)穿透完就會(huì)出現(xiàn)訪問速度很慢的問題，所以最近在調(diào)試，還未正式上線。

關(guān)于Angular4+Koa2+MongoDB如何進(jìn)行開發(fā)個(gè)人博客問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。