在整个个人博客当中，经历了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
网友评论