CCMS是一套完善、通用的可配置化的方案。通过配置化自动生成中后台（CMS）界面。CCMS将内容管理系统前端页面抽象为在若干API进行流转的系统。进一步将对后台API的请求按照逻辑类型划分为表单提交、列表展示、查询数据等类型。通过JSON数据格式描述各API请求的接口信息、入参、出参及各种常见校验和简单逻辑，动态渲染前端页面，最终实现零开发搭建内容管理系统。
CCMS的特点
- 配置生成CMS后台管理界面
- 通过步骤设计覆盖不同后台业务应用场景
- 跨页面数据传输、跨组件交互
- 支持引入不同组件库
工作原理
通过代理组件的属性定义、数据请求、跨组件交互和状态判断，实现基于组件化的前端页面配置化。
配置化主模块
共分为五大模块（步骤），目前模块可组合出16种及以上的业务场景。
- 接口请求(type:fetch)：支持GET、POST请求，可配置化的请求头信息。
使用方式：
1. (type:fetch) 接口调用
2. (type:fetch) + (type:table)无条件直接查询
3. (type:form) + (type:fetch)完成表单提交查询
4. (type:skip) + (type:fetch)完成自动查询
5. (type:filter) + (type:fetch)完成筛选条件查询
APIs- 模板默认值：
{
"type": "fetch",
"request": {
"url": "url",
"method": "GET"
},
"response": {
"root": "result"
},
"condition": {
"enable": true,
"field": "code",
"value": 0,
"success": {
"type": "modal",
"content": {
"type": "static",
"content": "成功"
}
},
"fail": {
"type": "modal",
"content": {
"type": "field",
"field": "msg"
}
}
}
}- 输入表单(type:input)：支持4种类别：表单、筛选、导出*。未来覆盖90%表单输入项。20种表单组件。
使用方式：
1. 可通过(type:form) + (type:fetch)完成表单提交
2. 可通过(type:form) + (type:fetch) + (type:table)完成表单查询并展示
APIs- 模板默认值：
{
"type": "form",
"layout": "horizontal",
"fields":[]
}表单提交展示：
- 列表筛选(type:filter)：表单+表格的组合式查询。
使用方式：
1. (type:filter) 直接调用和form一致
2. (type:filter) + (type:fetch) + (type:table)完成筛选条件查询与展示
APIs- 模板默认值：
field配置同from。
{
"type": "filter",
"layout": "horizontal",
"fields":[]
}- 数据查询(type:skip)：表单+接口请求的组合式查询。
使用方式：
1. (type:skip) 直接获取参数进入下一步
2. (type:skip) + (type:fetch) + (type:table)完成条件查询与展示
APIs- 模板默认值：
field配置同from。
{
"type": "skip",
"layout": "horizontal",
"fields":[]
}- 输出结果(type:table)：支持表格7种组件，后续输出结果将补充（表格、图表、详情等）。
使用方式：
1. (type:table) 配置静态数据展示
2. (type:fetch) + (type:table)无条件直接查询
3. (type:form) + (type:fetch) + (type:table)完成表单提交查询并展示
4. (type:skip) + (type:fetch) + (type:table)完成自动查询并展示
5. (type:filter) + (type:fetch) + (type:table)完成筛选条件查询并展示
APIs- 模板默认值：
{
"type": "form",
"layout": "horizontal",
"columns":[]
}表格行添加操作按钮、表格主页面添加按钮：
"operations": {
"rowOperations": [
{
"type": "button",
"label": "编辑",
"handle": {
"type": "ccms",
"callback":true,
"page": "o_manage_list_edit",
"target": "current",
"data": {
"id": {
"source": "record",
"field": "id"
}
}
}
},
{
"type": "button",
"label": "删除",
"handle": {
"type": "ccms","
callback":true,
"page": "o_manage_list_delete",
"target": "current",
"data": {
"id": {
"source": "record",
"field": "id"
}
}
},
"confirm": {
"enable": true,
"titleText": "确定删除应用吗？删除后无法恢复"
}
}
],
"tableOperations": [
{
"type": "button",
"label": "+ 新建应用",
"handle": {
"type": "ccms","
callback":true,
"page": "o_manage_list_create",
"target": "current",
"data": {}
}
}
]
}部分组件
- 日期时间
- 日期时间范围
- 长文本
- 数值
- 文本框
- select选择器
安装使用
- 安装及使用
npm install ccms-antdimport { CCMS } from 'ccms-antd'
<CCMS
checkPageAuth={async () => true}
loadPageURL={async (id) => `/url?id=${id}&type=page`}
loadPageFrameURL={async (id) => `/url?id=${id}&type=open`}
// 配置当前config链入的config
loadPageConfig={async (page) => newConfig }
sourceData={{}}
callback={() => {
if (window.history.length > 1) {
window.history.back()
} else {
window.close()
}
}}
//配置当前config
config={config}
/>
更多内容大家可自行前往阅读。
