# 主界面 主界面功能分为四个部分设计器、数据源、监听、元数据 ## 设计器 布局可视化功能，从左侧工具箱拖动组件到设计器区域进行布局，设计区域点击选中某个组件，在右侧属性编辑区域编辑组件的属性 具有容器特性的组件内部可以添加下级组件 ## 数据源 数据源用于设置数据和远程的交互行为，包括从远程获取数据和向远程提交数据，设计器提供 request 类型数据源实现 http 请求和发送数据，可二次开发增加支持的数据源类型，例如 websocket 或特定行为的 http 请求 ### 数据源管理 在数据源界面可进行添加、编辑、删除操作，添加一个数据源需要定义名称和数据源类型 > 数据源名称可作为一个标识在组件属性编辑表达式里使用 选择数据源类型后出现该类型的相关属性，对数据源进行设置 ### 数据源类型 - object 只提供数据定义，实现固定数据 **属性** | 名称 | 说明 | 默认值 | | ---- | ------------ | ------ | | 数据 | 数据源的数据 | - | - request 实现基本 http 请求 **属性** | 名称 | 说明 | 默认值 | | -------- | ------------------------------------------------- | ------ | | 方法 | http 请求类型 `GET` `POST` `PUT` `PATCH` `DELETE` | - | | 请求地址 | http 请求地址 | - | | 请求参数 | `GET` 类型请求参数 | - | | 请求数据 | `POST` `PUT` `PATCH` 类型请求发送的数据 | - | | 请求头 | 请求的头部信息 | - | | 数据类型 | 请求返回的数据类型 | json | | 自动请求 | 界面呈现后自动执行 http 请求 | true | | 数据属性 | 定义将请求结果的属性作为数据源的数据 | data | | 默认数据 | 数据源不请求或请求无数据时候的默认数据 | - | | 异常数据 | http 请求失败，数据源的数据 | - | **方法** | 名称 | 说明 | | ---- | -------------------- | | load | 执行定义的 http 请求 | ## 监听 监听设置用于管理数据的联动关系，添加一个监听项设置需要监听的属性，选择一个监听管理监听触发后的行为 ### 监听项属性 一个监听项具有三个属性 - 监听对象 监听对象定义监听的属性，其中对象 `model` `datasource` `params` `refs` 中的属性均可用于监听 ::: tip 关于对象 - model 表单数据对象，由内部组件交互操作产生变化的数据，例如：输入文本、选择 - datasource 数据源对象，通过数据源定义的名称获取数据源对象 - params 使用 vjform 呈现视图时，通过 params 属性将外部数据传递进来，这里的 params 就是传递过来的外部数据 当 params 里的属性值被改变时，就会触发监听的属性 - refs 设计器内组件定义的 `引用名`，通过引用名获取组件实例，可使用组件的属性和方法 ::: - 深度监听 如果监听的属性值是一个对象，开启深度监听后，对象包含的属性发生变化都会触发监听 - 立即执行 无论属性值是否变化，表单在呈现后会触发一次这个监听 ### 监听行为 监听行为是定义在监听项被触发后执行的操作，包含三个属性 > 条件和行为的定义方式使用属性转换表达式，具体参见属性编辑章节 - 条件 监听项监听的属性被触发后会先验证条件，如果满足定义的条件则执行行为中定义的操作 - 延时 设定在监听被触发后在指定时间间隔后再执行，单位是毫秒 - 行为 监听执行的操作 ## 元数据 设计器生成的配置数据，主要包含 `fields` `datasource` `listeners` 四个属性的数据，对应使用 `vjform` 的相应属性