一个基于Vue.js+Mongodb+Node.js的博客内容管理系统

这个项目最初其实是fork别人的项目。当初想接触下mongodb数据库，找个例子学习下，后来改着改着就面目全非了。后台和数据库重构，前端增加了登录注册功能，仅保留了博客设置页面，但是也优化了。

一、功能特点

1. 一个基本的博客内容管理器功能，如发布并管理文章等
2. 每个用户可以通过注册拥有自己的博客
3. 支持markdown语法编辑
4. 支持代码高亮
5. 可以管理博客页面的链接
6. 博客页面对移动端适配优化
7. 账户管理(修改密码)
8. 页面足够大气、酷炫嘿

二、用到的技术和实现思路：

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操作无疑方便了很多。

三、更新内容

在原来项目的基础上，做了如下更新：
1. 数据库重新设计，改成以用户分组的subDocs数据库结构
2. 应数据库改动，所有接口重新设计，并统一采用和网易立马理财一致的接口风格
3. 删除原来游客模式，增加登录注册功能，支持弹窗登录。
4. 增加首页，展示最新发布文章和注册用户
5. 增加修改密码，登出，注销等功能。
6. 优化pop弹窗组件，更加智能，更多配置项，接近网易$.dialog组件。并且一套代码仅修改了下css，实现相同接口下pc端弹窗和wap端toast功能。
7. 增加移动端适配
8. 优化原来代码，修复部分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(resB