博客内容管理系统详解

PHP中文网 • 2025年3月8日 17:42:24 • 编程技术 • 阅读 2

一、更新内容

数据库重新设计，改成以用户分组的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参数，有内容则为true

css: 自定义弹窗的class, 默认为空

showClose: 为false则不显示关闭按钮, 默认显示

closeFn: 弹窗点击关闭按钮之后的回调

title: 弹窗的标题，默认’温馨提示’, 如果不想显示title, 直接传空

content（required）: 弹窗的内容，支持传html

btn1: ‘按钮1文案|按钮1样式class’, 格式化后为btn1Text和btn1Css

cb1: 按钮1点击之后的回调，如果cb1没有明确返回true，则默认按钮点击后关闭弹窗

btn2: ‘按钮2文案|按钮2样式class’, 格式化后为btn2Text和btn2Css

cb2: 按钮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。

博客内容管理系统详解