9.13 新增页面开发步骤

概述

一个标准业务页面 = api 模块函数 + views 页面五件套 + 菜单配置。本页步骤以 example 模块真实文件为模板；配合代码生成器可自动完成前三步。

步骤总览

text

① api 模块    ui/src/api/{域}/{模块}.ts
② 页面五件套  views/{域}/{模块}/
   index.vue / edit.vue / detail.vue / columns.ts / querySchemas.ts
③ 菜单        管理界面配置 path + component + 权限节点
④ 授权        角色勾选新权限节点
⑤ 自检        页面打开、增删改查、按钮显隐

① API 模块

按 9.14 API 模块编写规范命名（get{模块}Page / {模块}Add …），写法照抄 ui/src/api/tool/example.ts：

typescript

import { http } from '@/utils/http/axios';

export function getExamplePage(params?: Record<string, any>) {
  return http.request({ url: '/example/page', method: 'GET', params });
}

② 页面五件套

直接复制 views/tool/example/ 目录改名，逐个文件替换模块字段：

文件	改什么
index.vue	接口函数引用、工具栏按钮（v-perm 码）、弹窗引用
edit.vue	表单字段与 dto json 名一致（全量提交）
detail.vue	展示字段
columns.ts	列定义与 render 渲染
querySchemas.ts	查询项（与后端 LikeFields/EqFields 对齐）

列表页骨架为 BasicForm + BasicTable + @register（见 9.9）。

③④ 菜单与授权

菜单管理配置：

path：路由路径
component：views 相对路径（如 tool/xxx/index）
每接口一个 permission 节点（与 RouteSpec 逐字一致，type=1 节点挂在页面菜单下）

随后角色管理勾选新节点。

⑤ 自检清单

[ ] 菜单出现在侧边栏，点击正常渲染（component 路径正确）
[ ] 分页/搜索/筛选正常（与后端 LikeFields/EqFields 对齐）
[ ] 新增/编辑提交成功（全量字段、json 名一致）
[ ] 字典列显示 xxText（SerializeMaps + 字典项存在）
[ ] 按钮 v-perm 显隐正确（数组入参）
[ ] 无权限角色访问被 403

生成器捷径

bash

make gen TABLES="gin_xxx|模块说明"

api 模块、index/edit/detail/columns/querySchemas、菜单行、路由声明块全部自动就位——手工开发用于理解机制，日常提效用生成器。

Become a sponsor

企业级中台解决方案

企业级中台解决方案

9.13 新增页面开发步骤 ​

步骤总览 ​

① API 模块 ​

② 页面五件套 ​

③④ 菜单与授权 ​

⑤ 自检清单 ​

生成器捷径 ​

相关 ​