← 目录

Part 4: AI 写管理功能

系统管理 + 统一认证管理 — 先把数据管起来

为什么要先做管理功能?
管理功能是认证的数据基础。先有管理员能登录后台,有用户数据可查,有应用数据可用,后面写认证逻辑才有意义。

系统管理

管理员用户 CRUD
角色管理
操作日志

统一认证管理

自然人用户 CRUD(脱敏)
应用管理(AppKey/Secret)
登录日志

实施顺序:管理功能 → 认证逻辑

1
管理员用户 — 后台管理员 CRUD,最简单的热身
⬇
2
自然人用户 — UAS 用户 CRUD,手机号脱敏、BCrypt 加密
⬇
3
应用管理 — 第三方应用注册,自动生成 AppKey/Secret
⬇
4
登录日志 — 记录方法 + 查询接口,为登录时调用做准备
⬇
5
认证功能 — 密码/短信/企业登录(下一节)
思路:系统管理是"搭台",认证功能是"唱戏"。先把台搭好。

系统管理:管理员用户 CRUD

Prompt 示例

请实现系统管理员用户管理模块:

接口:
- GET /api/system/user/list — 分页查询(支持 username 模糊)
- POST /api/system/user — 新增(密码 BCrypt 加密)
- PUT /api/system/user — 修改
- DELETE /api/system/user/{id} — 逻辑删除

约束:MyBatis-Plus 分页,返回 AjaxResult

AI 生成的接口列表

方法路径功能
GET/api/system/user/list分页查询管理员
POST/api/system/user新增管理员
PUT/api/system/user修改管理员
DELETE/api/system/user/{id}删除管理员
最简单的 CRUD 热身:表结构简单,没有脱敏需求,适合第一次前后端联调。

统一认证管理:自然人用户 CRUD

Prompt 示例

请实现自然人用户管理模块:

接口:
- GET /api/uas/user/list — 分页查询(phone 模糊、realName 模糊、status 筛选)
- GET /api/uas/user/{id} — 详情查询(手机号脱敏:138****1234)
- POST /api/uas/user — 新增(密码 BCrypt 加密)
- PUT /api/uas/user — 修改
- DELETE /api/uas/user/{id} — 删除(逻辑删除)

约束:MyBatis-Plus 分页,返回 AjaxResult,手机号/身份证脱敏返回

你和 AI 的分工

你负责

  • 定义接口路径和功能
  • 指定脱敏规则
  • 审查 AI 生成的代码
  • 用 MCP 验证功能

AI 负责

  • 生成 Controller/Service
  • 实现脱敏工具类
  • 配置 MyBatis-Plus
  • 处理异常和边界情况

自然人用户:前端页面

Prompt 示例

请实现用户管理列表页面 UserList.vue:

1. 顶部搜索栏:手机号输入框、状态下拉、搜索按钮、重置按钮
2. 操作按钮:新增、批量删除
3. 表格列:手机号(脱敏)、姓名、认证等级、状态(Tag标签)、创建时间、操作(编辑/删除)
4. 分页组件
5. 新增/编辑弹窗:手机号、密码(新增时)、姓名、证件号
6. 调用 /api/uas/user/list 接口,Element Plus 组件

AI 生成的页面结构

页面元素

  • 搜索栏:手机号、状态筛选
  • 操作按钮:新增、批量删除
  • 数据表格:脱敏展示、状态标签
  • 分页组件:页码切换
  • 弹窗表单:新增/编辑
前后端循环:后端写接口 → 前端写页面 → MCP 打开浏览器看效果 → 下一个功能。

统一认证管理:应用管理

Prompt 示例

请实现第三方应用管理模块:

接口:
- GET /api/uas/app/list — 分页查询
- POST /api/uas/app — 新增应用(自动生成 app_key 和 app_secret,UUID)
- PUT /api/uas/app — 修改
- DELETE /api/uas/app/{id} — 删除

前端:AppList.vue,表格展示应用名、AppKey、回调地址、状态。新增弹窗输入应用名和回调地址。

应用管理的特殊性

app_key 和 app_secret

新增应用时由系统自动生成,不可手动指定。app_secret 只在创建时显示一次(类似 GitHub Token)。

安全注意:app_secret 不能明文返回给前端列表页。查询接口只返回脱敏后的 secret(如 sk_****abcd)。

统一认证管理:登录日志

日志写入(后面登录时调用)

记录方法

recordLoginLog(userId, loginType, ip)
参数:用户ID、登录方式(password/sms/enterprise)、IP地址
存储:u_login_log 表

设计:先写好日志记录方法,等下一节写登录时直接调用。

日志查询接口

参数说明
loginType登录方式筛选
beginTime开始时间
endTime结束时间
前端:LogList.vue — 时间范围选择器 + 登录方式下拉 + 表格 + 分页。

用 MCP 验证管理功能

前后端都写完了,用 MCP 在浏览器里逐个验证

请用 MCP 验证管理功能:

系统管理:
- 打开管理员列表页,新增一个管理员,确认列表刷新

统一认证管理:
- 打开用户列表页,新增一个用户,搜索手机号
- 新增一个应用,确认自动生成了 app_key
- 打开日志页面,确认能查到记录

MCP 执行的调用

  • navigate_page → 打开页面
  • take_snapshot → 识别页面元素
  • fill + click → 填表提交
  • take_screenshot → 确认结果
节奏:写一个模块 → MCP 验证 → 写下一个模块。别攒到最后一起测。

Part 4 小结:管理功能已就绪

你学会了什么

✓
如何让 AI 生成 CRUD 接口
✓
如何指定脱敏规则让 AI 实现
✓
如何让 AI 生成前端列表页面
✓
如何处理特殊需求(自动生成密钥)
✓
如何用 MCP 逐个验证功能

下一节

Part 5: AI 写登录认证

管理功能跑通了,需要登录保护。
下一节先实现管理后台登录,再做 UAS 用户认证登录。

端到端进度:
获取需求 ✅ → 初始化项目 ✅ → 管理功能 ✅ → 认证登录 → 测试 Review