Lowdefy核心概念深度解析：Blocks、Operators、Actions和Requests的终极指南

Lowdefy核心概念深度解析：Blocks、Operators、Actions和Requests的终极指南

【免费下载链接】lowdefyBuild apps that AI can generate, humans can review, and teams can maintain. Config that works between code and natural language.项目地址: https://gitcode.com/gh_mirrors/lo/lowdefy

Lowdefy是一个基于Next.js的配置驱动型Web框架，让开发者通过YAML/JSON配置而非代码构建Web应用。它的核心在于四个关键概念：Blocks（UI组件）、Operators（动态逻辑）、Actions（事件处理）和Requests（数据操作），这些组件协同工作，使你能够快速构建功能丰富的应用程序。

Lowdefy架构概览

Lowdefy应用的工作流程围绕着配置驱动的理念展开，从用户编写的YAML配置到最终的Web应用，经历了构建和运行两个主要阶段。

如上图所示，Lowdefy架构主要包含以下几个部分：

• Server：处理API请求、连接管理和认证上下文
• Web UI：负责React渲染、状态管理和事件处理
• Connectors and Requests：与外部数据源交互
• Operators：提供动态逻辑处理能力

Blocks：构建UI的基础组件

Blocks是Lowdefy应用的视觉构建块，每个Block都是一个可配置的React组件，用于渲染UI元素。它们是构建应用界面的基础。

Block的核心特性

• React组件的封装
• 通过YAML属性进行配置
• 与页面状态连接
• 事件驱动（onClick, onChange等）

Block的主要分类

Lowdefy提供了多种类型的Block，满足不同的UI需求：

常用Block包

Lowdefy提供了多个Block包，每个包针对特定的功能需求：

Block配置示例

Blocks通过YAML进行配置，以下是一个按钮Block的示例：

blocks: - id: submitButton type: Button properties: title: Submit type: primary icon: AiOutlineSend events: onClick: - id: submitForm type: Request params: requestId: saveData

Operators：动态逻辑处理

Operators是Lowdefy中以_为前缀的函数，它们使配置具有动态性，能够访问状态、转换数据和添加逻辑。

Operator的核心特性

• 以_为前缀的函数
• 在构建时或运行时评估
• 用于访问状态、转换数据、添加逻辑
• 是配置驱动应用中的"代码"

Operator的评估上下文

Operators可以在不同的上下文中执行：

常用Operator类型

核心数据访问Operators

这些Operators来自@lowdefy/operators-js：

逻辑Operators

Operator使用示例

以下是一个使用_if和_state的示例，根据用户类型显示不同的欢迎信息：

greeting: _if: test: _eq: - _state: userType - admin then: _string: - 'Welcome, Admin ' - _state: userName else: Welcome, User

Actions：事件处理的驱动力

Actions是响应事件执行的函数，它们为Lowdefy应用提供了交互能力。

Action的核心特性

• 由Block事件触发（onClick, onChange等）
• 在事件中按顺序执行
• 可以修改状态、发起请求、导航等
• 是Lowdefy应用的"动词"

事件-动作模型

以下是一个事件触发多个动作的示例：

blocks: - id: button type: Button events: onClick: # 事件 - id: updateState # 动作1 type: SetState params: loading: true - id: saveData # 动作2 type: Request params: requestId: saveUser - id: navigate # 动作3 type: Link params: pageId: success

Action的结构

每个Action包含以下部分：

- id: actionId # 事件内的唯一ID type: ActionType # Action类型名称 params: # Action参数 key: value skip: # 可选：跳过条件 _state: skipAction onError: # 可选：错误处理 - id: handleError type: Message

Action执行流程

1. 评估skip条件
2. 评估params参数
3. 执行action
4. 处理错误

常用Action模式

条件Action

events: onClick: - id: adminAction type: SetState skip: _not: _user: isAdmin params: showAdminPanel: true

错误处理

events: onClick: - id: saveData type: Request params: requestId: save onError: - id: showError type: Message params: content: Save failed type: error

Requests：数据操作的桥梁

Requests是Lowdefy中的服务器端数据操作，它们通过连接(Connections)与外部数据源交互。

Request的工作流程

1. 客户端通过Action触发请求
2. @lowdefy/client将请求发送到API路由
3. @lowdefy/api针对连接执行请求
4. 响应返回并缓存在状态中

Request示例

requests: - id: fetchUsers type: KnexQuery connectionId: default properties: query: select: '*' from: 'users' where: status: _state: filterStatus

实际应用示例

1. 数据搜索界面

下面是一个使用Blocks和Requests实现的公司搜索界面：

这个界面使用了以下核心概念：

• Blocks：表格、搜索框等UI组件
• Operators：处理搜索逻辑和数据过滤
• Actions：响应用户输入和搜索按钮点击
• Requests：从数据库获取公司数据

2. 联系表单

下面是一个联系表单示例，展示了如何使用Input Blocks和表单提交：

这个表单使用了：

• Input Blocks：收集用户输入
• Actions：处理表单验证和提交
• Requests：将表单数据发送到服务器

3. 数据可视化

下面是一个月度收入图表，展示了数据可视化能力：

这个图表使用了：

• Display Blocks：ECharts组件展示数据
• Requests：获取收入数据
• Operators：处理和转换图表数据

总结

Lowdefy的四大核心概念Blocks、Operators、Actions和Requests共同构成了一个强大的配置驱动开发框架。通过这些组件，你可以：

• 使用Blocks快速构建直观的用户界面
• 利用Operators添加动态逻辑和数据处理
• 通过Actions定义用户交互和事件响应
• 通过Requests连接和操作外部数据源

这种架构使开发者能够专注于业务逻辑而非繁琐的代码实现，大大提高了开发效率。无论你是构建内部工具、管理面板还是客户门户，Lowdefy都能帮助你快速交付高质量的Web应用。

要开始使用Lowdefy，只需克隆仓库并按照文档开始配置你的第一个应用：

git clone https://gitcode.com/gh_mirrors/lo/lowdefy

详细的官方文档可以在code-docs/目录中找到，其中包含了更多关于每个核心概念的深入解析和使用指南。

【免费下载链接】lowdefyBuild apps that AI can generate, humans can review, and teams can maintain. Config that works between code and natural language.项目地址: https://gitcode.com/gh_mirrors/lo/lowdefy