头像+名字
+链接按钮
第 8 章
加功能:留言板
一个静态主页太"安静"了。给你的主页加一个留言板,让访客能留下名字和想说的话。
我们要加什么
在个人主页下面新增一个留言区域:
- 访客可以填写昵称和留言内容
- 点"提交"后留言显示在下方列表
- 显示留言时间
- 数据存在浏览器本地,刷新不丢失
功能增量图
🏠
基础版
+
💬
加留言板
昵称+内容+时间
存本地存储
存本地存储
+
🌙
加深色模式
一键切换
暗色主题
暗色主题
+
📊
加统计
显示"已有N条留言"
提示词模板
把下面的文字发给 WorkBuddy,同时附上你当前的代码:
基于上面这个个人主页代码,请在页面底部加一个留言区域。
功能要求:
1. 一个昵称输入框 + 一个留言内容输入框 + 一个"提交"按钮
2. 提交后留言显示在下方列表里
3. 每条留言显示:昵称、内容、时间
4. 用 localStorage 存储留言数据,刷新页面不丢失
5. 如果昵称或内容为空,提示"请填写完整"不提交
设计:留言区域跟主页风格统一,干净简洁。
不要改动主页其他部分的代码,只新增。
运行一下试试
保存代码,双击打开。你应该能看到主页底部多了一个留言区。试着:
- 填昵称和内容,点提交——留言出现在下方
- 刷新页面——留言还在
- 不填任何内容点提交——弹出提示
📌 localStorage 是什么
localStorage 是浏览器自带的"小笔记本"。网页可以把少量数据存在用户本地电脑上,关掉浏览器再打开,数据还在。缺点是换一台电脑就没了(因为数据存在原来那台电脑上)。后面第 11 章会教你用真正的后端解决这个问题。
继续迭代:再加个深色模式
留言板做好了,再试一个独立功能——深色模式开关。
基于上面的代码,加一个深色模式开关。页面右上角放一个按钮(月亮/太阳图标),点击切换深色/浅色模式。切换后整个页面的颜色都跟着变,留言区域也适配深色。
你不需要知道深浅色怎么切换、CSS 怎么写。WorkBuddy 会处理一切——你只需要描述效果。
本章小结
| 要点 | 说明 |
|---|---|
| 核心操作 | 现有代码发给 WorkBuddy + 新功能描述 |
| localStorage | 浏览器本地存储,刷新不丢,换电脑就没了 |
| 增量思维 | 一个功能一个功能往上加,每步验证 |
| 进阶挑战 | 加完留言板再加深色模式,感受组合叠加 |