# 9.13 新增页面开发步骤

:::tip 概述
一个标准业务页面 = 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 模块编写规范](/zh/frontend/api-module.html) 命名（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](/zh/frontend/table-components.html)）。

## ③④ 菜单与授权

菜单管理配置：

- `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、菜单行、路由声明块全部自动就位——手工开发用于理解机制，日常提效用生成器。

## 相关

- [第 3 章 模块开发实战](/zh/guide/overview.html)（后端配套）
- [6.22 示例模块（example）](/zh/modules/example.html)