## 基本概念 为了简化页面的开发,CabloyJS提供了`布局管理器`的概念 `布局管理器 = 数据提供者 + 布局配置` 1. 数据提供者:为页面的显示提供数据 2. 布局配置:将页面切分为区块的组合,并且可以单独指定每一个区块的渲染组件和渲染参数 ## 基础布局 为了进一步简化布局的配置,CabloyJS提供了基础布局配置。业务模块只需提供页面布局的增量部分(定制布局),所以开发起来非常便捷。比如: `原子列表布局 = 基础布局 + 列表默认布局 + 列表定制布局` `原子条目布局 = 基础布局 + 条目默认布局 + 条目定制布局` ## 基础布局配置 `src/module-system/a-base-sync/front/src/config/config.js` ``` javascript layoutManager: { base: { info: { data: { adapter: { component: { module: 'a-basefront', name: 'listLayoutDataAdapter', }, providers: { all: { component: { module: 'a-basefront', name: 'listLayoutDataProviderAll', }, }, continuous: { component: { module: 'a-basefront', name: 'listLayoutDataProviderContinuous', }, }, paged: { component: { module: 'a-basefront', name: 'listLayoutDataProviderPaged', }, }, tree: { component: { module: 'a-basefront', name: 'listLayoutDataProviderTree', }, fields: { sorting: null, }, dataSourceAdapter: { component: null, }, treeviewRoot: { attrs: { itemToggle: false, selectable: true, }, }, }, }, }, }, }, layouts: { base: { blocks: { caption: { component: { module: 'a-baselayout', name: 'baseLayoutBlockCaption', }, renderImmediate: true, }, title: { component: { module: 'a-baselayout', name: 'baseLayoutBlockTitle', }, }, subnavbar: { component: { module: 'a-baselayout', name: 'baseLayoutBlockSubnavbar', }, }, main: { component: { module: 'a-baselayout', name: 'baseLayoutBlockMain', }, }, }, }, default: { title: 'LayoutDefault', component: { module: 'a-baselayout', name: 'baseLayoutDefault', }, subnavbar: false, }, list: { title: 'LayoutList', component: { module: 'a-baselayout', name: 'baseLayoutList', }, subnavbar: false, blocks: { item: { component: { module: 'a-baselayout', name: 'baseLayoutBlockListItem', }, }, items: { component: { module: 'a-baselayout', name: 'baseLayoutBlockListItems', }, }, }, }, }, }, }, ``` ## info.data.adapter 由于不同的布局对数据的使用方式有所不同,所以在这里定义了一个`数据适配器`和一组`数据提供者` ### 1. 数据适配器 `数据适配器`用于管理一组`数据提供者`,同时向外暴露了统一的接口规范。模块`a-basefront`提供了一个缺省的`数据适配器`,也定义在`JSON规范`中。如果我们有特殊的业务需求,可以开发自定义的`数据适配器`,并覆盖默认的配置 | 名称 | 默认组件 | 说明 | |----|----|----| | component | a-basefront + listLayoutDataAdapter | 实现该`数据适配器`的Vue组件 | ### 2. 数据提供者 模块`a-basefront`提供了最常见的4种`数据提供者`,从而满足大多数布局的使用需求 * providers | 名称 | 默认组件 | 说明 | |----|----|----| | all | a-basefront + listLayoutDataProviderAll | 所有数据模式:用于从后端一次性加载所有数据 | | continuous | a-basefront + listLayoutDataProviderContinuous | 连续模式:响应`下拉滚动`,按`连续页`依次从后端加载数据,比如`list布局` | | paged | a-basefront + listLayoutDataProviderPaged | 分页模式:响应`用户点击`,按`指定页`从后端加载数据,比如`table布局` | | tree | a-basefront + listLayoutDataProviderTree | 树型模式:按树型结构从后端加载数据,比如`tree布局`和`treeTable布局` | ## layouts `layouts`定义基本的布局配置 | 名称 | 说明 | |----|----| | base | `基本`布局配置,定义一些具有共性的区块,包括:`caption`、`title`、`subnavbar`、`main` | | default | `默认`布局配置。如果没有明确指定,一般的页面都会从`default`布局继承配置 | | list | `列表`布局配置,一般的列表页面都会从`list`布局继承配置 |