Day2 · ✍️ 模块 13

增删改查与录入校验

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

下载本模块材料
边界

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

完成“Step 1 亲手在 Excel 做 增删改查 · 撞墙”,并观察它对“增删改查与录入校验”能力的作用。

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

已完成“Step 1 亲手在 Excel 做 增删改查 · 撞墙”中的观察或讨论,并能复述该步骤得到的结论。

人工边界

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

走查记录Step 1 亲手在 Excel 做 增删改查 · 撞墙Day2 · 边界 · 预估 10 分钟
主线

Step 2 讲师点破 · 引入数据保存到本地的重要性

完成“Step 2 讲师点破 · 引入数据保存到本地的重要性”,并观察它对“增删改查与录入校验”能力的作用。

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

已完成“Step 2 讲师点破 · 引入数据保存到本地的重要性”中的观察或讨论,并能复述该步骤得到的结论。

人工边界

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

走查记录Step 2 讲师点破 · 引入数据保存到本地的重要性Day2 · 主线 · 预估 5 分钟
主线需联网

Step 3 网页 增删改查 按钮 · 用户体验 先升级

完成“Step 3 网页 增删改查 按钮 · 用户体验 先升级”,并观察它对“增删改查与录入校验”能力的作用。

约 10 分钟
复制给 AI

完成标志

加编辑 / 新增 / 删除:三个操作都能用 · 界面立即反应 · 体感比 Excel 顺畅十倍;重做刚才的 5 个任务:2 分钟做完 · 学员亲身对比:"网页版明显顺",但讲师此时不点破——埋雷给 ⑥ Aha

人工边界

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

走查记录Step 3 网页 增删改查 按钮 · 用户体验 先升级Day2 · 主线 · 预估 10 分钟
边界

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

完成“Step 4 新摩擦:录入数据又被弄乱”,并观察它对“增删改查与录入校验”能力的作用。

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

已完成“Step 4 新摩擦:录入数据又被弄乱”中的观察或讨论,并能复述该步骤得到的结论。

人工边界

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

走查记录Step 4 新摩擦:录入数据又被弄乱Day2 · 边界 · 预估 5 分钟
主线

Step 5 录入校验(源头防止会造成影响的数据录入)

完成“Step 5 录入校验(源头防止会造成影响的数据录入)”,并观察它对“增删改查与录入校验”能力的作用。

约 22 分钟
复制给 AI

完成标志

国家下拉:下拉有国旗 emoji + 中文名 + ISO 码提示;电话格式的检查:输入不合规会卡住不能提交;邮箱小写:录入 ABC@XX.com 自动变 abc@xx.com

人工边界

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

走查记录Step 5 录入校验(源头防止会造成影响的数据录入)Day2 · 主线 · 预估 22 分钟
边界

Step 6 思考总结:数据为什么要保存到本地和如何防止数据混乱和数据见的互相干扰

完成“Step 6 思考总结:数据为什么要保存到本地和如何防止数据混乱和数据见的互相干扰”,并观察它对“增删改查与录入校验”能力的作用。

约 8 分钟
操作步骤
  1. 再次尝试提交国家、电话或邮箱格式不合格的客户,确认表单会阻止提交并显示提示。
  2. 对比 dashboard.html 与 customers.xlsx,确认网页中的 CRUD 和校验没有更新原始 Excel。
完成标志

已完成“Step 6 思考总结:数据为什么要保存到本地和如何防止数据混乱和数据见的互相干扰”中的观察或讨论,并能复述该步骤得到的结论。

人工边界

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

走查记录Step 6 思考总结:数据为什么要保存到本地和如何防止数据混乱和数据见的互相干扰Day2 · 边界 · 预估 8 分钟