9.5 KiB
9.5 KiB
10.3 Web 管理界面
:::tip 概述 代码生成器提供 Web 管理界面,通过可视化操作完成代码生成,无需命令行。支持表选择、配置生成选项、预览代码和一键生成。界面位于「工具管理 → 代码生成」菜单。 :::
操作流程
1. 登录管理后台
2. 进入「工具管理 → 代码生成」菜单
3. 查看可生成的数据库表列表(自动读取当前数据库的所有表)
4. 选择目标表,点击「配置」
5. 配置生成选项(模块名、功能名、作者等)
6. 点击「预览」查看生成代码(不写入文件,可安全查看)
7. 确认无误后点击「生成」创建文件
8. 在 route/app.php 中添加路由(通常已自动生成)
9. 在菜单管理中配置菜单权限
10. 刷新前端页面,新模块即可使用
界面说明
表列表页
进入「工具管理 → 代码生成」后,首先进入表列表页:
| 列 | 说明 |
|---|---|
| 表名 | 数据库表名(不含前缀) |
| 表注释 | 表的 COMMENT 字段(显示为中文说明) |
| 引擎 | 存储引擎(InnoDB / MyISAM) |
| 行数 | 表中的数据行数 |
| 创建时间 | 表的创建时间 |
| 操作 | 配置 / 预览 / 生成 / 删除 |
配置弹窗
点击「配置」按钮后,可设置以下生成选项:
| 配置项 | 参数名 | 说明 | 示例 |
|---|---|---|---|
| 表名 | tableNames |
选择要生成的表(自动带入,格式 "表名|注释") |
["think_example|案例演示"] |
| 模板类型 | templateType |
ui 普通列表 或 ui2 树形(含 parent_id 时自动切换) |
ui |
| 生成菜单 | generateMenu |
是否自动创建菜单和权限节点 | true |
| 覆盖文件 | overwrite |
是否覆盖已存在的文件 | false |
预览功能
点击「预览」按钮,可查看即将生成的所有文件代码:
- 预览模式不会写入文件,可安全查看
- 支持切换查看不同文件(Controller / Logic / Model / Validate / API / Vue / columns.ts / querySchemas.ts)
- 确认无误后再点击「生成」实际创建文件
批量生成
在表列表页勾选多张表,点击「批量生成」:
- 批量生成会为每张表分别生成完整的 CRUD 模块(含文件、菜单、字典、路由)
- 单张表失败不影响其它表继续生成
- 生成结果会显示每张表的成功/失败状态和文件统计
配置选项详解
模块名(自动推导)
模块名由表名去掉前缀自动推导,影响以下内容:
| 影响范围 | 规则 | 示例(模块名=example) |
|---|---|---|
| 后端路由前缀 | /api/{模块名}/ |
/api/example/page |
| 前端 API 文件 | ui/src/api/{app}/{模块名}.ts |
ui/src/api/tool/example.ts |
| 前端视图目录 | ui/src/views/{app}/{模块名}/ |
ui/src/views/tool/example/ |
| 权限码前缀 | sys:{模块名}: |
sys:example:page |
| 字典编码前缀 | {模块名}_{字段名} |
example_status |
树形结构(自动检测)
当表中包含 parent_id 或 pid 字段时,引擎自动切换为 ui2/ 树形模板:
- 前端使用 Tree + Table 左右布局
- 支持拖拽排序、展开/折叠
- 自动处理父子关系的新增和编辑
- 树形模板不生成
columns.ts和querySchemas.ts - Controller 中不生成
page()方法
导入导出(默认生成)
默认生成 import() 和 export() 方法:
- 后端基于
ExcelService实现分批导入导出 - 枚举字段自动做正向/反向映射(值 ↔ 文本)
- 前端生成导入/导出按钮
字典自动创建
带选项(choices)的字段会自动创建字典:
- 在
think_dict和think_dict_item表中创建记录 - Logic 中自动生成
$serializeMaps映射 - 查询时自动补
{字段名}Text翻译字段 - 幂等:字典编码已存在则跳过
路由自动注册
在 route/app.php 中自动插入 CRUD 路由组:
- 包含 list / detail / add / update / delete / batchDelete / import / export
- 非树形结构额外包含 page 路由
- 幂等:路由组已存在则跳过
API 接口
| 方法 | 路径 | 权限码 | 说明 |
|---|---|---|---|
| GET | /api/generator/page |
sys:generator:page | 获取可生成的表列表(分页) |
| POST | /api/generator/preview |
sys:generator:generate | 预览生成代码(不写入文件) |
| POST | /api/generator/generate |
sys:generator:generate | 一键生成(写入文件) |
| POST | /api/generator/batchGenerate |
sys:generator:generate | 批量生成(多表) |
:::tip 演示模式
预览接口(preview)标注了 #[DemoAllow],演示环境下也可使用。生成接口(generate / batchGenerate)在演示环境下会被拦截。
:::
请求参数
{
"tableNames": ["think_example|案例演示"],
"templateType": "ui",
"generateMenu": true,
"overwrite": false
}
| 参数 | 类型 | 必填 | 说明 | 默认值 |
|---|---|---|---|---|
tableNames |
string[] | 是 | 表名数组,格式为 "表名|注释" |
- |
templateType |
string | 否 | 模板类型:ui(普通列表)或 ui2(树形) |
ui |
generateMenu |
bool | 否 | 是否自动创建菜单和权限节点 | true |
overwrite |
bool | 否 | 是否覆盖已存在的文件 | false |
:::info 树形结构自动切换
当表中包含 parent_id 或 pid 字段时,即使传入 templateType: "ui",也会自动切换为 ui2 树形模板。
:::
请求示例
# -----------------------------------------------------------------------------
# 预览生成代码(不写入文件)
# -----------------------------------------------------------------------------
# POST /api/generator/preview
# Content-Type: application/json
# Authorization: Bearer <token>
curl -X POST http://localhost:8000/api/generator/preview \
-H "Content-Type: application/json" \
-H "Authorization: Bearer <token>" \
-d '{
"tableNames": ["think_example|案例演示"],
"templateType": "ui"
}'
响应示例
{
"code": 0,
"ok": true,
"msg": "操作成功",
"data": {
"files": [
{
"path": "app/controller/ExampleController.php",
"content": "<?php\nnamespace app\\controller;\n// ...",
"exists": false,
"type": "backend"
},
{
"path": "app/logic/ExampleLogic.php",
"content": "<?php\nnamespace app\\logic;\n// ...",
"exists": false,
"type": "backend"
},
{
"path": "ui/src/views/tool/example/columns.ts",
"content": "import { h } from 'vue';\n// ...",
"exists": false,
"type": "frontend"
}
],
"vars": {
"module_name": "example",
"module_comment": "案例",
"model_class_name": "Example",
"template_type": "ui",
"is_tree": false
},
"menu_info": {
"name": "案例",
"path": "/tool/example",
"component": "tool/example/index"
}
}
}
:::tip 响应结构说明
files:待生成文件数组,每项含path(相对路径)、content(渲染后内容)、exists(是否已存在)、type(backend/frontend)vars:模板变量,供调试和导出配置使用menu_info:将要创建的菜单信息 :::
生成后操作清单
# -----------------------------------------------------------------------------
# 第 1 步:检查生成的文件
# -----------------------------------------------------------------------------
ls app/controller/Example* # 控制器
ls app/logic/Example* # 业务逻辑
ls app/model/Example* # 数据模型
ls app/validate/Example* # 验证器
ls ui/src/api/tool/example* # 前端 API
ls ui/src/views/tool/example/ # 前端页面(含 index.vue / edit.vue / detail.vue / columns.ts / querySchemas.ts)
# -----------------------------------------------------------------------------
# 第 2 步:在 route/app.php 中添加路由(通常已自动生成)
# -----------------------------------------------------------------------------
# -----------------------------------------------------------------------------
# 第 3 步:在菜单管理中配置菜单权限
# -----------------------------------------------------------------------------
# 新增菜单:案例演示(路径:/example,组件:tool/example/index)
# 新增按钮权限:sys:example:page / sys:example:add / sys:example:update / sys:example:delete
# -----------------------------------------------------------------------------
# 第 4 步:根据业务需求调整 Logic 属性配置
# -----------------------------------------------------------------------------
# 可调整:fileFields(文件字段)、serializeMaps(字典映射)、pageLikeFields(模糊查询)等
与 CLI 命令对比
| 特性 | Web 界面 | CLI 命令 |
|---|---|---|
| 使用方式 | 浏览器可视化操作 | 命令行 |
| 适用场景 | 日常开发、单表生成 | 批量生成、CI/CD 集成 |
| 预览功能 | ✅ 支持(不写入文件) | ✅ 支持(--dry-run) |
| 批量生成 | ✅ 支持(多选表) | ✅ 支持(--batch) |
| 配置选项 | 更多(树形、导入导出等) | 基础配置 |
| 权限限制 | 受权限和演示模式限制 | 不受限制 |
| 导出配置 | ❌ 不支持 | ✅ 支持(--output) |