一、快速开始
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 配置文件存放路径:
- 列表配置:
topezadmin/config/layui/dsl/list/*.json - 表单配置:
topezadmin/config/layui/dsl/form/*.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": "请输入整数"
}
}
}
}
常用验证规则:
required: 必填验证email: 邮箱格式url: URL格式number: 数字digits: 整数minlength/maxlength: 长度限制min/max: 数值范围range: 数值范围(数组形式)uploadMin/uploadMax: 上传文件数量限制(仅 upload 组件)
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} |
源码编辑 |
七、注意事项
- 字段命名规范:
item_name必须大写,且与数据库字段名保持一致 - 数据格式:
initData支持dataJson(静态)和dataSql(动态)两种方式 - 模板语法:支持 laytpl 模板语法,如
{{=d.field}} - 属性兼容:
props支持所有 Layui 原生属性及第三方插件属性 - 表达式引擎:基于 QLExpress,支持 Java 语法和 SQL 拼接
- 多数据源:默认使用配置的
dataSource,可在initData中指定其他数据源 - 验证规则:支持 jQuery Validate 的所有验证规则
1. 使用大写字段名保持统一性
2. 合理使用表达式避免复杂 SQL
3. 善用组件的 props 属性进行定制
4. 利用 AI 提示词快速生成配置文件
八、AI开发流程说明
1. 解析用户请求,是否包含SQL
2. 如果包含SQL,则解析SQL,生成DSL
3. 如果不包含SQL,则将所有库表名称发送给大模型,让其分析哪些是相关库表
4. 获取相关库表的库表字段信息,生成 DSL
1. 将当前所有DSL信息、发送给大模型,分析哪些需要修改
2. 如果涉及到express,则将库表全部发给大模型
3. 如果不涉及express,则让大模型告知哪些节点需要怎样修改
4. 做dsl patch操作,保存修改后的DSL