JeecgBoot - 免费开源AI低代码开发平台使用详解2（Online表单、代码生成器）

作者：hangge | 2026-06-18 08:46

JeecgBoot 核心价值在于零代码快速搭功能、低代码高效开发。而低代码核心便是代码生成器，代码生成器可以针对复杂业务场景，可基于数据库表一键生成全套前后端代码，包含 Java 后端（Controller、Service、Mapper、Entity）、Vue3 前端页面、建表 SQL、菜单权限 SQL，生成即可直接运行，支持二次开发。下面我将通过样例进行演示。

二、Online 表单、代码生成器使用详解

1，代码生成配置

（1）为了能让代码生成到对应的前后端项目上，我们需要配置前后端项目路径，打开如下配置文件：

jeecg-module-system/jeecg-system-start/src/main/resources/jeecg/jeecg_config.properties

（2）然后根据实际情况配置如下三个参数：

提示：自 v3.8.3 起，前端代码可直接生成到前端项目（需配置 ui_project_path），无需手动迁移。菜单 SQL 也会自动生成到 start 项目的 flyway 目录。

# 生成到后端 Java 项目的模块路径
project_path=E:\\Git\\JeecgBoot\\jeecg-boot\\jeecg-boot-module\\jeecg-module-demo
# 生成到前端 VUE3 项目路径
ui_project_path=E:\\Git\\\JeecgBoot\\jeecgboot-vue3
# 业务包路径
bussi_package=org.jeecg.modules.demo

2，在线建表

（1）进入菜单“低代码开发”->“Online 表单开发”，然后点击“新增”按钮。

（2）这里我想创建一个交易订单的表单，我们填写需要创建的数据库表名、表描述、字段信息。

（3）然后切换到“页面属性”选项卡，在里面配置哪些字段需要在前端表单、表格中显示，以及使用的控件类型。然后点击“保存”。

（4）回到在线表单页面，点击刚创建的表条目右侧的“更多”按钮，然后选择“同步数据库”。

（5）这样便会自动在数据库生成对应的表结构。

3，自动生成代码

（1）在 Online 表单页面，选择需要生成的表单，点击上方“代码生成”按钮，进入代码生成界面。

（2）在弹出框中根据情况对里面配置进行调整后，点击“开始生成”按钮。

前端页面代码有两种形式可以选择：

封装表单（BasicForm）：vue3 表单数据和查询数据均在 *.data.ts 页面，均以 json 的格式进行填写
原生表单（a-form)：以 Ant Design Vue 原生写法实现，更加灵活

（3）可以看到相关的代码已经生成到前后端对应的目录下了。

4，执行菜单 SQL

（1）从上面生成代码后的结构信息可以看到，除了会自动创建前后端的代码文件外，还自动生成菜单以及权限的 SQL 到 start 项目的 flyway 目录。我们可以手动使用数据库工具执行这些 SQL。

（2）如果我们使用的是 MySQL 数据，我们也可以借助 start 项目集成的 flyway 来自动执行升级 SQL。具体步骤如下：

首先打开核心配置文件 `jeecg-module-system/jeecg-system-start/src/main/resources/application-dev.yml`，将 flyway 的 enabled 节点设置为 true，启用 flyway 功能。

spring:
  #  main:
  #    # 启动加速 (建议开发环境，开启后flyway自动升级失效)
  #    lazy-initialization: true
  flyway:
    # 是否启用flyway
    enabled: true
    # 迁移sql脚本存放路径
    locations: classpath:flyway/sql/mysql
    # 是否关闭要清除已有库下的表功能,生产环境必须为true,否则会删库，非常重要！！！
    clean-disabled: true