用 vue koa 和mongo 擼了我的博客和博客管理網站

做爲一個前端菜雞在校生，跟風玩了一波vue以後感受很爽，又跟風玩了一波koa、co以後更是爽的不行不行的，因而決定搭一個我的博客，再跟風學了學mongo、mongoose以後就開始上手幹了，搭好了以後又搭了個博客管理後臺，昨天終於把博客上線了，今天搞了搞bug，以爲還能夠看，就跟你們分享一下吧。

先上博客地址吧 個人博客

說說技術架構吧

總體來講分爲三個部分，全都是先後端徹底分離的

• server 後臺 包含了全部的後臺服務，爲博客和博客管理提供後臺接口

• client 前端 博客的前端呈現，被vue洗腦嚴重，界面模仿了vue博客，評論系統用的是多說(可是多說很不穩定...並且已經好久無人維護..)

• admin 前端 博客管理平臺的前端，功能上相似於帶發佈博客功能的印象筆記，markdown語法，預覽和編寫同步進行，帶有自動保存功能，書寫的文章只有在發佈以後纔會同步當前內容到博客client頁面上，也徹底能夠當作一個筆記類應用去用,這樣作的目的是出於有的時候在寫文章a的時候,以爲某一部分的內容過於複雜,能夠另外開一篇文章b來仔細講解下,可是等我寫完a就忘了.並且這樣作了以後博客也好用多了,我常常在碼代碼的時候遇到一些問題,這樣能夠直接打開博客後臺,開一篇文章記錄一下遇到的問題,可是不發佈出去,提醒本身須要整理一篇相關內容的文章.之後一登這個管理系統就能夠看到了這篇沒有沒有發佈過的文章,就能夠整理這篇文章,等到寫完以後發佈出去就能夠了。

client，就是博客頁面啦

博客呈現頁面，基於vue(1.0)，先後端通訊用的fetch，評論系統用的是多說，界面模仿了vue博客，大量使用了其樣式效果，還有不少要完善的地方。
因爲[多說]()是基於dom的插件，使用的方式也是老掉牙的方式，大部分的使用者應該是wordpress、hexo之類搭建的同步網頁而非單頁應用，連源碼也沒有，想vue化一下都不行，因此，client端不少的坑基本都在[多說]()上了，因此，也遇到了之前不少沒有遇到的狀況，好比$nextTick也不能保證dom已經更新之類的，嘗試了不少方案，可是結局都不是太好，甚至一度絕望的上了setTimeout(initDuoshuo,300)這種玄學代碼去加載多說，不夠好在今天差很少算終於解決掉多說的bug了。

技術棧

1. Vue && vue-router

2. fetch

3. stylus

4. marked && highlight

admin，也就是我寫博客的頁面了

列表頁:

邊寫邊預覽，實時保存：

博客管理系統，也是先後端徹底分離的。功能上相似於印象筆記，能夠實時保存文章，以爲寫好了以後能夠發佈文章，每次發佈都會把文章同步更新到博客上，這樣在client端就能看到。採用markdown語法，編輯器採用的是SimpleMDE，支持大量快捷鍵。

技術棧

1. Vue && vuex && vue-router

2. fetch

3. stylus

4. SimpleMDE && marked && highlight

server

基於restful，nodejs的話採用koa(koa 1)，數據庫用了mongo。登陸這塊的話用了jwt.

其實之前從沒用過mongo，可是以爲仍是要來玩一玩，畢竟這麼火對吧。
既然用了koa，仍是說兩句，雖然用的是koa1，主要仍是以爲koa1比較geek（啥？這也能成爲理由？黑人微笑），寫起來感受屌屌的，雖然代碼易讀性可能沒有koa2那麼好，可是寫的過程當中加深了對於generator promise 函數式等等的理解，中間也反覆看了koa的源碼，也仍是學到了一些東西的。

仍是有不少要改的地方

這才只是剛剛完成，還要不少要改進的地方

項目地址在這，歡迎star，提issue，pr。