一、快速开始

Maven 依赖

根据您的 Java 版本选择对应的依赖:

<!-- Java 17 -->
<dependency>
    <groupId>io.github.ezadmin126</groupId>
    <artifactId>ezadmin-java17-spring-starter</artifactId>
    <version>3.0.7</version>
</dependency>

<!-- Java 8 -->
<dependency>
    <groupId>io.github.ezadmin126</groupId>
    <artifactId>ezadmin-java8-spring-starter</artifactId>
    <version>3.0.7</version>
</dependency>

启用配置

在 Spring Boot 主类上添加 @EnableEzadmin 注解:

@SpringBootApplication
@EnableEzadmin
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}
💡 提示

启动应用后,JSON 配置文件将自动生效,无需额外配置。

访问 ## http://localhost:{port}/topezadmin/edit/create- ## 即可开始AI生成列表表单。

application.yml 配置

application.yml 中配置 EzAdmin 相关参数:

topezadmin:
  # 缓存开关,开发时建议设为 false
  cacheFlag: false

  # 数据源配置(多个用逗号分隔)
  datasourceBeanNames: 'dataSource'

  # 文件上传配置
  uploadPath: /data/upload
  downloadUrl: /core/downloadDesc.html?fileId=
  uploadUrl: /system/upload.html

  # 日志配置
  logType: 1000-10000

  # 界面配置
  adminStyle: layui
  layout: fluid

  # 系统路由配置
  clearUrl: /topezadmin/clearCache.html
  signoutUrl: /login/signout.html
  indexUrl: /doc/index.html
  navUrl: /laynavs.html

  # AI 功能配置(可选)
  apiUrl: https://api.deepseek.com/v1/chat/completions
  apiKey: sk-xxxxxxxxxxxxxxxx
  model: deepseek-chat
  temperature: 0.8
 
配置项 说明 默认值
cacheFlag 是否开启配置文件缓存 true(生产环境)/ false(开发环境)
datasourceBeanNames 数据源 Bean 名称,多个用逗号分隔 dataSource
uploadPath 文件上传存储路径 -
logType 日志级别配置 1000-10000
adminStyle 管理界面风格 layui
layout 页面布局模式 fluid
apiUrl AI 服务接口地址 -
apiKey AI 服务 API 密钥 -
model AI 模型名称 deepseek-chat
temperature AI 生成随机性参数(0-1) 0.8

二、配置格式

JSON 配置文件存放路径:

列表配置结构

{
  "id": "列表ID",
  "name": "列表名称",
  "dataSource": "数据源Bean名称",
  "initApi": "自定义接口(可选)",
  "hideSearch": false,

  "body": {
    "emptyShow": "-",
    "showIndex": true,
    "selectable": true,
    "rowActionWidth": 175
  },

  "tabList": [],
  "search": [{"row": []},{"row": []}],
  "column": [],
  "tableButton": [],
  "rowButton": [],

  "express": {
    "main": "查询SQL表达式",
    "orderBy": "order by xxx",
    "groupBy": "group by xxx",
    "count": "自定义count语句"
  }
}

表单配置结构

{
  "id": "表单ID",
  "name": "表单名称",
  "dataSource": "数据源Bean名称",
  "successUrl": "保存成功后跳转URL",

  "cardList": [{
    "type": "card",
    "label": "卡片标题",
    "fieldList": [{"row": []},{"row": []}],
    "buttonList": []
  }],

  "buttonList": [],
  "initExpress": [],
  "submitExpress": [],
  "deleteExpress": [],
  "statusExpress": []
}

三、组件配置

基本结构

{
  "item_name": "字段名(大写)",
  "label": "显示名称",
  "component": "组件类型",
  "alias": "SQL别名(可选)",
  "jdbcType": "数据类型(可选)",
  "operator": "操作符(可选)",

  "initData": {
    "dataJson": [{"label":"选项1","value":"1"}],
    "dataSql": "SELECT value,label FROM table",
    "dataSource": "数据源名称"
  },

  "props": {
    // Layui 原生属性或自定义属性
  }
}

props 通用属性

所有组件的 props 都支持以下通用属性:

