CCMS
🌏 关于CCMS
CCMS是一套完善、通用的可配置化的方案。通过配置化自动生成中后台（CMS）界面。
CCMS将内容管理系统前端页面抽象为在若干API进行流转的系统。进一步将对后台API的请求按照逻辑类型划分为表单提交、列表展示、查询数据等类型。通过JSON数据格式描述各API请求的接口信息、入参、出参及各种常见校验和简单逻辑，动态渲染前端页面。最终实现零开发搭建内容管理系统。
✨ 特点
🛠️ 配置生成CMS后台管理界面📚 通过步骤设计覆盖不同后台业务应用场景🏹 跨页面数据传输、跨组件交互🎏 支持引入不同组件库
工作原理
通过代理组件的属性定义、数据请求、跨组件交互和状态机判断，实现基于组件化的前端页面配置化。
便捷使用
通过配置JSON，定义表单步骤与组件。生成完整的后台管理功能。
组件库接入
参照猎户座组件开发规范，开发者可以提供丰富种类的组件以供自己使用，并可以将组件发布供所用用户选用。
⚙️ 使用
npm install ccms ccms-antd
🌰 示例
import { CCMS } from 'ccms-antd';
const App = () => (
<>
<CCMS
config={config}
sourceData={data}
baseRoute={'/'}
checkPageAuth={async () => true}
loadPageURL={async (id) => `/url?id=${id}&type=page`}
loadPageFrameURL={async (id) => `/url?id=${id}&type=open`}
loadPageList={async () => '#'}
loadPageConfig={async (page) => newConfig }
loadDomain={async () => ''}
handlePageRedirect={() => {xxx}}
callback={() => {xxx}}
onMount={() => {xxx}}
/>
</>
);📖 API文档
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| config | 配置项，参见附录一 | object | - | |
| sourceData | 数据项，参见附录二 | object | - | |
| baseRoute | 页面路由 | string | / |
|
| checkPageAuth | 页面鉴权 | function(e) | - | |
| loadPageURL | 获取页面的url(用于当前页面打开) | function(pageId) | - | |
| loadPageFrameURL | 获取页面的url(用于新Tab页打开) | function(pageId) | - | |
| loadPageList | 加载页面列表，选中后可通过执行loadPageConfig获取页面配置项 | function() | - | |
| loadPageConfig | 加载指定页面配置项 | function(pageId) | - | |
| loadDomain | 获取域名 | function() | - | |
| handlePageRedirect | 页面跳转(replace/push) | function(url, replace) | - | |
| callback | 回调函数(关闭或提交) | function() | - | |
| onMount | 初始化结束，展示界面 | function(val) | - |
附录一
{
"steps": [
{ "type": "header"},
{
"type": "form",
"fields": [
{
"label": "文本框",
"field": "text",
"type": "text"
},
{
"label": "单项框",
"field": "radio",
"type": "select_single",
"mode": "radio",
"options": {
"from": "manual",
"data": [
{
"label": "选项1",
"value": 1
},
{
"label": "选项2",
"value": 2
}
]
},
"required": true
}
],
"actions": [
{
"type": "submit",
"label": "提交",
"mode": "primary"
},
{
"type": "cancel",
"label": "取消",
"mode": "normal"
}
],
"defaultValue": {
"source": "data",
"field": ""
}
},
{
"type": "fetch",
"interface": {
"url": "",
"method": "GET",
"withCredentials": true,
"condition": {
"enable": false,
"field": "code",
"value": 1000,
"success": {
"type": "modal",
"content": {
"type": "static",
"content": "成功"
}
},
"fail": {
"type": "modal",
"content": {
"type": "field",
"field": "msg"
}
}
}
},
"nextStep": false
}
]
}附录二
{
"text": "text",
"radio": 2
}🧑🤝🧑 参与共建 配置化内容管理系统 UI库（ant design版）
初始化工程
需要首先初始化ccms工程！
npm install
npm link ccms
sudo npm link编译
npm run build