博客内容管理系统详解
一、更新内容
数据库重新设计，改成以用户分组的subDocs数据库结构
应数据库改动，所有接口重新设计，并统一采用和立马理财一致的接口风格
删除原来游客模式，增加登录注册功能，支持弹窗登录。
增加首页，展示最新发布文章和注册用户
增加修改密码，登出，注销等功能。
优化pop弹窗组件，更加智能，更多配置项，接近网易$.dialog组件。并且一套代码仅修改了下css，实现相同接口下pc端弹窗和wap端toast功能。
增加移动端适配
优化原来代码，修复部分bug。
更多的更新内容请移步项目CMS-of-Blog_Production和CMS-of-Blog。
二、核心代码分析
1. 数据库
对原数据库进行重新设计，改成以用户分组的subDocs数据库结构。这样以用户为一个整体的数据库结构更加清晰，同时也更方便操作和读取。代码如下：
代码一开始新定义了三个Schema：articleSchema、linkSchema和userSchema。而userSchema里又嵌套了articleSchema和linkSchema，构成了以用户分组的subDocs数据库结构。Schema是一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力。然后将将该Schema发布为Model。Model由Schema发布生成的模型，具有抽象属性和行为的数据库操作对。由Model可以创建的实体，比如新注册一个用户就会创建一个实体。
数据库创建了之后需要去读取和操作，可以看下注册时发送邮箱验证码的这段代码感受下。
后台接受到发送邮箱验证码的请求后，会初始化一个tmp的用户。通过new db.User()会创建一个User的实例，然后执行save()操作会将这条数据写到数据库里。如果在半小时内没有注册成功，通过匹配邮箱，然后db.User.remove()将这条数据删除。更多具体用法请移步官方文档。
2. 后台
将所有请求分为三种：
ajax异步请求，统一路径：
/web/公共页面部分，如博客首页、登录、注册等，统一路径：
/与博客用户id相关的博客部分，统一路径：
/:id/
这样每个用户都可以拥有自己的博客页面，具体代码如下：
具体的ajax接口代码大家可以看server文件夹下的index.js文件。
3. pop/toast组件
3.1 pop/toast组件配置参数说明
pop: 弹窗的显示与否, 根据content参数，有内容则为truecss: 自定义弹窗的class, 默认为空showClose: 为false则不显示关闭按钮, 默认显示closeFn: 弹窗点击关闭按钮之后的回调title: 弹窗的标题，默认’温馨提示’, 如果不想显示title, 直接传空content（required）: 弹窗的内容，支持传htmlbtn1: ‘按钮1文案|按钮1样式class’, 格式化后为btn1Text和btn1Csscb1: 按钮1点击之后的回调，如果cb1没有明确返回true，则默认按钮点击后关闭弹窗btn2: ‘按钮2文案|按钮2样式class’, 格式化后为btn2Text和btn2Csscb2: 按钮2点击之后的回调，如果cb2没有明确返回true，则默认按钮点击后关闭弹窗。按钮参数不传，文案默认’我知道了’，点击关闭弹窗init: 弹窗建立后的初始化函数，可以用来处理复杂交互（注意弹窗一定要是从pop为false变成true才会执行）destroy: 弹窗消失之后的回调函数wapGoDialog: 在移动端时，要不要走弹窗，默认false，走toast
3.2 pop/toast组件代码
3.3 pop/toast组件参数格式化代码
为了使用方便，我们在使用的时候进行了简写。为了让组件能识别，需要在vuex的action里对传入的参数格式化。
为了让移动端兼容pop弹窗组件，我们采用mediaQuery对移动端样式进行了更改。增加参数wapGoDialog，表明我们在移动端时，要不要走弹窗，默认false，走toast。这样可以一套代码就可以兼容pc和wap。
后记
这里主要分析了下后台和数据库，而且比较简单，大家可以去看源码。总之，这是一个不错的前端入手后台和数据库的例子。功能比较丰富，而且可以学习下vue.js。
相关推荐：
以上就是博客内容管理系统详解的详细内容，更多请关注其它相关文章！