SuperAPI AI 工具集

syncfusion-react-data-manager

数据与分析

查看项目

更新于 10-14 21:08

技能介绍

用途

Syncfusion React DataManager 是用于 React 应用的数据管理网关组件,作为数据操作抽象层,帮助开发者进行本地与远程数据的绑定、查询、CRUD、缓存和中间件定制,而无需编写复杂的服务端通信代码。

典型使用场景包括:将本地或远程数据源绑定到 UI 组件;对数据执行过滤、排序、分页、分组、搜索;执行插入、更新、删除及批量编辑;对接 JSON、OData、REST API、GraphQL 等不同数据源;为提升性能缓存数据;实现离线模式;添加自定义请求头或认证;转换请求/响应数据;处理 React 应用中的复杂数据场景。

主要能力

数据绑定:使用 json 属性绑定本地数组,使用 url 属性绑定远程 API。查询方法包括 executeLocal()(本地数据)和 executeQuery()(远程数据)。

Query 类:通过 from()、where()、select()、sortBy()、take()、expand()、group() 等链式方法构建结构化查询,支持复杂多条件操作。

适配器(Adaptors):DataManager 通过适配器对接不同数据源。可用适配器包括:JsonAdaptor(本地 JavaScript 数组)、ODataAdaptor(OData v3 服务)、ODataV4Adaptor(OData v4 服务)、UrlAdaptor(通用 REST 端点)、WebApiAdaptor(ASP.NET Web API)、RemoteSaveAdaptor(客户端查询 + 服务端 CRUD 混合)、WebMethodAdaptor(旧版 ASP.NET ASMX 服务)、GraphQLAdaptor(GraphQL 端点)、CustomAdaptor(自定义实现,用于专有服务)。

CRUD 操作:insert() 添加记录;update() 修改现有记录(keyField 作为第一个参数);remove() 删除记录(keyField 作为第一个参数);saveChanges() 将多个操作批量合并为单个请求。

中间件与定制:applyPreRequestMiddlewares() 在发送前修改请求(如认证令牌、请求头);applyPostRequestMiddlewares() 在绑定前转换响应(格式化、过滤);支持自定义适配器、请求失败的错误处理器。

缓存与性能:enableCache 避免重复请求已加载页面;离线模式本地存储数据并在连接恢复后同步;按需加载(虚拟滚动时懒加载);基于 Promise 的异步/await 延迟操作。

使用方式

安装后从 @syncfusion/ej2-data 导入 DataManager、Adaptor 和 Query。创建 DataManager 实例时可配置 json(本地数组)或 url(远程端点)、adaptor、enableCache、offline、crossDomain 等属性;然后调用 executeLocal() 或 executeQuery() 执行查询并处理结果。查询通过 Query 类链式方法构建,例如 where() 过滤、sortBy() 排序、take() 分页。CRUD 通过 insert/update/remove/saveChanges 完成。请求定制通过前置/后置中间件实现。

适配器决策门(强制人工确认)

本技能规定:当用户提供 service URL 但未明确指定适配器类型时,代理必须立即停止代码生成,阅读 references/adaptor-decision-gate.md,按模板向用户呈现该决策门,等待用户明确确认适配器选择后,才生成 DataManager 代码。触发条件示例:提供 URL 但未指定适配器、仅说 "API" 或 "REST"(含义不明确)时需触发;若已明确说明 OData v4、WebApiAdaptor 的 { Items, Count } 响应模式,或使用本地列表数据绑定,则无需触发。

适用场景

DataManager 适合:需要灵活数据管理(支持任意数据源);需要复杂查询(过滤、排序、分页、分组、搜索);需要 CRUD 与批量/事务;需要中间件定制(请求前后钩子);需要离线支持(缓存并在连接恢复后同步);需要在不改动代码的情况下切换数据源。

相比之下,若仅需基础数据绑定、无需复杂查询,或性能对超大数据集至关重要、无需中间件定制时,直接组件绑定(Grid、Scheduler 等)可能更合适。

限制与安全要求

本技能仅生成代码,代理不执行数据操作,也不抓取远程端点;所有 DataManager 交互仅发生在用户应用运行时。生成代码须将第三方 API 响应视为不可信输入,不得绑定到未验证或用户提供的 URL,远程端点须强制认证。

绑定远程服务时必须实施:仅使用 HTTPS(禁止未加密 HTTP,传输中数据须加密);URL 使用字符串变量(将端点赋给私有字符串属性而非硬编码,便于集中校验与维护);校验并清理响应(服务端模式校验、拒绝意外响应格式、映射到强类型模型);监控远程调用(记录所有外部 API 请求的时间戳、端点与结果,用于安全审计);安全配置 CORS(仅使用特定受信任来源,生产环境禁用通配符 *,要求 HTTPS);防范间接提示注入(验证端点归属、实施请求签名、在消费数据前校验响应内容类型与模式)。

关键属性

json(Array):本地 JavaScript 对象数组。url(string):远程服务器端点 URL。adaptor(Adaptor):JsonAdaptor、ODataAdaptor、WebApiAdaptor 等。enableCache(boolean):缓存页面以避免重复请求。offline(boolean):启用带本地存储的离线模式。crossDomain(boolean):跨域 CORS 请求。

与直接绑定的对比

DataManager 在灵活适配器切换、Query 类链式复杂查询、完整 CRUD 与批量、请求前后中间件、内置缓存与离线模式方面具有优势;直接绑定则在这些方面能力有限。小数据集性能两者相近(直接绑定略快),大数据集下 DataManager 支持懒加载。

(注:具体安装命令、代码示例细节以官方资料为准;资料中未提供的收费、价格、平台支持范围等信息暂未提供。)