【系统设计】如何设计一个CMS系统

最近,学习和使用了基于腾讯云·CloudBase 开发的 CMS 管理系统。这篇笔记将记录在 cms 中学到的知识。

作者:心谭,腾讯云前端开发

来自:心谭博客 xxoo521.com,专注算法与 web 开发的技术博客

其他:https://github.com/dongyuanxin

什么是 CMS?

CMS 是:内容管理系统。而这个内容,是存放在具体介质上,例如云数据库中。

在 cms 中,可以创建一个“内容集”(类似于数据表),并且可以修改内容集的字段信息。

例如,我创建一个 passages 的内容集,专门用来存储文章。在 passages 中,有多个字段,每个字段是一个对象,包括字段 id、字段名称、字段说明、默认值、字段类型(string,number,link,markdown,image,vedio 等等)。可以看到,这里字段类型并不严格对齐任何 sql 的字段类型,而是更加日常化,大大降低了非技术同学使用的成本。

在使用 cms 时候,体验类似与常见的 sql 可视化管理工具,但是更加友好。例如一个字段如果是 image 类型,那么在前端就会自动渲染 img 标签;如果是 link 类型,那么前端就会渲染跳转链接。

CMS 的好处与用途

随着业务内容越来越多,要输出的内容也越来越多。而这些文章、活动、广告等内容集,并不像技术文档那样,借助 git 来进行管理:对非技术同学来说,git 操作复杂;内容变动过于频繁,管理起来也会增加额外成本。

因此,一个 cms 系统就非常有用了。在使用上,非常直观。运营同学完全可以根据自身需要,创建一个新的内容集。前端进行动态化构建的时候,直接拉取对应内容集中的内容进行构建即可。

数据库集合设计

用户集合

除了用户名、密码字段,添加一个 role 字段:"user" | "root"。对于 user 身份的用户,只能创建新的内容;对于 root 身份的用户,既能创建内容,也能创建新的数据集合。

内容集信息集合

专门开辟一个集合用来存储内容集和其下字段的信息。

对于内容集信息集合,数据结构是:

name: 内容集名称
collectionName: 内容集对应的集合名称
description: 内容集描述
fields: 此内容集的所有字段信息对象

对于字段信息对象 FieldObject,数据结构是:

fieldId: 字段标识
fieldName: 字段名称
fieldType<'image' | 'url' | 'string' | 'int'>: 字段类型(根据需求自定义即可)
fieldOrder: 字段权重,越大越靠前

前端逻辑

在登录成功后,前端拉取内容集信息集合,并且保存在 Store 中。因为云开发的云数据库是非关系型数据库,所以内容集信息可以存放在同一个集合中。

在前端进入对应的内容集:

  • 将内容集信息集合的字段信息,映射为表格组件属性
  • 根据 collectionName 字段,查询对应的集合数据
  • 将集合数据渲染到表格组件中
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×