### [AI 制作网页应用：先设计数据、权限和异常流程](https://alyyhw.com/article/5241)

**Published:** 2026-08-06T17:13:59

**Author:** AI菜鸟网

**Excerpt:** 从数据模型、角色权限和失败恢复开始，用 AI 协助制作真正可用的网页应用，而不是只能演示的静态页面。

网页应用和普通展示页的区别，在于它会保存数据、区分用户并处理失败。AI 可以快速生成表单和列表，但如果数据关系、权限和异常流程没有先设计，应用很快就会出现重复提交、越权访问或数据丢失。

## 先确定一条完整业务流程

用“创建—查看—修改—归档”或“提交—审核—退回—再次提交”描述一条流程，并列出每一步产生的数据。流程先于页面，页面只是把流程呈现给用户。

![AI网页应用数据与权限流程示意图](https://login.alyyhw.com/wp-content/uploads/2026/08/ai-long-image-layout-20260802.jpg)

| 环节  | 要保存的数据 | 必须确认的规则 |
| --- | --- | --- |
| 创建  | 提交人、时间、内容 | 谁可以创建，必填字段 |
| 审核  | 审核人、意见、状态 | 谁能审核，是否需要二次确认 |
| 修改  | 版本、变更记录 | 哪些状态允许修改 |
| 归档  | 归档时间、保留期限 | 谁可以恢复或删除 |

## 用角色矩阵定义权限

不要只在页面上隐藏按钮。权限必须在接口和数据查询层再次检查。可以先写一张最小矩阵：

```
访客：只能看公开内容
普通成员：创建自己的记录，查看自己的记录
审核人：查看分配范围内的记录并提交意见
管理员：管理配置和权限，不默认查看全部敏感内容
```

让 AI 生成代码时，要求它同时列出每个接口的鉴权条件和失败响应。这样你能在审查时发现“前端没有按钮，但接口仍可直接调用”的问题。

## 数据模型要能解释关系

一张表里同时塞用户、内容、审核和日志，初期看起来快，后续却难以维护。至少把主体记录、状态变化和操作日志分开，并给每条记录一个稳定 ID。AI 可以协助生成字段草案，但要由业务人员确认是否满足真实查询和导出需求。

## 异常流程要有恢复办法

1.  网络中断时，不重复提交，也不假装成功。
2.  保存失败时，保留用户输入并提示重试。
3.  并发修改时，提示版本冲突并提供查看差异。
4.  权限变化时，重新检查并说明原因。

## 从最小垂直切片开始

第一版只完成一条从创建到查看的真实流程，接入真实数据和权限，再增加审核、通知和报表。每增加一个功能，都用已有流程做回归测试。不要让 AI 一次生成“完整后台”，那样很难知道问题属于哪一层。

## 上线前检查安全和维护

-   接口是否验证身份、角色和记录归属。
-   敏感字段是否最小化返回。
-   操作日志是否能追溯谁在何时做了什么。
-   备份、恢复和删除策略是否经过演练。
-   错误信息是否不会泄露内部路径和密钥。

从网页原型走向线上时，可参考站内的[AI网页部署与回滚流程](https://alyyhw.com/article/5225)；复杂状态的拆解方式，可参考[复杂网页状态与组件边界](https://alyyhw.com/article/5239)。

真正可用的网页应用，首先要让数据和权限讲得通，再让界面看起来漂亮。

**Tags:** AI工作流, AI方法论, AI编程, Claude

**Categories:** AI编程

---