你已经把 Steve's Repair 官网上线了(1.10),好看、能打开、有公开链接。但纯前端网站存在一个根本性的限制，本节通过亲身体验来帮你理解为什么需要后端。
下面是一个模拟的网页,将它视为你的 Steve's Repair 官网,顾客可以在上面留一条预约信息。请你照着做三步,别只看:
给 Steve 留一条预约
到现在为止,你的网站只有前端,也就是浏览器里看到、点到的那一层。前端负责显示和交互:把页面画出来、响应你的点击。它没有长期保管数据的地方。你存的留言只是临时放在浏览器内存里,刷新等于把这一页从头重新加载,内存一清空,留言就没了。像在白板上写字,擦一下就不在了。
要让数据留下来,刷新还在、换台电脑还在、别人也能看到,就得在前端背后加一层:后端。后端有个专门记东西的仓库,也就是数据库。前端把数据交给它保管,下次打开再向它要回来。
浏览器里看到的页面
负责:显示画面、响应点击
不具备:长期保存数据的能力
看不见,但一直在后台
负责:把数据存进数据库
负责:谁登录、谁是管理员
上图右侧以虚线和灰色显示，表示你当前尚未接入后端。点击下方按钮接入后端，再回到模拟器尝试一次，亲眼对比两种情况的差异。
点击下方的"接上后端"按钮，为模拟器接入一个模拟的后端（它将留言存储到浏览器自带的本地存储空间中，以此模拟真实数据库的持久保存能力）。接上之后,你会看到右上角状态灯变绿。然后请你再做一遍刚才那套动作:回到上面存几条留言、点"刷新页面"。这一次留言还在。后端干的就是这件事:替你记住东西。
切换后端的接 / 拔,自己对比两种情况下刷新的区别:
现在是:没有后端,刷新就丢。
担心自己判断不准？下面提供一个对照参考。同样存了三条留言、同样点了刷新,两种情况回来后是这样:
列表空了,显示"还没有留言"。
计数变回"当前 0 条留言"。
三条留言原样还在列表里。
计数仍是"当前 3 条留言"。
对照此表验证你刚才观察到的结果：未接后端时刷新后列表应为空，接入后端时刷新后留言应保持原样。两种情况的差异都亲自验证后，你便能真正理解后端的作用。
下面四条，对照你刚才在模拟器中的实际操作逐项核实后勾选——并非阅读理解后即可勾选，而是确实动手操作、亲眼看到结果后再勾选。勾不上的那条,回上面再做一遍那一步。
动手做完一条勾一条,四条都勾上,这一关就过。
同班同学说:"我给官网加了留言框,顾客留的言关页面就没了。" 最该给他补上的是什么?
还没想清前端和后端怎么分工,或者好奇 Supabase 是怎么把留言记住的?把疑问发到群里问问大家,或者直接向 Abel 或助教提问。本节不要求你立即掌握后端开发技能。亲身感受到纯前端的局限、理解为什么需要后端，即为本节的目标。