Слияние кода завершено, страница обновится автоматически
CCMS
CCMS — это набор универсальных и настраиваемых решений, которые позволяют автоматически генерировать интерфейс для управления контентом (CMS). CCMS абстрагирует страницы интерфейса управления контентом в систему, основанную на нескольких API.
API запросов к бэкенду разделены на типы: отправка форм, отображение списков, запросы данных и т. д. Используя формат данных JSON, можно описать интерфейсы, входные и выходные параметры, а также различные проверки и простую логику для динамического отображения страниц интерфейса. Это позволяет создавать системы управления контентом без необходимости разработки.
Принцип работы основан на свойствах прокси-компонентов, запросах данных, взаимодействии между компонентами и логике состояний. Это обеспечивает настраиваемость интерфейса на основе компонентов.
Интерфейс настраивается с помощью конфигурации JSON, определяющей шаги формы и компоненты. Это создаёт полный набор функций управления бэкендом.
Разработчики могут вносить свой вклад в библиотеку компонентов, предоставляя разнообразные компоненты для использования. Эти компоненты могут быть выбраны пользователями.
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 (демо) см. в документации по API
config={config}
/>
</>
);
Пример конфигурации параметров:
{
"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 документ
🧑🤝🧑 Участие в совместной разработке
Настройка системы управления контентом (совместная разработка и подключение пользовательского интерфейса).
npm install
sudo npm link
npm run build
npm run test
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )