WorkBuddy AI 编程入门
第 8 章

加功能:留言板

一个静态主页太"安静"了。给你的主页加一个留言板,让访客能留下名字和想说的话。

我们要加什么

在个人主页下面新增一个留言区域:

功能增量图

🏠
基础版
头像+名字
+链接按钮
+
💬
加留言板
昵称+内容+时间
存本地存储
+
🌙
加深色模式
一键切换
暗色主题
+
📊
加统计
显示"已有N条留言"

提示词模板

把下面的文字发给 WorkBuddy,同时附上你当前的代码:

基于上面这个个人主页代码,请在页面底部加一个留言区域。

功能要求:
1. 一个昵称输入框 + 一个留言内容输入框 + 一个"提交"按钮
2. 提交后留言显示在下方列表里
3. 每条留言显示:昵称、内容、时间
4. 用 localStorage 存储留言数据,刷新页面不丢失
5. 如果昵称或内容为空,提示"请填写完整"不提交

设计:留言区域跟主页风格统一,干净简洁。

不要改动主页其他部分的代码,只新增。

运行一下试试

保存代码,双击打开。你应该能看到主页底部多了一个留言区。试着:

📌 localStorage 是什么

localStorage 是浏览器自带的"小笔记本"。网页可以把少量数据存在用户本地电脑上,关掉浏览器再打开,数据还在。缺点是换一台电脑就没了(因为数据存在原来那台电脑上)。后面第 11 章会教你用真正的后端解决这个问题。

继续迭代:再加个深色模式

留言板做好了,再试一个独立功能——深色模式开关。

基于上面的代码,加一个深色模式开关。页面右上角放一个按钮(月亮/太阳图标),点击切换深色/浅色模式。切换后整个页面的颜色都跟着变,留言区域也适配深色。

你不需要知道深浅色怎么切换、CSS 怎么写。WorkBuddy 会处理一切——你只需要描述效果

本章小结

要点说明
核心操作现有代码发给 WorkBuddy + 新功能描述
localStorage浏览器本地存储,刷新不丢,换电脑就没了
增量思维一个功能一个功能往上加,每步验证
进阶挑战加完留言板再加深色模式,感受组合叠加