一、更新内容
数据库重新设计,改成以用户分组的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。
相关推荐:
最全的PHP开源内容管理系统CMS
20 个 PHP CMS开源内容管理系统
基于laravel框架内容管理系统
以上就是博客内容管理系统详解的详细内容,更多请关注php中文网其它相关文章!