Rumah > hujung hadapan web > tutorial js > 博客内容管理系统详解

博客内容管理系统详解

小云云
Lepaskan: 2018-02-22 13:36:05
asal
1753 orang telah melayarinya

一、更新内容

  1. 数据库重新设计,改成以用户分组的subDocs数据库结构

  2. 应数据库改动,所有接口重新设计,并统一采用和立马理财一致的接口风格

  3. 删除原来游客模式,增加登录注册功能,支持弹窗登录。

  4. 增加首页,展示最新发布文章和注册用户

  5. 增加修改密码,登出,注销等功能。

  6. 优化pop弹窗组件,更加智能,更多配置项,接近网易$.dialog组件。并且一套代码仅修改了下css,实现相同接口下pc端弹窗和wap端toast功能。

  7. 增加移动端适配

  8. 优化原来代码,修复部分bug。

更多的更新内容请移步项目CMS-of-Blog_ProductionCMS-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。

相关推荐:

最全的PHP开源内容管理系统CMS

20 个 PHP CMS开源内容管理系统

基于laravel框架内容管理系统

Atas ialah kandungan terperinci 博客内容管理系统详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan