低代码后端前端开发工具【免费下载链接】openblocks The Open Source Retool Alternative项目地址https://gitcode.com/gh_mirrors/op/openblocks点击查看免费下载导读在 Openblocks 低代码平台中查询Query是连接数据源与应用界面之间的核心桥梁——它支持你从数据源读取数据也支持向数据源写入数据。你可以在编辑应用时直接创建查询也可以在查询库Query Library中创建可复用的查询。本文将基于docs/queries/query-basics.md的完整脉络结合客户端源码位于client/packages/openblocks/src/comps/queries/深入讲解如何连接数据源、如何在查询编辑器中编写语句、如何利用{{ }}实时求值校验查询、如何查看数据库元数据以及如何为查询选择合适的触发模式并在 Notification / Advanced 标签页中配置成功/失败通知、超时、周期性运行等高级行为。读完本文你将能独立完成一个读取型查询和写入型查询的完整配置并理解其背后的自动触发判定逻辑。连接数据源查询的起点创建查询的第一步是确定数据源。Openblocks 支持两种方式直接使用数据源库中已有的数据源——数据源库集中管理各类数据库如 PostgreSQL、MongoDB、Elasticsearch以及内部或第三方 API 的连接凭据。在查询编辑器中新建数据源——点击数据源下拉框旁的创建入口即可新建。新建数据源的完整流程点击主页Data Sources→New data source→ 选择数据库/API 类型 → 填写连接字段 →Test connection验证连通性 →Save可参考 数据源基础。需要注意只有工作区管理员Admin和开发者Developer组的成员可以查看Data Sources页面并创建新数据源每个数据源的Access Control访问控制可由管理员和创建者修改详细权限说明见 资源权限。提示如果数据源位于有防火墙或白名单的环境中需要先按 配置 IP 白名单 将 Openblocks 的 IP 加入数据源白名单连接测试才能成功。从源码结构看Openblocks 通过QueryMap定义于 queryConstants.ts将不同类型的数据源映射到对应的查询组件例如 PostgreSQL/MySQL/MSSQL/Oracle 等 SQL 数据库统一走SQLQueryREST API 走HttpQuery另有MongoQuery、RedisQuery、EsQuery、SMTPQuery、GraphqlQuery、GoogleSheetsQuery等专用实现以及不依赖外部数据源的JSQuery。你选择的数据源类型直接决定了查询编辑器界面形态。创建查询编辑器的三种能力在应用底部面板的查询编辑器中新建查询后查询编辑器的 UI 会根据所选数据源类型变化。以连接 PostgreSQL 数据库为例你可以编写如下 SQL 语句并执行SELECT * FROM users WHERE customer_id {{ input.value }}使用{{ }}实时求值Openblocks 会实时使用 JavaScript 代码对查询语句中的{{ }}内容求值你在{{ }}内写的是 JavaScript 表达式可以是简单变量引用也可以是完整表达式求值结果会显示在下方浮框中。这让你在点击运行之前就能检查查询语句的语法与取值是否正确例如确认{{ input.value }}是否解析为期望的客户编号。这一实时求值机制在底层由查询依赖追踪支撑QueryComp通过extraNode()构建FetchCheckNode监听查询语句的依赖节点并记录依赖值的变化见 queryComp.tsx。当依赖值变化而查询语句本身未变时就会触发一次自动执行execute内部做了 750ms 防抖、最多等待 2000ms 的处理这也是下文输入变化时自动运行的底层原理。SQL 语句与 GUI 模式对于 SQL 数据源查询编辑器支持SQL与GUI两种模式见 SQLQuery.tsxSQL 模式直接编写 SQL 文本占位示例为SELECT * FROM users;编辑器启用元数据补全enableMetaCompletion。GUI 模式通过下拉框选择操作INSERT / UPSERT / UPDATE / DELETE / BULK_INSERT / BULK_UPDATE再以表单方式填写表名、字段变更集、过滤条件等无需手写 SQL。其中 UPSERT 仅对 MySQL 系列数据源开放Oracle 不支持 BULK_INSERTClickHouse / Snowflake 等不支持 GUI 模式。此外部分 SQL 数据源如 MySQL还提供Disable prepared statements禁用预编译语句开关禁用后可动态生成 SQL但存在 SQL 注入风险默认关闭。查询的编写位置编辑器与查询库查询既可以在应用编辑器中创建也可以在查询库中创建后复用。查询库支持定义Inputs输入参数、发布语义化版本、查看历史版本并恢复应用内可通过导入查询库来引用某个查询的指定版本并传入输入参数详见 查询库。元数据Metadata写查询时的提示器点击查询编辑器中的Metadata标签PostgreSQL、MongoDB、MySQL 等数据库的表结构会以树形结构展示表 → 字段。元数据对编写查询非常有用帮助确认表名、字段名的大小写与拼写在输入 SQL 时提供自动补全建议auto-suggestion减少手误。从实现看元数据补全能力通过查询编辑器控件中的enableMetaCompletion选项启用SQL 模式与 GUI 模式下的字段选择下拉框如 columnNameDropdown.tsx都会依赖该元数据。触发模式Trigger when自动执行还是手动执行Openblocks 提供两种查询触发模式可在查询编辑器的Triggered when下拉框中选择该下拉框由 queryPropertyView.tsx 中的TriggerTypeStyled渲染模式说明适用场景Inputs change or on page load输入变化或页面加载时查询在其依赖的输入变化时自动运行页面加载时也会自动运行推荐用于读取数据的查询如SELECTManually invoked手动调用仅在手动触发时运行例如点击按钮或链接需为组件配置事件处理器来触发推荐用于写入数据的查询如create/delete/update自动模式输入变化或页面加载设置为自动模式的查询会在依赖的输入变化时立即重新运行也会在页面加载时运行一次。文档中的典型示例select * from users where customer_id {{input.value}}当input.value变化时该查询结果会即时更新——例如用户在下拉框或输入框中切换客户后表格数据立刻刷新。源码中这一逻辑清晰可见QueryComp在收到UPDATE_NODES_V2且处于automatic模式时会比较前后两轮的依赖值depends由this.children.comp.node()?.dependValues()获得若依赖值变化而 DSL 未变则触发execute()750ms 防抖后执行同时在QueryView的useEffect中若依赖就绪isDepReady且非新建查询则页面加载时通过deferAction(executeQueryAction({}))自动执行一次见 queryComp.tsx。注意JS 查询js类型的查询在自动模式下对应文案是 On page load页面加载时即不会因依赖变化反复执行只在页面加载时运行一次。手动模式事件处理器触发手动模式的查询只在你手动触发时运行——典型方式是给按钮或链接配置事件处理器如设置onClick事件调用该查询的Run动作。因为写入操作如创建订单、删除记录通常需要先确认输入完整无误再执行所以官方建议写入型查询使用此模式。从源码看手动触发有两种途径界面 Run 按钮查询属性面板顶部的运行按钮点击后 dispatchexecuteQueryAction组件事件处理器查询暴露run方法支持传入参数args见 queryComp.tsx 中withMethodExposing定义的run方法并可在应用中通过queryName.run()以 JavaScript 方式调用。读/写切换的自动判定Openblocks 提供一个贴心行为当检测到查询语句从读取切换为写入时触发模式会自动从自动模式切换为手动模式反过来不会自动切换。其底层实现是各类查询组件均实现isWrite(action)判定SQL 查询用正则(\s|^)(update|insert|delete|drop)(\s|$)忽略大小写检测 SQL 文本是否包含写操作关键字或模式切换为 GUI见 SQLQuery.tsxHTTP 查询HTTP 方法不是GET时视为写操作见 httpQuery.tsxMongoDB 查询操作类型为INSERT/UPDATE/DELETE/RAW时视为写操作见 mongoQuery.tsxElasticsearch / Redis / Google Sheets 查询同样各自实现了写操作判定见 esQuery.tsx、redisQuery.tsx、googleSheetsQuery.tsx。当QueryComp.reduce处于automatic模式且检测到子组件isWrite(action)返回 true 时会通过changeChildAction(triggerType, manual)自动切换为手动模式见 queryComp.tsx。此外部分数据源从创建之初就固定为手动触发常量manualTriggerResource [js, smtp]见 queryConstants.ts新建或切换数据源时若命中该列表触发模式会直接设为manual。如何选择触发模式大多数读取数据的查询如select操作用自动模式即可实时响应输入变化写入数据的查询如create/delete/update建议用手动模式在数据确认无误后再通过按钮等事件触发。Notification 标签页与 Advanced 标签页查询属性面板分为General通用、Notification通知、Advanced高级三个标签页标签页结构定义于 queryPropertyView.tsx 的BottomTabs。其中Notification和Advanced中的可用设置会根据触发模式不同而变化官方文档的对照表如下标签页设置项Inputs change or on page loadManually invokedNotification运行成功后显示成功消息✅运行失败后显示失败消息✅✅Advanced运行前显示确认弹窗✅设置查询运行超时✅✅周期性执行查询✅Notification 标签页成功与失败通知Notification 标签页的可用配置由 queryNotificationControl.tsx 实现包含运行成功后显示成功消息仅手动模式可用开启后查询成功执行会弹出成功提示可自定义提示文本系统默认提示形如查询 xxx 执行成功。运行失败后显示失败消息两种模式均可用开启后查询失败会弹出错误提示。除系统默认提示外还支持条件化失败消息以键值对列表形式配置若干条规则每条规则由condition条件表达式占位示例{{ !data.code }}与text消息文本占位示例{{ data.message }}组成当条件为真时展示对应文本可据此针对不同错误场景给出不同提示。通知时长消息展示时长默认 3 秒最大 10 秒支持ms/s单位输入。值得一提的实现细节当查询从自动模式手动切换到手动模式时源码会自动把showFail置为 true见 queryComp.tsx 中CHANGE_VALUE分支确保写操作失败时有错误反馈。此外查询还支持onEvent事件处理器success/fail两个事件失败消息中的条件表达式可以在{{ data }}上下文中读取查询结果数据。Advanced 标签页确认弹窗、超时与周期性运行Advanced 标签页的配置项与源码对应关系如下1. 运行前显示确认弹窗仅手动模式可用开启后每次手动触发查询前都会弹出确认对话框点击确认后才真正执行。可自定义确认文案默认文案见 queryConfirmationModal.tsx。这对删除、更新等不可逆的写操作非常实用——例如点击删除用户按钮时先弹窗确认避免误操作。2. 设置查询运行超时两种模式均可用默认值10 秒取值范围0 ~ 120 秒输入单位默认毫秒ms支持ms/s后缀例如300、800ms、5s。底层由paramsMillisecondsControl定义于 queryComp.tsxleft: 0, right: 120 * 1000, defaultValue: 10 * 1000约束。前端发起请求时实际请求超时会在此基础上追加 5 秒缓冲QUERY_TIMEOUT_BUFFER_MS见 queryApi.ts以容纳网络与序列化开销。3. 周期性执行查询仅自动模式可用开启Run this query periodically后可设置Period周期默认单位毫秒支持ms/s输入最小值 100ms低于该值会直接禁用周期执行并提示错误源码中toMilliseconds对小于 100 的值抛出TypeError见 queryComp.tsx。底层通过useFixedDelayhook 实现当触发模式为automatic且periodic开启时每隔periodicTime毫秒 dispatch 一次executeQueryAction见 queryComp.tsx 中的QueryView。典型场景如实时监控数据面板每 5 秒自动拉取一次最新数据。补充说明Advanced 标签页还提供Cancel previous取消上一个请求选项默认关闭开启后同一查询若在上一次请求未返回前再次触发会忽略旧请求的结果通过latestExecution记录最新执行 id 比对实现见 queryComp.tsx适用于高频触发场景避免结果乱序覆盖。另外在开启预编译语句的数据源上Advanced 标签页还会显示Disable prepared statements开关。查询结果的使用与校验查询执行后其结果会写入查询组件的状态中可在应用中通过queryName直接引用以下导出属性见 queryComp.tsx 中的withExposingConfigs属性说明data查询返回的数据JSON如表格数据、API 响应体code执行结果码成功为OKsuccess是否执行成功布尔值message失败时的错误信息isFetching是否正在执行中布尔值runTime本次执行耗时毫秒latestEndTime最近一次执行结束时间戳triggerType当前触发模式automatic/manualextra额外的响应元数据典型用法表格组件的数据源设为query1.data按钮的显示/禁用状态绑定query1.isFetching失败提示绑定query1.message。查询还暴露run(args)方法可通过事件处理器或 JavaScript 手动调用并传入参数。小结围绕一条查询的完整生命周期Openblocks 提供了从数据源连接到执行与反馈的一整套机制{{ }}实时求值保证语句正确性Metadata 元数据提升编写效率触发模式自动/手动双模式兼顾读实时、写受控的最佳实践Notification 与 Advanced 标签页则让超时、周期刷新、确认弹窗与成败通知都可配置。掌握这些能力后你就能在应用中稳健地组织数据读取与写入逻辑。如需进一步了解查询的复用与版本管理可继续阅读 查询库数据源连接与权限细节见 数据源基础 与 资源权限。赞分享低代码后端前端开发工具【免费下载链接】openblocks The Open Source Retool Alternative项目地址https://gitcode.com/gh_mirrors/op/openblocks点击查看免费下载相关推荐ToolJet 连接 MySQL 数据源全指南从连接配置到 SQL / GUI 双模式查询ToolJet 连接 MySQL 数据源全指南从连接配置到 SQL / GUI 双模式查询 ToolJet 内置 MySQL 数据源插件可以在低代码应用中直低代码后端前端AI 应用MCP 服务ToolJet 连接 Amazon Athena 数据源从连接配置到 SQL 查询实战指南ToolJet 连接 Amazon Athena 数据源从连接配置到 SQL 查询实战指南 本文以 ToolJet 官方数据源文档 athena.md htt低代码后端前端AI 应用MCP 服务ToolJet 连接 MongoDB 数据源从连接配置到 18 种查询操作的完整指南ToolJet 连接 MongoDB 数据源从连接配置到 18 种查询操作的完整指南 本文基于 ToolJet 开源仓库 3.0.0 LTS 版本官方文档系低代码后端前端AI 应用MCP 服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考