属性 类型 说明 示例
placeholder String 输入提示文本 "请输入..."
lay-verify String Layui 验证规则 "required", "phone", "email"
required Boolean 是否必填(显示红色*) true / false
disabled Boolean 是否禁用 true / false
readonly Boolean 是否只读 true / false
description String 字段说明文本(显示在输入框下方) "请输入真实姓名"
validate Object jQuery Validate 验证规则(见下方详细说明) 见下方示例

jQuery Validate 验证配置

通过 props.validate 可以配置更复杂的表单验证规则:

{
  "props": {
    "validate": {
      "rule": {
        "required": true,
        "minlength": 2,
        "maxlength": 20,
        "range": [0, 100],
        "email": true,
        "url": true,
        "number": true,
        "digits": true
      },
      "message": {
        "required": "此字段不能为空",
        "minlength": "至少输入2个字符",
        "maxlength": "最多输入20个字符",
        "range": "请输入0-100之间的数字",
        "email": "请输入有效的邮箱地址",
        "url": "请输入有效的URL",
        "number": "请输入数字",
        "digits": "请输入整数"
      }
    }
  }
}

常用验证规则:

💡 验证规则优先级

1. lay-verify 用于 Layui 原生验证(提交时验证)
2. validate 用于 jQuery Validate 验证(实时验证,功能更强大)
3. 两者可以同时使用,建议复杂验证使用 validate

组件类型

点击组件名称可查看详细文档 (展开/收起)

📝 输入组件

input 单行文本输入框

使用场景:姓名、账号、标题等单行文本输入

基本配置示例:

{
  "item_name": "NAME",
  "label": "姓名",
  "component": "input",
  "props": {
    "placeholder": "请输入姓名",
    "lay-verify": "required",
    "maxlength": 20
  }
}

带 validate 验证的示例:

{
  "item_name": "AGE",
  "label": "年龄",
  "component": "input",
  "props": {
    "placeholder": "请输入年龄",
    "type": "number",
    "validate": {
      "rule": {
        "required": true,
        "range": [0, 150],
        "digits": true
      },
      "message": {
        "required": "年龄不能为空",
        "range": "请输入0-150之间的数字",
        "digits": "请输入整数"
      }
    }
  }
}

支持的 HTML5 type 属性:

  • text(默认):普通文本
  • number:数字输入
  • email:邮箱输入
  • tel:电话号码
  • url:URL地址
  • password:密码输入

常用 props 属性:

  • placeholder:提示文本
  • maxlength:最大长度
  • lay-verify:Layui验证规则(required/phone/email等)
  • validate:jQuery Validate验证(更强大)
  • disabled:禁用状态
  • readonly:只读状态
textarea 多行文本域

使用场景:备注、描述、内容等多行文本输入

配置示例:

{
  "item_name": "REMARK",
  "label": "备注",
  "component": "textarea",
  "props": {
    "placeholder": "请输入备注",
    "rows": 5
  }
}

支持属性:placeholder, rows, maxlength, disabled, readonly

hidden 隐藏域

使用场景:ID、状态标识等隐藏字段

配置示例:

{
  "item_name": "ID",
  "label": "ID",
  "component": "hidden",
}

注意:classAppend 设为 layui-col-md0,不占用页面空间

tinymce 富文本编辑器

使用场景:文章内容、产品详情等富文本编辑

配置示例:

{
  "item_name": "CONTENT",
  "label": "内容",
  "component": "tinymce",
  "props": {
    "height": 400
  }
}

功能:支持图片上传、表格、链接等富文本功能

🎯 选择组件

select 下拉选择框

使用场景:状态选择、分类选择等单选场景

配置示例:

{
  "item_name": "STATUS",
  "label": "状态",
  "component": "select",
  "initData": {
    "dataJson": [
      {"label": "启用", "value": "1"},
      {"label": "禁用", "value": "0"}
    ]
  },
  "props": {
    "lay-verify": "required",
    "placeholder": "请选择状态"
  }
}

数据源:支持 dataJson(静态)和 dataSql(动态查询)

注意:SQL 查询必须使用 value 和 label 别名

select-multiple 多选下拉框

使用场景:多标签、多权限、多分类选择

配置示例:

