从零构建 API 低代码平台系列（七）可视化流程编辑器实现（下）

前言

上文《从零构建 API 低代码平台系列（六）可视化流程编辑器实现（上）》我们介绍了流程编辑器的整体设计和交互体验。本文将继续深入，带您了解节点配置面板的设计——这是让用户定制节点行为的关键功能，也是实现复杂业务逻辑的核心能力。

💡 为什么配置面板如此重要？

节点配置面板是用户与节点"对话"的窗口。一个优秀的配置面板，能让用户轻松完成数据库连接、SQL 编写、参数映射等复杂配置，无需编写代码即可实现业务逻辑。

一、配置面板概览

1.1 面板结构

配置面板采用动态表单设计，根据节点类型显示不同的配置项：

┌─────────────────────────────────────────┐
│  节点配置                                │
├─────────────────────────────────────────┤
│                                         │
│  节点名称                                │
│  ┌───────────────────────────────────┐  │
│  │ 查询用户信息                       │  │
│  └───────────────────────────────────┘  │
│                                         │
│  ── 数据库配置 ──                       │
│                                         │
│  凭证选择                                │
│  ┌───────────────────────────────────┐  │
│  │ 生产环境MySQL              ▼      │  │
│  └───────────────────────────────────┘  │
│                                         │
│  操作类型                                │
│  ○ 查询  ● 插入  ○ 更新  ○ 删除        │
│                                         │
│  ── SQL 配置 ──                         │
│                                         │
│  SQL 语句                                │
│  ┌───────────────────────────────────┐  │
│  │ SELECT * FROM users               │  │
│  │ WHERE id = {{input.user_id}}      │  │
│  └───────────────────────────────────┘  │
│                                         │
│  ── 输出配置 ──                         │
│                                         │
│  输出变量名                              │
│  ┌───────────────────────────────────┐  │
│  │ json                              │  │
│  └───────────────────────────────────┘  │
│                                         │
│  ┌─────────────┐  ┌─────────────┐      │
│  │    取消     │  │    确定     │      │
│  └─────────────┘  └─────────────┘      │
└─────────────────────────────────────────┘

1.2 配置项分类

🎯 商业价值解读

配置面板对企业意味着什么？

二、核心节点配置详解

2.1 MySQL 节点配置

MySQL 节点是最常用的数据库节点，支持完整的 CRUD 操作：

SQL 编辑器特性：

• 🎨 语法高亮：SQL 关键字自动高亮

• ✅ 语法检查：实时检查 SQL 语法错误

• 📝 自动补全：表名、字段名自动提示

• 💡 表达式支持：支持 {{input.xxx}} 动态参数

2.2 Redis 节点配置

Redis 节点支持常见的缓存操作：

典型应用场景：

• 📦 缓存热点数据

• 🔢 接口调用计数

• 🔒 分布式锁

2.3 HTTP Request 节点配置

HTTP 节点支持调用第三方 API：

认证支持：

• 🔑 API Key 认证

• 🎫 Bearer Token

• 🔐 Basic Auth

• 📝 自定义 Header

2.4 Code 节点配置

Code 节点支持自定义 JavaScript 代码：

// 输入：上游节点的输出
// 输出：return 的值作为节点输出

// 示例：数据转换
const users = json.rows;
const result = users.map(user => ({
  id: user.id,
  name: user.name,
  displayName: `${user.name} (${user.email})`
}));

return result;

Code 节点特性：

• 📜 JavaScript 语法：支持 ES6+ 语法

• 🔒 安全沙箱：隔离执行，不影响系统

• 📦 内置函数：支持常用工具函数

• ⏱️ 超时控制：防止死循环

三、凭证管理系统

3.1 凭证类型

APIFlow 支持多种数据源凭证：

3.2 凭证安全

凭证配置采用加密存储：

用户输入凭证 ──▶ AES-256-GCM 加密 ──▶ 存储到数据库
                    │
                    └── 密钥独立管理，支持轮换

安全特性：

• 🔐 加密存储：敏感信息加密保存

• 🔑 独立密钥：每个用户独立密钥

• 🔄 密钥轮换：支持定期更换密钥

• 📝 操作审计：凭证使用记录可追溯

四、表达式系统

4.1 表达式语法

APIFlow 支持类似 n8n 的表达式语法：

4.2 表达式应用场景

场景一：动态 SQL 参数

SELECT * FROM users 
WHERE id = {{input.user_id}}
  AND status = '{{input.status}}'

场景二：HTTP 请求体

{
  "user_id": {{input.user_id}},
  "name": "{{json.rows[0].name}}",
  "timestamp": "{{$now}}"
}

场景三：响应数据组装

{
  "code": 0,
  "data": {
    "user": {{json.rows[0]}},
    "orders": {{node-2.orders}}
  }
}

4.3 表达式编辑器

配置面板内置表达式编辑器：

• 🎨 语法高亮：表达式自动高亮

• 💡 智能提示：可用变量自动提示

• ✅ 实时预览：输入表达式即时显示结果

• 📋 变量列表：展示所有可用变量

五、配置验证

5.1 实时验证

配置面板支持实时验证，在用户输入时即时检查：

5.2 保存前验证

保存流程前进行完整验证：

点击保存
    │
    ▼
检查所有节点配置
    │
    ├── 有错误？ ──▶ 显示错误列表，阻止保存
    │
    └── 无错误？ ──▶ 允许保存

验证内容：

• ✅ 所有节点都有配置

• ✅ 所有必填项都已填写

• ✅ SQL 语法正确

• ✅ 表达式变量存在

• ✅ 连线完整（无孤立节点）

六、模板功能

6.1 内置模板

APIFlow 提供常用场景的流程模板：

6.2 模板使用

选择模板 ──▶ 应用到画布 ──▶ 修改配置 ──▶ 保存使用

模板价值：

• ⚡ 快速启动：常见场景一键复用

• 📚 最佳实践：内置业界最佳实践

• 🎓 学习参考：新手学习的好素材

七、总结

APIFlow 的节点配置面板，体现了以用户为中心的设计理念：

• ✅ 配置直观：动态表单，所见即所得

• ✅ 功能强大：支持 SQL、HTTP、代码等多种配置

• ✅ 安全可靠：凭证加密存储，操作可审计

• ✅ 智能辅助：表达式提示、语法检查、实时验证

• ✅ 效率提升：模板复用，快速启动

这是一个让业务人员也能轻松配置的强大工具。

🎁 获取方式，添加微信：daniel5185186

源码授权

• ✅ 完整源代码（前端 + 后端）

• ✅ 详细部署文档

• ✅ 一对一技术支持

• ✅ 后续版本更新

定制开发

• ✅ 新增节点类型

• ✅ 自定义配置项

• ✅ 界面风格定制

• ✅ 技术培训服务