第二单元 本机演示:定向提交

第5课 定向提交:本机先发出

把提交做成真的:选人+文字→我发出的多一条待审核。

第5课 定向提交:本机先发出
第5课 定向提交:本机先发出
大约 40 分钟 这个单元只学:本机先跑通定向提交;封存可演示 v1

第一次真的「发出去」:选人、写一句、我发出的 +1。

本机路径打通的瞬间,墙就活了。

先求通,再求美、求全班。

一、这一课怎么学

  • 开始前你要会:会打开浏览器,会打字。
  • 怎样算做完:完成「轮到你做」,并在嵌入工具里留下可预览文件。
  • 建议:先读「弄懂这件事」,再做练习。

二、学完你能做到

  • 缺文字不能提交。
  • 提交后列表+1。
  • 能演示待审核状态。

三、弄懂这件事

这一课就这几小步:

1.成功标准

第一次真的「发出去」,成功标准要写死。

必须选了接收人,并且文字非空,才算提交成功。

缺一项就失败,并用人话提示,不要假装成功。

2.本机存储

这一课先在本机跑通主路径:选人、写一句、「我发出的」+1。

数据先存在本机即可;刷新是否还在,可在后续课加强。

先求通,再求美、求全班同一张表。

3.人话提示

失败时要用同学听得懂的话,例如「请先选接收人」。

不要甩一串英文代码或空白屏幕。

好提示也是产品的一部分,能减少误操作。

记一句:本机先跑通主路径——发出去、列表出现,再谈全班表。

四、先跟着做

对照例子想清楚

  1. 用自己的话重述本课成功标准。

    做对了会怎样你写出来的标准,别人打开页面点几下就能核对是不是做到了,而不是只有形容词。

  2. 指出哪一步必须自己点,不能听 AI 口头说完成。

    做对了会怎样你明确写出:必须自己打开页面点一遍;AI 口头说「完成了」不能算数。

五、轮到你做

本机提交

  1. 写成功/失败各两条可观察标准。

    做对了会怎样成功含列表+1;失败含空提交且条数不变。

    做不出来怎么办成功:提交后发出列表+1、有成功提示;失败:空内容不变、超长被拦。

  2. 实现提交到「我发出的」。

    做对了会怎样提交成功后,列表条数增加 1。

    做不出来怎么办本机版先用数组 push 一条数据,看到列表 +1。

  3. 封存 versions/v1/。

    做对了会怎样改之前留了副本,坏了还能退回。

    做不出来怎么办先复制 my-wall 文件夹再改,保留能退回的副本。

  4. 用下面嵌着的氛围编程工具。写完在工具里看预览,文件是 versions/v1/index.html。

    做对了会怎样在嵌着的工具预览里,你能亲眼看见本课要求的按钮、分数或流程文字,而不是只有说明。

    做不出来怎么办先在预览里自己点一遍;文件名必须和例子上写的完全一样,改完再刷新预览。

本节例子

工具打开时会先把上一课成果放进「代码」和「效果」。下面提示词请整段发送,在已有成果上小步改,不要整页重写。本课文件是 versions/v1/index.html。

基于点赞墙页面(代码区已是 v0 空壳),实现本机定向提交(可用 localStorage,不要真服务器):

- 校验空文字:空内容要有人话提示;
- 成功后「我发出的」增加一条,状态为待审核;
- 失败也要有人话提示,不要只显示错误码。

做成后我要提交一条,看见列表条数 +1。不要整页推倒重来。

正在打开氛围编程工具…若长时间空白请强制刷新。

六、小心这些错

空提交也加条。

成功无列表变化。

七、带走这几句

  • 先在本机把提交→可见的主路径跑通,再谈上线。
  • 失败时也要给人话提示,别只丢代码号。

八、打勾再往下

  • 空提交被拦住。
  • 成功列表+1。

小测验

对照上面「学完你能做到」选一个答案,再点「检查」。

  1. 空文字应?

  2. 本课存储?

  3. 待审核显示在?