Day2 · ✍️ 模块 13

增删改查与录入校验

给客户页面增加增删改查,再把数据校验前移到录入边界。

下载本模块材料
边界

亲手在 Excel 做增删改查 · 撞墙

亲手在 Excel 做一遍增删改查,撞上「Excel 和网页是两个家」的墙。

约 10 分钟
本节材料
操作步骤
  1. 打开 customers.xlsx,新增 Hoffmann GmbH(DE)、Rivera Trading SAC(PE)、Nakamura Tools KK(JP)三家。
  2. 把 Müller 的邮箱从 [email protected] 改为 [email protected]
  3. 删除 Barcelona Tools S.L. 所在行。
  4. 打开 dashboard.html,对比网页和 Excel 的客户数据是否一致。
完成标志

改完 Excel 后 dashboard 纹丝不动——亲身体会到「网页和 Excel 是两个家、改一个另一个不知道」。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录亲手在 Excel 做增删改查 · 撞墙Day2 · 边界 · 预估 10 分钟
实际耗时
边界

讲师点破 · 数据要有唯一的家

理解「一本账原则」和云端化四属性。

约 5 分钟
操作步骤
  1. 回顾刚才的手工操作,记下三个问题:Excel 拦不住脏数据、本地改动不会自动同步、dashboard 不随 Excel 更新。
  2. 用自己的话写下「一本账原则」:同一份业务数据只能有一个事实来源。
  3. 记下云端化要满足的四个属性:持久化、单一事实来源、同步、共享。
完成标志

能复述「一本账原则」和云端化四属性,理解后面为什么要把数据搬上云。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录讲师点破 · 数据要有唯一的家Day2 · 边界 · 预估 5 分钟
实际耗时
主线需联网

添加客户增删改查

给客户页面加上增删改查按钮,先把交互体验做顺。

约 4 分钟
复制给 AI

完成标志

增/删/改三个按钮都能用,界面即时刷新;此时数据仍只在页面内存里,刷新会丢(下一模块解决)。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录添加客户增删改查Day2 · 主线 · 预估 4 分钟
实际耗时
边界需联网

在网页里重做刚才的 5 个变更

在网页里重做刚才的 5 个变更,亲身对比网页比手改 Excel 顺。

约 3 分钟
操作步骤
  1. 在网页表单里新增 3 个客户(就用 Step 1 那三家:Hoffmann GmbH、Rivera Trading SAC、Nakamura Tools KK)。
  2. 在网页里把 Müller 的邮箱改成 [email protected]
  3. 在网页里删除 Barcelona Tools S.L.。
完成标志

同样 5 个变更,在网页里 2 分钟做完,亲身对比「网页明显比手改 Excel 顺」。(讲师此刻先不点破,埋给模块末尾的 Aha。)

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录在网页里重做刚才的 5 个变更Day2 · 边界 · 预估 3 分钟
实际耗时
边界需联网

新摩擦:录入数据又被弄乱

看到脏数据从录入口又混进来,意识到校验要前移到源头。

约 5 分钟
操作步骤
  1. 在网页表单里新建一个客户:国家填「美国」、电话填「13912345678」、邮箱用大写字母。
  2. 提交后检查这些不规范的值是否直接进了客户数据。
完成标志

看到脏数据从录入口又混进来了——引出「校验要前移到录入边界」。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录新摩擦:录入数据又被弄乱Day2 · 边界 · 预估 5 分钟
实际耗时
主线需联网

将国家字段改为下拉

把国家字段从自由输入改成受控下拉,堵住脏数据入口。

约 3 分钟
复制给 AI

完成标志

打开新增/编辑表单,国家已是下拉、带国旗+中文名+ISO 码,不能再随便乱填。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录将国家字段改为下拉Day2 · 主线 · 预估 3 分钟
实际耗时
主线需联网

校验电话格式

给电话字段加 E.164 格式校验,不合格拦住不让提交。

约 3 分钟
复制给 AI

完成标志

在表单里故意填一个错电话,会出现红色提示且表单提交不了。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录校验电话格式Day2 · 主线 · 预估 3 分钟
实际耗时
主线需联网

自动规范邮箱大小写

邮箱失焦时自动转小写,规范录入。

约 2 分钟
复制给 AI

完成标志

在表单里输入 [email protected],点到别处后自动变成 [email protected]

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录自动规范邮箱大小写Day2 · 主线 · 预估 2 分钟
实际耗时
边界需联网

思考总结:本地保存与录入防线

确认录入校验挡住了脏数据,且没有回写原始 Excel。

约 8 分钟
操作步骤
  1. 再试着提交国家/电话/邮箱不合格的客户,确认表单会拦住。
  2. 对比 dashboard.html 与 customers.xlsx,确认网页里的增删改查和校验都没有回写原始 Excel。
完成标志

能说清「录入校验把脏数据挡在源头」,并再次确认数据还没有真正的持久层——直接引出下一模块的云端化。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录思考总结:本地保存与录入防线Day2 · 边界 · 预估 8 分钟
实际耗时