低代码平台

一、定义

低代码平台（Low-Code Platform）
 
一种可视化开发平台，核心思想：以拖拽、配置化开发为主，少量手写代码为辅，快速搭建软件应用。
相对传统开发：不用从零写大量页面、接口、CRUD 基础代码；
 
区分：
  • 零代码：完全不写代码，纯配置，面向业务人员
  • 低代码：可视化为主，预留 JS、SQL、自定义接口、组件扩展入口，开发人员可介入，能力更强

二、核心标志性能力（对照你见过的产品）

  1. 可视化拖拽画布
     
    组件库（文本、按钮、表格、图表、表单、图片）直接拖到画布，调整位置、样式，就是你 BI 工具里的操作。
  2. 组件配置化
     
    选中组件，右侧面板配置标题、颜色、显示字段、点击事件，不用手写 CSS/HTML。
  3. 数据对接能力
     
    连接数据库、HTTP 接口、Excel，把数据绑定到页面组件（BI 看板绑定指标就是典型场景）。
  4. 内置通用能力
     
    分页、查询筛选、弹窗、导出、权限、导入、文件上传，平台已经封装好，直接勾选启用。
  5. 扩展入口
     
    支持嵌入自定义 JS 脚本、自定义 SQL、自定义组件，解决平台内置功能满足不了的个性化需求。

三、两大主流赛道（重点区分，你日常都会接触）

赛道 1：BI 可视化低代码（你现在搭建融资驾驶舱使用的）

代表产品：DataEase、FineBI、QuickBI、永洪 BI
 
✅ 目标：数据展示、分析看板、驾驶舱、报表
 
✅ 常用组件：指标卡、折线图、柱状图、饼图、表格、筛选器
 
✅ 数据流：数据源 → 数据集加工 → 拖拽图表 → 数据绑定 → 发布看板
 
❌ 短板：不擅长复杂表单、审批流程、业务单据管理
你截图里拖拉拽制作融资驾驶舱，就属于这一类。

赛道 2：通用业务低代码（管理系统、审批流程）

代表产品：Jeecg、明道云、宜搭、Mendix、简道云
 
✅ 目标：搭建 OA、项目管理、客户管理、台账系统、流程审批
 
✅ 常用组件：输入框、下拉选择、表单、流程节点、附件、角色权限
 
✅ 核心特色：表单引擎 + 流程引擎
 
❌ 短板：复杂大数据可视化图表能力一般

四、低代码 ≠ 什么？（避坑区分）

  1. ❌ Figma、墨刀（原型工具）不是低代码
     
    虽然也是拖拽，但是无法接入真实业务数据、不能生成可上线运行的系统，只用来画效果图。
  2. ❌ 单纯前端页面拖拽工具 ≠ 完整低代码
     
    真正低代码必须拥有数据层能力：存储、接口、权限。只有画布没有数据管理，只是页面编辑器。
  3. ❌ BI 平台 ≠ 通用低代码
     
    侧重点完全不同：BI 重数据可视化分析；通用低代码重业务录入、流程管理。

关键误区澄清

  1. 低代码 ≠ 零代码
  • 零代码：完全不写代码，纯配置；
  • 低代码：以拖拽配置为主，支持补充 JS 脚本、自定义组件、扩展代码；
     
    绝大多数 BI 平台都支持嵌入自定义脚本，属于低代码而非纯粹零代码。
  1. 拖拽画布 ≠ 全部都是低代码
     
    像 Figma、墨刀这类原型工具，虽然也是拖拽，但不能绑定真实业务数据、无法直接生成可运行业务应用，它们是原型设计工具，不属于低代码。
     
    👉 判断分界线：能否绑定数据源、产出可直接访问、对接后端接口的正式业务页面。
     
    你这个驾驶舱可以接入真实融资数据，满足这条，所以是低代码。

五、低代码优缺点

✅ 优势

  1. 交付速度快，常规看板、简单管理系统开发周期大幅缩短
  2. 上手门槛较低，业务人员、后端开发也能独立搭建页面
  3. 大量基础功能内置，不用重复造轮子（导出、筛选、权限）
  4. 修改便捷：页面调整直接在画布配置，不用前后端重新发布

⚠️ 劣势

  1. 高度定制场景受限，极端个性化交互、复杂算法很难实现
  2. 大规模高并发场景，平台自带底层框架性能不如原生手写项目
  3. 存在平台绑定风险，应用配置大多存储为平台私有 JSON，迁移成本高
  4. 复杂业务逻辑仍然需要开发人员编写脚本、自定义接口