{
  "item_name": "TAGS",
  "label": "标签",
  "component": "select-multiple",
  "operator": "in",
  "initData": {
    "dataSource": "dataSource",
    "dataSql": "SELECT id value, name label FROM tags"
  }
}

第三方插件:基于 xm-select 实现

存储格式:逗号分隔的值,如 "1,2,3"

cascader 级联选择器

使用场景:省市区、部门层级、类目层级

配置示例:

{
  "item_name": "REGION_ID",
  "label": "地区",
  "component": "cascader",
  "initData": {
    "dataJson": [
      {
        "label": "北京市",
        "value": "110000",
        "children": [
          {"label": "东城区", "value": "110101"}
        ]
      }
    ]
  }
}

第三方插件:基于 lay-cascader 实现

radio 单选框

使用场景:性别、是否、状态等简单选项

配置示例:

{
  "item_name": "GENDER",
  "label": "性别",
  "component": "radio",
  "initData": {
    "dataJson": [
      {"label": "男", "value": "1"},
      {"label": "女", "value": "2"}
    ]
  }
}
checkbox 复选框

使用场景:多项选择、权限勾选

配置示例:

{
  "item_name": "HOBBIES",
  "label": "爱好",
  "component": "checkbox",
  "initData": {
    "dataJson": [
      {"label": "阅读", "value": "1"},
      {"label": "运动", "value": "2"},
      {"label": "旅游", "value": "3"}
    ]
  }
}

存储格式:逗号分隔的值

🔧 其他组件

date 日期时间选择器

使用场景:日期、时间、日期范围选择

配置示例:

{
  "item_name": "CREATE_TIME",
  "label": "创建时间",
  "component": "date",
  "props": {
    "type": "datetime",
    "format": "yyyy-MM-dd HH:mm:ss"
  }
}

type 选项:year, month, date, time, datetime

upload 文件上传

使用场景:图片、文件、附件上传

基本配置示例:

{
  "item_name": "AVATAR",
  "label": "头像",
  "component": "upload",
  "props": {
    "accept": "images",
    "multiple": false,
    "size": 2048,
    "description": "支持jpg、png格式,大小不超过2MB"
  }
}

props 属性:

属性 说明 示例
accept 文件类型:images/file/video/audio "images"
acceptMime 自定义MIME类型 "image/jpg,image/png"
multiple 是否允许多文件上传 true / false
number 最大上传数量(界面限制) 5
size 单个文件大小限制(KB) 10240 (10MB)

上传数量验证(使用 validate):

{
  "item_name": "PRODUCT_IMAGES",
  "label": "产品图片",
  "component": "upload",
  "props": {
    "accept": "images",
    "multiple": true,
    "validate": {
      "rule": {
        "uploadMin": 1,
        "uploadMax": 10
      },
      "message": {
        "uploadMin": "至少上传1张图片",
        "uploadMax": "最多上传10张图片"
      }
    }
  }
}

数据格式:

  • 单文件:"/upload/2024/01/01/abc.jpg"
  • 多文件:"/upload/abc.jpg,/upload/def.jpg"(逗号分隔)

注意事项:

  • number 属性:界面层面的数量限制
  • uploadMin/uploadMax:表单提交时的数量验证
  • size 单位为 KB,1MB = 1024KB
  • 数据库字段建议:单文件 VARCHAR(255),多文件 TEXT

🔘 按钮组件

button-normal 行操作按钮

位置:列表行操作列(rowButton)

配置示例:

{
  "item_name": "EDIT",
  "label": "编辑",
  "component": "button-normal",
  "props": {
    "opentype": "MODAL",
    "windowname": "编辑用户",
    "url": "/topezadmin/form/page-user-form?id={{=d.ID}}",
    "area": ["60%", "80%"]
  }
}

opentype:MODAL, AJAX, CONFIRM_AJAX, _BLANK 等

button-toolbar 工具栏按钮

位置:列表表头工具栏(tableButton)

配置示例:

{
  "item_name": "ADD",
  "label": "新增",
  "component": "button-toolbar",
  "props": {
    "opentype": "MODAL",
    "windowname": "新增用户",
    "url": "/topezadmin/form/page-user-form",
    "area": ["60%", "80%"]
  }
}
button-dropdown / button-bread / button-span 其他按钮类型

