express+mongodb+vue 全栈打造一个博客

在整个个人博客当中，经历了5个流程，因为基本都是在空闲时间一点一点编写，所以开发周期有点长，不过从中也学到了不少东西，也对部分知识有了新的了解。
查看地址：http://www.helloyoucan.com./

一、功能分析

利用了XMind 7.5进行功)能的划分，目前完成了的个人信息和文章管理部分，书签管理在后续再进行完善。

图片

二、页面设计

利用了原型制作软件Axure进行原型的设计，设计的遵循的原则是：

对比（Contrast）
重复（Repetition）
对齐（Alignment）
亲密性（Proximity）

（在看了《写给大家看的设计书》学到的，想学点设计的强烈推荐）

三、页面制作

页面的制作则利用纯JavaScript+html+css,不借助第三方的库，加快页面的加载速度。
兼容 ie9+
利用rem单位和媒体查询，进行响应式布局

图片

图片

图片

四、后台管理

后台管理部分，主要用了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"

图片

图片

图片

图片

五、服务端开发

利用了express+mongodb+腾讯云Bucket

其中，上传的图片存放在服务器中，保存的文章内容存放在腾讯云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"

六、需要优化的地方

1.把前台页面中的图片图标换成精灵图或者用字体图标
2.后台管理页面发表文章添加loading状态
3.把个人信息上传的图片保存到腾讯云的Bucket上面
4.进一步优化后台管理的权限控制
5.在移动端中点击input输入时被虚拟键盘遮盖问题
6.继续完成设计的功能。有书签管理、文章按标签分类等

原文地址：http://www.helloyoucan.com./article/5980957ad818450714d935df