这个项目最初其实是fork别人的项目。当初想接触下mongodb数据库，找个例子学习下，后来改着改着就面目全非了。后台和数据库重构，前端增加了登录注册功能，仅保留了博客设置页面，但是也优化了。
一、功能特点
- 一个基本的博客内容管理器功能，如发布并管理文章等
- 每个用户可以通过注册拥有自己的博客
- 支持markdown语法编辑
- 支持代码高亮
- 可以管理博客页面的链接
- 博客页面对移动端适配优化
- 账户管理(修改密码)
- 页面足够大气、酷炫嘿
二、用到的技术和实现思路：
2.1 前端：Vue全家桶
- Vue.js
- Vue-Cli
- Vue-Resource
- Vue-Validator
- Vue-Router
- Vuex
- Vue-loader
2.2 后端
- Node.js
- mongoDB (mongoose)
- Express
2.3 工具和语言
- Webpack
- ES6
- SASS
- Jade
2.4 整体思路：
- Node服务端除了主页和首页外，不做模板渲染，渲染交给浏览器完成
- Node服务端不做任何路由切换的内容，这部分交给Vue-Router完成
- Node服务端只用来接收请求，查询数据库并用来返回值
所以这样做前后端几乎完全解耦，只要约定好restful风格的数据接口，和数据存取格式就OK啦。
后端我用了mongoDB做数据库，并在Express中通过mongoose操作mongoDB，省去了复杂的命令行，通过Javascript操作无疑方便了很多。
三、更新内容
在原来项目的基础上，做了如下更新：
- 数据库重新设计，改成以用户分组的subDocs数据库结构
- 应数据库改动，所有接口重新设计，并统一采用和网易立马理财一致的接口风格
- 删除原来游客模式，增加登录注册功能，支持弹窗登录。
- 增加首页，展示最新发布文章和注册用户
- 增加修改密码，登出，注销等功能。
- 优化pop弹窗组件，更加智能，更多配置项，接近网易$.dialog组件。并且一套代码仅修改了下css，实现相同接口下pc端弹窗和wap端toast功能。
- 增加移动端适配
- 优化原来代码，修复部分bug。
更多的更新内容请移步项目CMS-of-Blog_Production和CMS-of-Blog。
四、核心代码分析
原作者也写过分析的文章。这里，主要分析一下我更新的部分。
4.1. 数据库
对原数据库进行重新设计，改成以用户分组的subDocs数据库结构。这样以用户为一个整体的数据库结构更加清晰，同时也更方便操作和读取。代码如下：
var mongoose = require('mongoose'),
Schema = mongoose.Schema
articleSchema = new Schema({
title: String,
date: Date,
content: String,
}),
linkSchema = new Schema({
name: String,
href: String,
newPage: Boolean
}),
userSchema = new Schema({
name: String,
password: String,
email: String,
emailCode: String,
createdTime: Number,
articles: [articleSchema],
links: [linkSchema]
}),
User = mongoose.model('User', userSchema);
mongoose.connect('mongodb://localhost/platform')
mongoose.set('debug', true)
var db = mongoose.connection
db.on('error', function () {
console.log('db error'.error)
})
db.once('open', function () {
console.log('db opened'.silly)
})
module.exports = {
User: User
}
代码一开始新定义了三个Schema：articleSchema、linkSchema和userSchema。而userSchema里又嵌套了articleSchema和linkSchema，构成了以用户分组的subDocs数据库结构。Schema是一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力。然后将将该Schema发布为Model。Model由Schema发布生成的模型，具有抽象属性和行为的数据库操作对。由Model可以创建的实体，比如新注册一个用户就会创建一个实体。
数据库创建了之后需要去读取和操作，可以看下注册时发送邮箱验证码的这段代码感受下。
router.post('/genEmailCode', function(req, res, next) {
var email = req.body.email,
resBody = {
retcode: '',
retdesc: '',
data: {}
}
if(!email){
resBody = {
retcode: 400,
retdesc: '参数错误',
}
res.send(resBody)
return
}
function genRandomCode(){
var arrNum = [];
for(var i=0; i<6; i++){
var tmpCode = Math.floor(Math.random() * 9);
arrNum.push(tmpCode);
}
return arrNum.join('')
}
db.User.findOne({ email: email }, function(err, doc) {
if (err) {
return console.log(err)
} else if (doc && doc.name !== 'tmp') {
resBody = {
retcode: 400,
retdesc: '该邮箱已注册',
}
res.send(resBody)
} else if(!doc){ // 第一次点击获取验证码
var emailCode = genRandomCode();
var createdTime = Date.now();
// setup e-mail data with unicode symbols
var mailOptions = {
from: '"CMS-of-Blog