button-dropdown:下拉菜单项

button-bread:面包屑链接

button-span:文本按钮

📊 表格展示组件

tdText / tdLink 文本和链接展示

tdText:普通文本展示

tdLink:带链接的文本展示

tdPic 图片展示

使用场景:列表中展示缩略图

功能:自动生成缩略图,点击可预览大图

tdSelect / tdSelectMultiple / tdCascader 选择值展示

tdSelect:将 value 转换为 label 展示(单选)

tdSelectMultiple:将多个 value 转换为 label 展示(多选)

tdCascader:级联选择的值展示

配置示例:

{
  "item_name": "STATUS",
  "label": "状态",
  "component": "tdSelect",
  "initData": {
    "dataJson": [
      {"label": "启用", "value": "1"},
      {"label": "禁用", "value": "0"}
    ]
  }
}

按钮 opentype 属性

说明 适用场景
MODAL 模态框 表单编辑、详情查看
FORM 全屏表单 复杂表单编辑
FULL 全屏窗口 需要更大空间的页面
_BLANK 新窗口 打开外部链接
LOCATION 当前页跳转 页面跳转
PARENT 父窗口 关闭当前窗口并刷新父窗口
AJAX Ajax 请求 后端操作(不打开页面)
CONFIRM_AJAX 确认后 Ajax 需要确认的删除等操作
CONFIRM_MODEL 确认后打开模态框 需要确认的编辑操作

四、表达式系统

内置函数

函数 说明
select(sql) 查询多条数据
selectOne(sql) 查询单条数据
search(sql) 带搜索条件的查询(自动拼接条件)
count(sql) 查询总数
insert(sql) 插入数据(SQL 方式)
insertSimple(param) 插入数据(参数对象方式)
update(sql) 更新数据(SQL 方式)
updateSimple(param) 更新数据(参数对象方式)
$("param") 获取请求参数
$$("session") 获取 session 参数
isNotBlank(param) 判断参数是否非空
isBlank(param) 判断参数是否为空

表达式示例

列表查询:

StringBuilder sql = new StringBuilder();
sql.append("SELECT ID, NAME, STATUS FROM users WHERE delete_flag=0");
return search(sql); // 系统会自动拼接搜索条件

表单保存:

if(!isNotBlank("ID")) {
    // 新增
    param = new InsertParam();
    param.table("users");
    param.add("#{NAME}");
    param.add("#{STATUS}");
    param.add("#{CREATE_TIME,value=NOW()}");
    return insertSimple(param);
} else {
    // 更新
    param = new UpdateParam();
    param.table("users");
    param.add("#{NAME}");
    param.add("#{STATUS}");
    param.where("id=#{ID}");
    return updateSimple(param);
}

五、完整示例

最小列表配置

{
  "id": "user-list",
  "name": "用户列表",
  "dataSource": "dataSource",

  "body": {
    "showIndex": true,
    "selectable": true
  },

  "search": [

             {"row": [{
    "item_name": "NAME",
    "label": "姓名",
    "component": "input",
    "operator": "like"
  }, {
    "item_name": "STATUS",
    "label": "状态",
    "component": "select",
    "operator": "eq",
    "initData": {
      "dataJson": [
        {"label": "启用", "value": "1"},
        {"label": "禁用", "value": "0"}
      ]
    }
  }]}
                ],

  "column": [{
    "item_name": "ID",
    "label": "ID",
    "props": {"width": 80}
  }, {
    "item_name": "NAME",
    "label": "姓名"
  }, {
    "item_name": "STATUS",
    "label": "状态",
    "component": "tdSelect",
    "initData": {
      "dataJson": [
        {"label": "启用", "value": "1"},
        {"label": "禁用", "value": "0"}
      ]
    }
  }],

  "tableButton": [{
    "item_name": "add",
    "label": "新增",
    "component": "button-toolbar",
    "props": {
      "opentype": "MODAL",
      "windowname": "新增用户",
      "url": "/topezadmin/form/page-user-form",
      "area": ["60%", "80%"]
    }
  }],

  "rowButton": [{
    "item_name": "edit",
    "label": "编辑",
    "component": "button-normal",
    "props": {
      "opentype": "MODAL",
      "windowname": "编辑用户",
      "url": "/topezadmin/form/page-user-form?id={{=d.ID}}",
      "area": ["60%", "80%"]
    }
  }, {
    "item_name": "delete",
    "label": "删除",
    "component": "button-normal",
    "props": {
      "opentype": "CONFIRM_AJAX",
      "url": "/topezadmin/form/delete-user-form?id={{=d.ID}}"
    }
  }],

  "express": {
    "main": "return search('SELECT ID, NAME, STATUS FROM users WHERE 1=1')",
    "orderBy": "ORDER BY ID DESC"
  }
}

