61 Star 278 Fork 55

京东零售 / CCMS

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

CCMS

🌏 关于CCMS

CCMS是一套完善、通用的可配置化的方案。通过配置化自动生成中后台(CMS)界面。
CCMS将内容管理系统前端页面抽象为在若干API进行流转的系统。进一步将对后台API的请求按照逻辑类型划分为表单提交、列表展示、查询数据等类型。通过JSON数据格式描述各API请求的接口信息、入参、出参及各种常见校验和简单逻辑,动态渲染前端页面。实现零开发搭建内容管理系统。

✨ 特点

  • 🛠️ 配置生成CMS后台管理界面
  • 📚 通过步骤设计覆盖不同后台业务应用场景
  • 🏹 跨页面数据传输、跨组件交互
  • 🎏 支持引入不同组件库

工作原理

通过代理组件的属性定义、数据请求、跨组件交互和状态机判断,实现基于组件化的前端页面配置化。

便捷使用

通过配置JSON,定义表单步骤与组件。生成完整的后台管理功能。

组件库接入

参照猎户座组件开发规范,贡献者可以提供丰富种类的组件以供自己使用,并可以将组件发布供所用用户选用。

⚙️ 使用(以antd ui示例)

npm install ccms-antd ccms

🌰 示例

import { CCMS } from 'ccms-antd';

const App = () => (
  <>
    <CCMS
      checkPageAuth={async () => true}
      loadPageURL={async (id) => `/url?id=${id}&type=page`}
      loadPageFrameURL={async (id) => `/url?id=${id}&type=open`}
      // 界面操作更新CCMS config 
      loadPageConfig={async (page) => newConfig }
      sourceData={{}}
      callback={() => {
        if (window.history.length > 1) {
          window.history.back()
        } else {
          window.close()
        }
      }}
      //后附config的demo 详见api文档
      config={config}
    />
  </>
);

config参数DEMO

{
  "basic": {
      "title": "我的表单"
  },
  "steps": [
    {
      type: "form",
      layout: "horizontal",
      fields:[
            {
                type:'text',
                "field": "text",
                "label": "这是一个提交步骤"
            }
        ]
    },
    {
        "type": "fetch",
        "request": {
            "url": "https://j-api.jd.com/mocker/data?p=263&v=POST&u=list.do",
            "method": "GET"
        },
        "response": {
            "root": "result"
        },
        "condition": {
            "enable": true,
            "field": "code",
            "value": 0,
            "success": {
                "type": "none",
                "content": {
                    "type": "static",
                    "content": "成功"
                }
            },
            "fail": {
                "type": "modal",
                "content": {
                    "type": "field",
                    "field": "msg"
                }
            }
        }
    }, {
        "type": "table",
        "primary": "index",
        "columns": [
            {
                "label": "id",
                "field": "id",
                "type": "text",
                "defaultValue": "暂无数据"
            },
            {
                "label": "datetime",
                "field": "datetime",
                "type": "text",
                "defaultValue": "暂无数据"
            },
            {
                "label": "name",
                "field": "name",
                "type": "text",
                "defaultValue": "暂无数据"
            }
        ],
        "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": {}
                    }
                }
            ]
        }
    }
  ]
}

📖 API文档

👉 Api文档

🧑‍🤝‍🧑 参与共建

配置化内容管理系统 核心库 (共建与UI接入)

初始化工程

npm install

sudo npm link

编译

npm run build

单元测试

npm run test

简介

本次开源为核心配置化功能,可通过配置化自动生成中后台(CMS)界面。将CMS前端页面归纳为几种步骤流转的模式。并通过配置化的方式提供快速搭建中后台系统。 展开 收起
JavaScript 等 2 种语言
MIT
取消

发行版

暂无发行版

CCMS

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/jd-platform-opensource/ccms.git
git@gitee.com:jd-platform-opensource/ccms.git
jd-platform-opensource
ccms
CCMS
master

搜索帮助