六、后端开发视角（NestJS 开发视角）

很多企业落地模式：
  1. 标准看板、报表：直接 BI 低代码平台拖拉拽完成融资驾驶舱
  2. 复杂业务、特殊接口、权限、复杂计算：使用 NestJS 开发后端 API
  3. 低代码页面直接调用你写好的 Nest 接口，二者组合使用
典型架构：
 
NestJS（提供融资数据接口）→ BI 低代码平台 → 拖拽搭建驾驶舱页面 → 最终用户访问

七、一句话极简总结

低代码平台就是一套可视化开发工具，把页面组件、数据能力提前封装，通过拖拽配置快速出应用；
 
BI 类低代码，是低代码里专门用来做数据看板、图表分析的细分品类。

八、低代码开发操作

8.1、层级嵌套规则（低代码最核心痛点）

低代码画布分为容器组件和普通组件：
  • 容器：矩形、标签页、弹窗、分组、Tab、折叠面板（可以放子组件）
  • 普通组件：文本、按钮、图表（不能容纳子组件）

图层列表必须体现【缩进层级】

矩形(外层容器)
    ├─ 文本标题
    └─ 报表图表
另一个矩形
    └─ 按钮
  1. 容器支持展开 / 折叠箭头（▶/▼），子组件过多时收拢，减少列表滚动
  2. 拖拽排序两大模式
    • 同层级上下拖动：调整 z-index（画布上下层级，谁覆盖谁）
    • 拖入容器内：改变父子嵌套关系（重点！很多自研低代码这里交互很难用）
坑：很多平台图层拖拽只能改顺序，不能修改父子关系，用户只能在画布拖，复杂布局极易错乱。

Z 轴顺序映射关系

图层列表越靠下 = 画布层级越高（覆盖上方元素）
 
和 Figma 保持一致，用户学习成本最低：
 
列表从上到下：底层组件 → 上层组件。

8.2、图层操作能力清单（专业低代码必备）

  • 多选：按住 Ctrl 点击多个图层，批量删除、隐藏、锁定、复制
  • 上下层级快捷按钮：置顶 / 置底 / 上移一层 / 下移一层（列表上方快捷工具栏）
  • 编组 / 取消编组
     
    把多个组件打包成一个组，统一移动；组在图层里作为一个可折叠节点
  • 复制、剪切、粘贴，支持跨页面粘贴组件
  • 快速定位：点击图层项 → 画布自动选中对应组件；点击画布组件 → 图层列表自动滚动高亮对应条目（双向联动，重中之重）
  • 隔离模式：双击容器，只编辑容器内组件（可选，复杂页面刚需）

8.3、命名规范（工程协作层面，团队必须约定）

平台层面引导用户，同时产品做约束：
  1. 禁止大量 “未命名文本、未命名报表”；
  2. 推荐语义命名：filter_box（筛选容器）、table_order（订单表格）、title_total（汇总标题）
  3. 图层搜索、后期脚本绑定组件 ID、事件编码，全都依赖清晰命名。
很多低代码新手踩坑：组件全部默认名字，等要写自定义 JS 的时候，分不清谁是谁。

8.4、UI & 交互细节讲究（体验分水岭）

  1. 选中态高亮：当前选中图层清晰底色区分
  2. 隐藏 / 锁定状态视觉区分：灰色淡化条目
  3. 拖拽时展示放置指示器：
    • 一条横线：同级插入
    • 框缩进高亮：表示放入容器内部
  4. 列表高度支持滚动；组件数量几十上百条不能卡顿（虚拟滚动！组件量大一定要虚拟列表渲染）
  5. 右键菜单不要太长，高频操作前置：重命名、复制、显示 / 隐藏、锁定、删除、层级调整

8.5、和画布联动的关键逻辑（容易遗漏）

  1. 在图层隐藏组件：画布实时隐藏，但不删除；区别于删除组件
  2. 锁定组件：画布无法点击选中，但图层列表依然可以选中编辑属性
  3. 容器折叠，不会影响页面渲染，只控制图层列表视图（千万不要把图层折叠和页面显隐绑定）
  4. 支持快捷键：
    • Delete 删除选中图层
    • Ctrl+C/V 复制粘贴
    • Ctrl+F 唤起搜索
    • Ctrl+A 全选图层

 

 

 

 

 

 

posted @ 2026-07-28 11:22  吴飞ff  阅读(21)  评论(0)    收藏  举报