CloudBase CMS 2.0 焕新升级,从「心」出发!
CloudBase CMS 是一个基于云开发 + Node + React 构建的 Headless CMS 系统。不久前,我们开源发布了 CloudBase CMS(内容管理系统)1.0,收获了许多用户的喜爱。同时,我们也收到了用户的热心反馈,了解到 CloudBase CMS 还存在一些不足之处,由此,我们决定持续打磨、优化 CloudBase CMS,来为广大用户提供更好的内容管理解决方案。
经过长时间的充分准备和开源团队的共同努力,CloudBase CMS 2.0 迎来了全新升级,正式与大家见面了!在 2.0 版本中,我们从用户的角度出发,进行了大刀阔斧地改进,并引入了许多好玩又走心的实用能力,下面就来一起看看吧~
UI 界面
本次更新最重大的改变之一就是 UI 界面,我们采用新的设计规范,升级了 CMS 的 UI 界面交互,让它变得更为简洁、可拓展性更高,以简化二次开发的难度。新 UI 如下图所示:
布局优化
在 CMS 1.0 中,当部分字段内容过长时,会挤压其他字段的显示空间,图片的大小也会显著影响内容集合的展示,造成不合理的显示效果,如下:
而在 CMS 2.0 中,我们优化了内容数据的展示效果,根据字段的类型不同,都做了对应的展示优化,以提供更好的使用体验。同时,我们也对字段较多的集合进行了优化,支持表格的滚动查看,如下图:
项目
在新版中,我们引入了项目的概念,可以将一些相关联的数据放置于同一个项目中,对数据资源进行隔离,增加了使用、管理数据的便捷性。
同时项目的划分也有利于权限的控制,可以针对性给予部分人员部分项目的资源访问权限,而不用给予全部权限。
权限控制
在 CMS 1.0 中,权限控制是一个弱项,虽然在 1.2 版本中加入了对数据集合的权限控制,但是使用体验上仍有不足,无法做到较细的权限控制粒度。
在新版中,我们重新设计了 CMS 的权限控制体系,引入了基于角色/资源的多维度权限校验体系,以控制用户的访问权限。
CMS 2.0 支持创建自定义用户、自定义角色,实现自由的系统访问权限控制。自定义用户可以绑定任意角色,并获取角色的权限集,实现用户权限的授予。
角色是 CMS 系统资源可访问权限的载体,可以自由组合多种不同的系统资源访问权限。CMS 2.0 支持用户自定义系统中的角色,通过复合的权限规则,指定角色拥有的资源访问权限,如下所示:
RESTful API
在 CMS 2.0 中,我们支持了通过 RESTful API 访问数据的能力。你可以将数据集合设为公开,并通过 RESTful API 接口访问 CMS 内容数据。
如下图,通过 RESTful API 获取数据内容列表:
具体的使用方法可以阅读 RESTful API 文档:
https://docs.cloudbase.net/cms/restful.html
富文本
基于 braft editor,我们在 CMS 2.0 中引入了全新的富文本编辑器,提供了更好的编辑体验,并支持了图片上传的能力。新的富文本编辑器提供了更丰富的编辑选项,如丰富的布局、列表、代码块、链接等。
内容模型(原内容设置)
在 CMS 2.0 中,我们重新设计了内容模型的编辑方式,由原来的表单形式修改了下图中的交互类型。
在 1.0 中,CMS 存在一些界限比较模糊的行为表现。如创建内容模型时,会默认有创建时间和修改时间的字段。这种系统的行为模糊了系统字段与用户自定义字段的界限,可能与用户的行为发生冲突。
在 2.0 中,我们引入了系统字段的概念,即通过 CMS 创建数据时,系统会默认添加一些字段,如创建、修改时间,未来可能会有更多的系统字段出现。
同时,在 CMS 2.0 中,所有存储的时间类型都会被格式化为 Unix Timestamp 存储。
CMS 2.0 中内容模型与 1.0 内容设置的数据库存储字段有所不同,如果你依赖了数据库字段,请注意修改。
搜索
CMS 2.0 支持了对字符内容的模糊搜索,同时也支持了过滤搜索,排序等多种数据查询条件。
枚举
CMS 2.0 中新增了枚举类型,适用于从固定集合中选择数据的情况。
登录
CMS 2.0 中更换了用户登录体系,由 1.0 版本中使用的 自定义登录 切换为了 用户名密码登录,在安装时不用再输入自定义登录秘钥,降低了上手难度。
文件
CMS 2.0 中,前端上传的文件将被统一存储在云存储cloudbase-cms/upload
目录下,并按日划分,采用 uuid + 文件
的格式存储。
Bug Fix
修复了 1.0 中存在的已知问题。
如果你对 CloudBase CMS 2.0 感兴趣,或者正在使用 CloudBase CMS 1.0 版本,欢迎升级使用 CloudBase CMS 2.0。安装方法可参考文档:
https://docs.cloudbase.net/cms/install/extension.html
如果您在安装和使用过程中有任何问题或建议,欢迎入群讨论,或添加小助手微信:Tcloudedu1,发送 CMS 入群。
长按扫码入群
在设计 CloudBase CMS 时,我们参考和吸收了许多业界的先进思想,并应用到实际设计中。未来,CloudBase CMS 将持续聚焦于内容管理,提供更加强大、易用的内容管理系统,继续为开发者提供走心的体验,减少企业的开发工作,提效研发效率。
想了解 CloudBase CMS 未来的开发计划?来看看 CloudBase CMS 的功能规划表吧:
没有你想要的功能?没关系!欢迎提交 Feature Request 说明你想要的功能。当然也欢迎你向 CloudBase CMS 贡献代码、输出实践文章等,共同让项目变得更好。
最后,附上项目 GitHub 地址,欢迎为项目点个 Star,帮助我们做得更好:
https://github.com/TencentCloudBase/cloudbase-extension-cms
致谢
感谢每一位反馈 Bug、测试功能、修改文档、提交 PR 的开发者,在他们的帮助下,CloudBase CMS 才能变得更加强大。
特别鸣谢:
小溪里:
https://github.com/shenghanqin
Dio:
https://github.com/dio2017
fantasticsoul:
https://github.com/fantasticsoul
本文作者:无亦杨,腾讯云云开发团队前端开发工程师。
欢迎在下方评论区留言或在微信开放社区 进入云开发专区与我们交流。
点击阅读原文进入 CMS 项目主页,了解更多信息。
☁
更多云开发CloudBase出品
点击下方图片即可了解
△ 云开发 CloudBase CMS 内容管理系统正式开源啦!
△ 打通前后端,这款效能提升开源“神器”你一定要了解!
△ 你好,CloudBase CLI 1.0
△ 云开发 VS Code 插件 CloudBase Toolkit 正式发布
由于公众号推送规则更改,请多多分享、点赞和“在看”,以及时获取云开发Cloudbase的最新动态。
点击在看让更多人发现精彩
- iOS 滚动视图的复用问题解决方案
- 二叉排序树(BSTree)关于查找算法结合
- 使用ES6新特性开发微信小程序(5)——内建对象的变化
- 弗洛伊德(Floyd)算法
- 迪杰斯特拉(Dijkstra)算法求图中最短路径
- 微信小程序实例-摇一摇抽奖
- 普利姆(prim)算法和克鲁斯卡尔(kruskal)算法
- android Handler机制之ThreadLocal详解
- 图(Graph)的常用代码集合
- 我差不多,哦不我已经是个废人了No.4
- 将Gradle项目发布到Jcenter和Maven Central
- FLAnimatedImage -ios gif图片加载框架介绍
- linux学习第八篇:文件或目录权限chmod,更改所有者和所属组chown,umask,隐藏权限lsattr_chattr
- linux学习第九篇:特殊权限set_uid,set_gid,stick_bit以及软连接文件,硬链接文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现带进度条的Ajax文件上传功能示例
- 基于selenium及python实现下拉选项定位select
- PHP rmdir()函数的用法总结
- thinkphp5修改view到根目录实例方法
- openCV提取图像中的矩形区域
- PHP二维索引数组的遍历实例分析【2种方式】
- Selenium及python实现滚动操作多种方法
- PHP使用JPGRAPH制作圆柱图的方法详解
- PHP 实现超简单的SESSION与COOKIE登录验证功能示例
- PHP 图像处理与SESSION制作超简单验证码的方法示例
- 简述PHP7.4 新特性和废弃的功能
- laravel5.1框架下的批量赋值实现方法分析
- Laravel框架环境与配置操作实例分析
- 记Laravel调用Gin接口调用formData上传文件的实现方法
- Laravel框架视图和模型操作方法分析