easygoadmin-wiki/EasyGoAdmin_GoFrame_NaiveVue/zh/frontend/new-page.md

9.12 新增页面开发步骤

:::tip 概述 新增前端页面的标准路径：api 模块 → columns.ts → querySchemas.ts → index.vue → edit.vue/detail.vue → 菜单权限。用生成器可一次产出五件套，本节给出手动与生成两条路径。 :::

标准步骤（手动开发）

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 核对接口

生成器路径（推荐）

# 后端+前端一次产出（含菜单/权限/字典/路由注册副作用）
go run ./cmd/generator -tables "goframe_example|案例演示表"
go build ./... && 重启

产出前端文件（ui 普通模板）：

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、扩展按钮与接口。

三件套对齐自检（联调前）

□ 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