最小表单配置

{
  "id": "user-form",
  "name": "用户表单",
  "dataSource": "dataSource",

  "cardList": [{
    "type": "card",
    "label": "基本信息",
    "fieldList": [
           {"row": [{
      "item_name": "ID",
      "label": "ID",
      "component": "hidden",
    }, {
      "item_name": "NAME",
      "label": "姓名",
      "component": "input",
      "props": {
        "placeholder": "请输入姓名",
        "lay-verify": "required",
        "validate": {
          "rule": {"required": true, "minlength": 2},
          "message": {
            "required": "姓名不能为空",
            "minlength": "姓名至少2个字符"
          }
        }
      }
    }, {
      "item_name": "STATUS",
      "label": "状态",
      "component": "select",
      "initData": {
        "dataJson": [
          {"label": "启用", "value": "1"},
          {"label": "禁用", "value": "0"}
        ]
      },
      "props": {
        "lay-verify": "required"
      }
    }]
  }]}

                ],

  "initExpress": [
    "return selectOne('SELECT ID, NAME, STATUS FROM users WHERE id=${ID}')"
  ],

  "submitExpress": [
    "if(!isNotBlank('ID')) {",
    "  param = new InsertParam();",
    "  param.table('users');",
    "  param.add('#{NAME}');",
    "  param.add('#{STATUS}');",
    "  param.add('#{CREATE_TIME,value=NOW()}');",
    "  return insertSimple(param);",
    "} else {",
    "  param = new UpdateParam();",
    "  param.table('users');",
    "  param.add('#{NAME}');",
    "  param.add('#{STATUS}');",
    "  param.add('#{UPDATE_TIME,value=NOW()}');",
    "  param.where('ID=#{ID}');",
    "  return updateSimple(param);",
    "}"
  ],

  "deleteExpress": [
    "return update('UPDATE users SET delete_flag=1 WHERE ID=#{ID}')"
  ]
}

六、路由规则

URL 说明
/topezadmin/list/page-{id} 列表页面
/topezadmin/list/data-{id} 列表数据接口
/topezadmin/form/page-{id} 表单页面
/topezadmin/form/data-{id} 表单初始化数据接口
/topezadmin/form/submit|delete|status-{id} 表单提交删除状态更新接口
/topezadmin/edit/create- AI新增列表表单+拖拽
/topezadmin/edit/list-{id} | /topezadmin/edit/form-{id} AI修改列表表单+拖拽
/topezadmin/dsl/list-{id} | /topezadmin/dsl/form-{id} 源码编辑

七、注意事项

🎯 最佳实践

1. 使用大写字段名保持统一性
2. 合理使用表达式避免复杂 SQL
3. 善用组件的 props 属性进行定制
4. 利用 AI 提示词快速生成配置文件

八、AI开发流程说明

访问地址:/topezadmin/edit/create- 🎯 新增

1. 解析用户请求,是否包含SQL
2. 如果包含SQL,则解析SQL,生成DSL
3. 如果不包含SQL,则将所有库表名称发送给大模型,让其分析哪些是相关库表
4. 获取相关库表的库表字段信息,生成 DSL

🎯 修改

1. 将当前所有DSL信息、发送给大模型,分析哪些需要修改
2. 如果涉及到express,则将库表全部发给大模型
3. 如果不涉及express,则让大模型告知哪些节点需要怎样修改
4. 做dsl patch操作,保存修改后的DSL