别再手动写CRUD了！用JeecgBoot的Online表单，5分钟搞定一个带复杂控件的管理页面
5分钟极速开发：用JeecgBoot的Online表单打造复杂业务管理系统
每次接到新需求，你是否还在重复着建表、写CRUD、调试表单的枯燥流程？当产品经理提出"这个下拉框要联动另一个弹窗选择的数据"时，是否已经预见到今晚又要加班？今天，我要分享一个能让你准时下班的秘密武器——JeecgBoot的Online表单功能。
作为一款基于代码生成器的低代码开发平台，JeecgBoot最强大的特性就是它的Online表单模块。不同于传统代码生成器只能产出基础增删改查页面，它支持通过可视化配置生成包含下拉联动、弹窗选择、分类字典树等复杂控件的完整业务表单。更惊人的是，从数据库设计到前端页面生成，整个过程可能只需要你喝杯咖啡的时间。
1. Online表单开发环境准备
1.1 JeecgBoot基础环境搭建
在开始使用Online表单前，我们需要确保开发环境正确配置。JeecgBoot支持多种部署方式，这里推荐使用Docker快速启动开发环境：
# 拉取官方镜像 docker pull jeecgboot/jeecg-boot:latest # 启动容器（映射前端3000端口和后端8080端口） docker run -p 3000:3000 -p 8080:8080 --name jeecg-boot -d jeecgboot/jeecg-boot启动后访问http://localhost:3000即可进入系统。首次登录使用默认账号admin/123456，建议立即修改密码。
提示：生产环境请务必配置MySQL数据库和Redis缓存，单机模式仅适合开发测试
1.2 了解Online表单的核心概念
JeecgBoot的Online表单开发围绕几个关键元素展开：
| 概念 | 作用描述 | 配置位置 |
|---|---|---|
| 表字段配置 | 定义数据库字段及基础属性 | Online表单开发 > 表设计 |
| 控件类型 | 决定字段在前端的表现形式 | 字段的"页面属性"配置 |
| 数据字典 | 为下拉框等控件提供静态选项数据 | 系统管理 > 数据字典 |
| Online报表 | 作为弹窗选择控件的数据源 | Online报表配置 |
| 分类字典 | 树形结构数据的专用存储 | 系统管理 > 分类字典 |
| 联动配置 | 定义字段间的动态联动关系 | 字段校验配置中的JSON |
2. 从零构建任务管理系统表单
2.1 创建基础表结构
假设我们要开发一个任务管理系统，首先需要创建主表md_test_task：
- 进入"Online表单开发"菜单，点击"新增"按钮
- 填写表基本信息：
- 表名：md_test_task
- 表描述：任务测试表
- 表类型：单表（无关联表时选择）
- 添加字段配置（关键字段示例）：
| 字段名 | 类型 | 长度 | 必填 | 页面控件 | 描述 | |---------------|---------|------|------|------------|--------------| | task_name | varchar | 64 | 是 | 输入框 | 任务名称 | | md_type | varchar | 32 | 是 | 下拉框 | 项目类型 | | md_company | varchar | 64 | 否 | Popup弹窗 | 委托单位 | | md_factor | varchar | 32 | 否 | 分类字典树 | 调整因子 | | md_benchmark | varchar | 64 | 否 | 联动选择框 | 基准数据 | | start_time | datetime| - | 是 | 日期选择器 | 开始时间 |配置完成后点击"数据库同步"按钮，系统会自动创建物理表。
2.2 配置复杂表单控件
2.2.1 下拉框控件（数据字典方式）
对于"项目类型"这样的固定选项字段，使用数据字典最为便捷：
- 进入"系统管理 > 数据字典"，新增字典项：
- 字典名称：project_type
- 字典编码：projectype
- 添加字典内容：
1 : 金融 2 : 电信 3 : 能源 4 : 政务 5 : 交通 6 : 其他 - 返回Online表单，配置md_type字段：
- 控件类型：下拉框
- 字典Code：projectype（对应字典编码）
2.2.2 Popup弹窗选择控件
当需要从其他表选择数据时（如选择委托单位），Popup控件是理想选择：
- 先创建委托单位表
test_company（过程同上） - 进入"Online报表配置"，创建单位列表报表
- 配置md_company字段：
- 控件类型：Popup
- 字典Table：test_company（关联表名）
- 字典code：id（存储值字段）
- 字典Text：company_name（显示文本字段）
2.2.3 分类字典树控件
对于树形结构数据（如调整因子），使用分类字典：
- 进入"系统管理 > 分类字典"，新增分类：
- 分类名称：调整因子
- 分类编码：B03
- 添加子分类（如：市场因素、技术因素等）
- 配置md_factor字段：
- 控件类型：分类字典树
- 字典Code：B03（对应分类编码）
2.2.4 数据联动控件
实现字段间联动（如选择年份后动态加载对应基准数据）：
- 创建联动数据表
test_link，包含字段：id, pid, name, md_year等 - 配置md_benchmark字段的校验规则：
{ "table": "test_link", "txt": "name", "key": "id", "linkField": "md_year,md_details", "idField": "id", "pidField": "pid", "condition": "pid = '1'" }3. 高级功能配置技巧
3.1 自定义按钮与JS增强
除了自动生成的CRUD按钮，我们还可以添加自定义功能：
- 在Online表单开发界面，选择"自定义按钮"选项卡
- 配置示例：
- 按钮编码：export_excel
- 按钮名称：导出Excel
- 按钮样式：button（显示在工具栏）
- 动作类型：js
- 在JS增强中编写对应函数：
function export_excel() { // 获取当前查询参数 let params = this.$refs.crud.getQueryParams(); // 调用导出API this.$http.download('/api/export/task', params); }3.2 表单校验与业务规则
JeecgBoot支持多种校验方式：
- 基础校验：直接在字段配置中设置（必填、长度限制等）
- 正则校验：通过"校验规则"配置复杂格式验证
- 自定义校验：在JS增强中实现
validateForm方法
function validateForm() { if(this.model.start_time > this.model.end_time) { this.$message.error("结束时间不能早于开始时间"); return false; } return true; }4. 生成代码与菜单配置
4.1 一键生成前后端代码
当表单测试无误后，可以生成完整代码：
- 在Online表单列表，点击"代码生成"按钮
- 选择生成路径（建议使用默认位置）
- 系统会生成：
- 后端：Controller、Service、Mapper、Entity
- 前端：Vue页面、API配置
- SQL：初始化数据脚本
注意：生成代码后需要重启服务使新菜单生效
4.2 菜单配置与权限管理
- 进入"系统管理 > 菜单管理"
- 添加新菜单：
- 菜单名称：任务管理
- 组件路径：/modules/mdtestask/TaskList
- 权限标识：md:test:task
- 在"角色管理"中为相应用户分配权限
实际项目中，我们使用这套方案将原本需要3天开发的供应商管理系统缩短到2小时完成。特别是当需求变更时，只需调整Online表单配置并重新生成代码，省去了大量手动修改的时间。