75 lines
2.5 KiB
Markdown
75 lines
2.5 KiB
Markdown
# 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)
|