在整個個人博客當(dāng)中拙友，經(jīng)歷了5個流程辟癌，因?yàn)榛径际窃诳臻e時間一點(diǎn)一點(diǎn)編寫，所以開發(fā)周期有點(diǎn)長巍棱，不過從中也學(xué)到了不少東西惑畴，也對部分知識有了新的了解。
查看地址：http://www.helloyoucan.com./
一拉盾、功能分析
利用了XMind 7.5進(jìn)行功)能的劃分桨菜，目前完成了的個人信息和文章管理部分，書簽管理在后續(xù)再進(jìn)行完善捉偏。
二倒得、頁面設(shè)計
利用了原型制作軟件Axure進(jìn)行原型的設(shè)計，設(shè)計的遵循的原則是：
對比（Contrast）
重復(fù)（Repetition）
對齊（Alignment）
親密性（Proximity）
（在看了《寫給大家看的設(shè)計書》學(xué)到的夭禽，想學(xué)點(diǎn)設(shè)計的強(qiáng)烈推薦）
三霞掺、頁面制作
頁面的制作則利用純JavaScript+html+css,不借助第三方的庫，加快頁面的加載速度讹躯。
兼容 ie9+
利用rem單位和媒體查詢菩彬，進(jìn)行響應(yīng)式布局
四缠劝、后臺管理
后臺管理部分，主要用了vue2.0+element-ui
利用的框架/插件有：
"axios": "^0.16.2",
"chart.js": "^2.6.0",
"element-ui": "^1.3.6",
"mavon-editor": "^1.7.6",
"node-sass": "^4.5.3",
"vue": "^2.2.6",
"vue-chartjs": "^2.6.5",
"vue-router": "^2.3.1",
"vuex": "^2.3.1"
五骗灶、服務(wù)端開發(fā)
利用了express+mongodb+騰訊云Bucket
其中惨恭，上傳的圖片存放在服務(wù)器中，保存的文章內(nèi)容存放在騰訊云Bucket上面耙旦。
利用的框架/插件有：
"bcryptjs": "^2.4.3",
"body-parser": "~1.17.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "~1.4.3",
"cors": "^2.8.4",
"cos-nodejs-sdk-v5": "^2.0.6",
"debug": "~2.6.3",
"express": "~4.15.2",
"express-session": "^1.15.4",
"jade": "~1.11.0",
"markdown": "^0.5.0",
"mongoose": "^4.11.4",
"morgan": "^1.8.2",
"multer": "^1.3.0",
"serve-favicon": "~2.4.2",
"svg-captcha": "^1.3.9",
"underscore": "^1.8.3"
六脱羡、需要優(yōu)化的地方
1.把前臺頁面中的圖片圖標(biāo)換成精靈圖或者用字體圖標(biāo)
2.后臺管理頁面發(fā)表文章添加loading狀態(tài)
3.把個人信息上傳的圖片保存到騰訊云的Bucket上面
4.進(jìn)一步優(yōu)化后臺管理的權(quán)限控制
5.在移動端中點(diǎn)擊input輸入時被虛擬鍵盤遮蓋問題
6.繼續(xù)完成設(shè)計的功能。有書簽管理免都、文章按標(biāo)簽分類等
原文地址：http://www.helloyoucan.com./article/5980957ad818450714d935df
