03-三种开发模式：零代码、低代码、可视化
browise 支持三种开发模式------零代码（CommonQuery）、低代码（MetaGrid+BaseEntity）、可视化（FormEditor拖拽）。关键不是有三种模式，是三种模式共享同一套 _t/_o 数据协议，从一种切换到另一种不需要重写数据层。这篇讲清楚每种模式的边界和共用机制。
文章目录
- 03-三种开发模式：零代码、低代码、可视化
-
- 一、为什么要有三种模式
- [二、模式一：零代码 CommonQuery](#二、模式一：零代码 CommonQuery)
- [三、模式二：低代码 MetaGrid + BaseEntity](#三、模式二：低代码 MetaGrid + BaseEntity)
- [四、模式三：可视化 FormEditor](#四、模式三：可视化 FormEditor)
- 五、三种模式共用什么
一、为什么要有三种模式
政务项目的现实：80%的页面是"查询条件+结果列表+增删改查"，15%是标准表单加少量脚本，5%是复杂交互。
三种模式对应这个分布：
| 模式 | 覆盖 | 产出物 | 写代码量 |
|---|---|---|---|
| 零代码 | 80%标准查询页 | 一条元数据配置 + 一行Vue标签 | ~0 |
| 低代码 | 15%业务页 | 实体类 + MetaGrid配置 | 少量 |
| 可视化 | 5%复杂表单 | 设计器画布 + 自动生成脚本 | 脚本级 |
二、模式一：零代码 CommonQuery
browise-vue/src/components/common/CommonQuery.vue（10.8KB）。
用法只有一行：
vue
<CommonQuery :sqlId="'SYS_USER_s'" />它内部自动完成四步：
① httpClient.describe(sqlId)
→ GET /ea/describe/SYS_USER_s
→ 返回字段元数据数组
[
{ name:"psn_id", label:"人员编号", dataType:1, displayType:"TextBox", required:true },
{ name:"psn_name",label:"姓名", dataType:1, displayType:"TextBox" },
{ name:"psn_sex", label:"性别", dataType:1, displayType:"ComboBox",
codeName:"SEX" },
{ name:"birth", label:"出生日期", dataType:2, displayType:"DateBox" }
]
② 按元数据渲染查询条件表单
→ 哪些字段是查询条件（EA05里定义的）自动变成输入框/下拉/日期
③ 按元数据渲染结果列表列
→ label做表头、codeName自动翻译码值、dataType决定对齐
④ 分页/导出
→ POST /ea/page/{sqlId} 服务端分页
→ doExport对接 /api/export/excel开发一个新查询页的全部工作 = 在 EA01-EA05 表里配一条 SQL 元数据。 字段要改显示名，改 EA03 的 label；要加查询条件，在 EA05 加一行------不碰任何代码。
describe() 返回的元数据从哪来？EA引擎在启动时用 MetadataLoader 把 EA01-05 五张表全量加载进 EaMetadataCache（ConcurrentHashMap），describe 只是查缓存拼 JSON。
三、模式二：低代码 MetaGrid + BaseEntity
当页面需要定制（主从联动、行内编辑、操作列按钮）时，退出零代码模式，用 MetaGrid：
vue
<MetaGrid
pageUrl="/user/page"
:columns="[
{ field: 'psnName', title: '姓名' },
{ field: 'psnSex', title: '性别', formatter: 'SEX' },
]"
:exportOptions="['server','client','checked']">
<template #operations="{ row }">
<Button @click="edit(row)">编辑</Button>
</template>
</MetaGrid>MetaGrid（browise-vue/src/components/grid/MetaGrid.vue，16.5KB）支持三种数据模式：
| 模式 | 数据来源 | 适用 |
|---|---|---|
| server paging | pageUrl 服务端分页 | 大数据量列表 |
| store | 绑定useCenter的StoreState | 主从联动/编辑提交 |
| manual | 手动灌rows | 一次性展示 |
后端配 BaseEntity（browise-data/.../BaseEntity.java，11.5KB）：
java
@TableName("SYS_USER")
public class SysUser extends BaseEntity {
private String psnName;
// getter/setter
}
// 保存------脏标记自动分发
SysUser user = new SysUser();
user.setPsnName("张三");
user.save(); // 内部按_t分发到MyBatis Mapper的insert/update/deleteBaseEntity 内部反射追踪字段变更------和前端 Row._t/_o 同一套脏标记逻辑，只是载体从 Map 变成了实体字段。
四、模式三：可视化 FormEditor
browise-vue/src/components/editor/formdesigner/ 目录11个文件，核心是 useFormEditor.ts（42.9KB，前端最大文件）------设计器的完整状态机。
能力清单：
控件面板（ControlPalette）
→ 18种控件拖拽到栅格画布（GridCanvas 25.0KB）
→ 容器嵌套（TabContainer/FieldSet/Panel）
→ 属性面板（PropertyPanel 17.0KB，20+属性+事件Tab）
→ Monaco脚本编辑（ScriptEditor，单击/双击/回车/变化四类事件）
→ 实时预览（FormRuntime运行时渲染）
→ 保存：控件树+属性存T_EL，字段配置存T_EL_CLOUMN设计器的产物存两张表（formbuilder模块的 FormElementService 负责 deleteAll+insert 整体重建保存）：
T_EL------ 元素树（每个控件一行，含容器层级）T_EL_CLOUMN------ 字段级配置（绑定哪个EA字段、校验、事件）
运行时 FormRuntime.vue 递归渲染 T_EL 元素树------设计器画的页面和手写的Vue组件走同一条渲染路径。
设计器的需求来源 是 formEdit设计器功能详解.md（567行）------那是 wiserise 时代 Dojo/JSP 表单设计器的完整交互文档，browise 把它当需求说明书逐条重做。
五、三种模式共用什么
关键架构点：三种模式共享 _t/_o 协议和 EA 元数据，切换模式不动数据层。
┌─ 零代码 CommonQuery ─┐
EA元数据(五表) ────→ ├─ 低代码 MetaGrid ├────→ useRowSet(_t/_o)
└─ 可视化 FormEditor ──┘ │
▼
commonSave / BaseEntity.save
│
▼
Oracle一个页面从 CommonQuery 起步，后来需要定制------把 sqlId 传给 MetaGrid 的 store 模式，查询逻辑不变；再后来要复杂表单------FormEditor 画完界面，字段还是绑同一个 EA 字段。渐进升级而不是重写，这是三种模式存在的真正意义。
✅ 亮点：以"80/15/5"的页面分布引出三种模式的定位，讲清三种模式共享 _t/_o 协议和EA元数据------渐进升级不重写数据层。适合评估低代码平台覆盖率的架构师。扩展方向：第48篇拆CommonQuery实现、第49篇拆useFormEditor状态机。