# 奥枫低代码平台

> 奥枫低代码平台是一个前端低代码框架，它使用JSON配置来生成页面



## 概念

### 配置与组件

#### 结构

> 一个配置的结构是这样的
>
> ```json
> {
>     "page": [
>         {
>             "id": "page_tvV9Ci",
>             "type": "page",
>             "title": "11",
>             "body": [
>                 {
>                     "id": "page_tvV9Ci_0",
>                     "config": {
>                         "align": "top",
>                         "gutter": 0,
>                         "justify": "start"
>                     },
>                     "type": "row",
>                     "body": [
>                         {
>                             "type": "XFormTable",
>                             "selected": false,
>                             "span": 24,
>                             "id": "XFormTable_76UItw",
>                             "props": {
>                                 "queryParamsName": "",
>                                 "serviceName": ""
>                             },
>                             "selfEvent": [
>                                 "action"
>                             ]
>                         }
>                     ]
>                 }
>             ]
>         }
>     ]
> }
> ```
> page下的每一个对象，表示一个`页面容器`
>
> body中的每一个对象，表示一`行`
>
> 每行中body下的每个元素，表示一个`组件`

> 组件的完整配置是这样的
>
> ```json
> {
>     "type": "xx组件",
>     "span": 12,
>     "id": "xx组件_001",
>     "selected": false,
>     "props": {
>         "值1": "111",
>         "值2": "222",
>         ...
>     },
>     "selfEvent": [
>         "action",
>         ...
>     ],
>     "onEvent": {
>         "action": [
>             {
>                 "emitType": "action",
>                 "eventType": "changeValue",
>                 "target": "组件_00x",
>                 "targetKey": "data"
>             },
>     	{...}
>         ]
>     }
> }
> ```
>
> `type`定义了组件的类型
>
> `span`定义了组件的宽度
>
> `selected`定义了组件当前是否被选中
>
> `id`表示组件的唯一标识
>
> `props`中定义的是组件可以被改变的值
>
> `selfEvent`定义了组件可以发出哪些事件交给低代码平台处理
>
> `onEvent`表示每一个事件的具体定义
>
> `onEvent`中的每一个对象的key代表了是针对哪种事件的处理

> 在低代码平台中，最小的单位是`组件`，最大的单位是`页面容器`



#### 页面容器

> 一个`页面容器`可以是`页面`，`弹框`，`抽屉`等
>
> `页面容器`是所有`组件`的容器，`组件`组成了`行`，`行`组成了`页面`



#### 组件

> `组件`是低代码平台的最小单位
>
> 一个组件是某种功能的封装，比如XFormTable是为了展示CRUD表单，XTree是为了展示树型结构



#### 组件的拆分

> 如同栅格化布局一样，每一行套每一列
>
> 某个列又可被看做一个整体，在其下继续拆分为多行，每行又包含多列

> 比如一个页面，左侧是导航栏，右侧是内容栏
>
> 这就是第一行，第一行分为两列，左侧列是导航栏，右侧列是内容栏
>
> 内容栏又被分为了两行
>
> 第一行是标题，第二行是主要内容



### 事件

> 在组件中，会因为各种各样的原因，修改一些状态，比如点击搜索，切换标签
>
> 这些改动，要通过`事件`的形式，向外层触发，来通知其他组件进行联动。比如在树组件中切换了标签，根据不同的标签在CRUD表单中渲染不同的内容
>
> 这个时候我们就需要对触发改动的`组件`添加`事件`，比如在XFormTable中点击详情，我们希望打开一个抽屉，我们就需要为XFormTable添加一个点击详情的事件



### 行为

> 行为是`组件`自身内部进行的一系列变动。比如其他组件触发了某个`事件`，这个`组件`需要对这个`事件`进行响应，并在自身内部进行一系列的更新。这就是一种行为
>
> 还是刚才的例子在XFormTable中点击详情，我们希望打开一个抽屉。那抽屉改变自身的显隐，就是响应点击详情`事件`的一种`行为`
