数据源（实体）管理作为数据模型层，通过实体生成的接口管理数据的增，删，改，查。同时为了简化设计师理解和配置，我们提供了数据容器组件，通过数据容器组件绑定数据源，在组件的生命周期自动执行数据源的相关方法（如在组件 onLoad 时去调用数据源的查询），同时将数据源的相关方法作为组件的事件行为暴露出来。而在运行态则将数据源表单和列表相关业务逻辑提取到FormBusiness和 RepeatViewBusiness高阶组件中集中管理。具体的数据容器组件则复用这部分逻辑，自身仅关注组件本身相关 ui 交互逻辑。
接下来我们以低代码设计器为平台，构建一个简单的列表增删改查Demo，并结合生成的前端代码，深入剖析数据源管理的设计思想及其代码执行逻辑。
首先，我们进入低代码设计器，开始创建我们的列表管理模块。设计师通常会提供丰富的预设组件和拖拽式布局功能，使得无需编写大量代码即可快速构建用户界面。我们选择“重复表”组件作为基础，配置其数据源绑定至后台API，确保能够从服务器端获取数据。同时，为列表添加必要的列头定义，对应展示数据模型中的各个属性字段。
接下来，为列表添加“新增”、“编辑”和“删除”按钮。这些按钮通过触发特定事件（如点击事件），调用相应的数据操作函数。
在低代码环境中，我们通常不需要手动编写这些操作函数的完整代码，而是通过配置界面来指定操作类型（如POST、PUT、DELETE等）、目标API接口以及携带的参数。 例如 ● “新增”操作通常关联一个“创建”API，提交新建数据项的表单数据； ● “编辑”操作则通过“更新”API，发送包含修改后数据的请求； ● “删除”操作调用“删除”API，传入待删除数据项的唯一标识符 这些配置信息会被低代码平台自动转化为后端API调用的代码逻辑。
目录结构
└── datasource/ //
├── base.ts // 各种类别数据操作的基类 Datasource Class
├── ctp-enum.ts // 枚举的数据操作 Class
├── enum.ts // 选项集的的数据操作 Class
├── list.ts // 列表的的数据操作 Class
├── single.ts // 单一记录的的数据操作 Class
├── tree.ts //
├── treeList.ts //
├── data-process.ts //
├── datasource-manager.d.ts //
├── dynamic-api.ts // 封装了业务逻辑的 API 请求
├── index.ts // 根据唯一标识判断做哪种数据操作的初始化
├── init.ts // Datasource初始化
├── utils.ts // 工具函数
执行流程 下图是数据源，数据容器从设计态到运行态的一个整体流程图。
数据获取（查询）:
- 前端代码会根据设计器配置生成对指定API的GET请求中。
- 请求成功后，响应数据会被解析并存储到组件状态（如使用
useState或useReducer管理状态），进而驱动列表的渲染。 - 列表组件依据状态中的数据生成行项目，每个行项目对应数据模型的一个实例。
数据新增： 当用户点击“新增”按钮，前端触发模态窗体（或抽屉）的打开，展示数据项的表单供用户填写。 表单提交时，生成的代码会执行一个POST请求，将表单数据发送到配置好的“创建”API。 若请求成功，后端返回新创建的数据项信息，前端接收到响应后，不仅关闭表单，还会触发列表的重新查询，以刷新界面，显示新增的数据项。
数据编辑： 编辑操作通常在列表项上点击“编辑”按钮启动，同样弹出表单窗口，但此时表单预先填充待编辑数据项的内容。用户修改后提交表单，前端执行PUT请求，将更新后的数据发送到“更新”API。 成功响应后，与新增操作类似，前端会重新查询数据源以更新列表视图。
数据删除： 删除操作较为直接，用户在列表项上点击“删除”按钮后，通常会出现确认提示。确认后，前端发起DELETE请求，目标是配置好的“删除”API，携带待删除数据项的ID。成功响应后，前端再次查询数据源，移除已删除项，更新列表显示。
在整个过程中，低代码设计器简化了前端与后端接口的对接工作，将数据源管理的复杂逻辑封装在可视化配置和自动生成的代码中。设计思想上，强调的是分离关注点，前端专注于界面展示与用户交互，而后端API专注于数据处理与业务逻辑。这种模式极大地提高了开发效率，降低了出错概率，同时保证了代码的可维护性和扩展性。
综上所述，通过在低代码设计器中构建列表增删改查Demo，并结合生成的前端代码，我们得以清晰地洞察数据源管理的设计思想及其代码执行逻辑。无论是数据的获取、新增、编辑还是删除，都遵循统一的请求-响应模式，利用前端状态管理机制确保用户界面实时、准确地反映出数据的变化。低代码平台的运用，进一步简化了这一过程，使开发者能更专注于业务需求本身，而非底层技术细节。
快速跳转
