Files
rxthinkcmf-wiki/RXThinkCMF_ThinkPhp6_NaiveVue/zh/generator/web-ui.md
T
2026-09-29 10:14:04 +08:00

9.5 KiB
Raw Blame History

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)

相关文档