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

博客内容管理系统详解

小云云
Lepaskan: 2018-02-22 13:36:05
asal
1867 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!

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