82 lines
3.1 KiB
Markdown
82 lines
3.1 KiB
Markdown
# 9.12 新增页面开发步骤
|
||
|
||
:::tip 概述
|
||
新增前端页面的标准路径：api 模块 → columns.ts → querySchemas.ts → index.vue → edit.vue/detail.vue → 菜单权限。用生成器可一次产出五件套，本节给出手动与生成两条路径。
|
||
:::
|
||
|
||
## 标准步骤（手动开发）
|
||
|
||
```text
|
||
1. api 接口模块：src/api/{域}/{模块}.ts
|
||
http.request({url: '/{prefix}/page', method: 'GET', params})
|
||
增删改查+导入导出逐个函数（url 对齐后端 gmeta path，无 /api 前缀）
|
||
|
||
2. 表格列：src/views/{域}/{模块}/columns.ts
|
||
selection 列 + ID + 业务字段 + 枚举列（展示 {field}Text）+ 操作列
|
||
图片/选项/链接用 render 函数
|
||
|
||
3. 筛选表单：src/views/{域}/{模块}/querySchemas.ts
|
||
每个输入 ↔ PageReq 同名驼峰字段 ↔ spec 声明（三件套对齐）
|
||
Input → LikeFields；Select/InputNumber → EqFields
|
||
|
||
4. 列表页：index.vue
|
||
Page 容器 = 搜索区（schemas）+ 操作区（按钮 v-permission）+ Table + pagination
|
||
加载：getXxxPage({pageNo, pageSize, ...筛选值})
|
||
|
||
5. 编辑弹窗：edit.vue
|
||
新增/编辑共用；字段对齐 AddReq/UpdateReq（全量提交语义）
|
||
文件字段用 Upload 组件（持 URL）
|
||
|
||
6. 详情：detail.vue（需要时）
|
||
|
||
7. 菜单与权限：
|
||
生成器自动创建（菜单 + 权限节点）；
|
||
手动：菜单管理建菜单（path /{domain}/{moduleCamel}, component=path+"/index"）
|
||
+ 权限节点（sys:{module}:{action}）→ 角色勾选
|
||
|
||
8. 联调：登录 → 访问菜单 → 增删改查 → 对照 /api.json 核对接口
|
||
```
|
||
|
||
## 生成器路径（推荐）
|
||
|
||
```sh
|
||
# 后端+前端一次产出（含菜单/权限/字典/路由注册副作用）
|
||
go run ./cmd/generator -tables "goframe_example|案例演示表"
|
||
go build ./... && 重启
|
||
```
|
||
|
||
产出前端文件（ui 普通模板）：
|
||
|
||
```text
|
||
src/api/{域}/{moduleCamel}.ts
|
||
src/views/{域}/{moduleCamel}/
|
||
index.vue edit.vue detail.vue columns.ts querySchemas.ts
|
||
|
||
树形模块用 ui2 模板：index.vue edit.vue detail.vue（无 columns/querySchemas）
|
||
```
|
||
|
||
生成后调整：querySchemas options 改字典驱动、复杂列 render、扩展按钮与接口。
|
||
|
||
## 三件套对齐自检（联调前）
|
||
|
||
```text
|
||
□ api url 与 gmeta path 一致（无 /v1；baseURL 补 /api）
|
||
□ querySchemas field ↔ PageReq json ↔ LikeFields/EqFields 声明
|
||
□ columns prop ↔ Item/DetailRes json 字段
|
||
□ 枚举列展示 {field}Text
|
||
□ 按钮 v-permission ↔ gmeta permission ↔ 角色已勾选
|
||
□ edit 表单字段 ↔ AddReq/UpdateReq（全量提交）
|
||
□ 文件字段 URL 已由后端 GetFileUrl 补域名（直接绑定展示）
|
||
```
|
||
|
||
## 常见联调问题
|
||
|
||
| 症状 | 排查 |
|
||
|------|------|
|
||
| 列表 404 | url 重复拼 /api 或误加 /v1 |
|
||
| 筛选无效果 | 三件套有一环没对齐（field 名/Req 字段/spec 声明） |
|
||
| 新页面 403 | 权限节点未建/未勾选/身份缓存旧 |
|
||
| 新页面 404（路由） | 菜单 component 路径与实际文件不符 |
|
||
| 编辑保存字段丢失 | 表单未全量提交（基座 Update 全量语义） |
|
||
| 枚举显示数字 | 后端 SerializeMaps 未声明或前端 prop 用了 status 而非 statusText |
|