学生宠物养成系统 —— 项目介绍
它是个什么项目
这是一个面向中小学课堂的学生行为激励系统。核心思路很朴素:把学生在学校里每一次真实表现——课堂发言、作业完成、考勤、考试、在家里的表现——都折算成"积分",再把积分变成学生自己那只虚拟宠物的成长。于是"好好表现"不再是一句抽象的要求,而是看得见的东西:表现好,宠物会长大、升级、变漂亮;表现差,宠物会没精神、饿肚子、生病。用孩子对宠物的牵挂,来驱动他的学习动力和课堂纪律。系统同时照顾到了三种人:老师用它管理班级和课堂,学生用它养宠物、看自己的成长,家长用它了解孩子在校情况并在家里配合评分。
具备哪些功能
一、班级与学生管理 创建和管理多个班级、切换班级、批量导入学生名单(也支持从名单表格里自动识别导入)、完整的学生档案、给学生排座位并保留座位调整的历史(可查看和恢复以前的座位布局)、学生详情页一站式查看该生所有情况。
二、课堂加减分 老师打开课堂页面就是一屏学生卡片(每张卡片上是这个学生的宠物),点一下就加分或扣分,可以按事先设好的积分规则一键给分,也可以自定义分数。每次加减分都有音效、语音和宠物动画反馈,并且永久留痕,记录不可删除。
三、宠物养成 每个学生拥有一只自己的宠物。宠物有等级、成长值、饥饿度、清洁度、心情和健康状态,会随着时间自然消耗——饿了、脏了、心情差了,长期不管会生病甚至死亡,需要治疗或复活。宠物可以喂养、洗澡、玩耍、休息、打扮,可以更换外形和皮肤,还会解锁成就和徽章。宠物的一举一动都有对应的表情、动作和声音。
四、积分商城与道具 学生用积分在商城里兑换食物、药品、玩具、装饰、特效等各种道具,放进自己的背包随时使用。兑换需要老师审批,老师也可以直接管理奖品。每一种道具使用起来都有各自独立的全屏动画:吃药是药飞进嘴里加生命线回升,洗澡是淋浴、泡沫、搓刷、冲净,玩耍是球弹跳、飞盘盘旋,睡觉是入夜、云朵软垫、被子合上、Zzz 飘起,装扮是走秀台和试衣镜,跳舞有迪斯科球和光束,加速有能量圈和光柱,语音有麦克风和声波;连投喂都做到了每一种食物一套自己的动画(不同食物飞进来的弧线、咀嚼节奏、崩出的碎屑和台词都不一样)。
五、作业管理 老师可以布置课堂作业和家庭作业,检查作业时双击学生卡片就等于"这个学生已完成、加一分",误操作有 3 秒撤销机会。作业进行中有醒目的可视化倒计时,可以一键投屏给全班看,剩余时间会随紧张程度从蓝变橙变红,并在"时间过半""只剩两成""时间到"三个节点自动语音提醒。作业结束后有完成率、批改情况和得分统计。
六、评价报告 系统自动为学生生成阶段评价报告,报告里的数据全部由系统统计(成绩、考勤、作业完成情况、积分变化、宠物状态),并附一段 AI 写的"老师寄语"。报告支持生成固定不变、带密码的分享链接,直接转发给家长即可查看。
一、整体架构与设计思路
前后端分离:前端是面向课堂大屏的 React 单页应用,只做交互呈现;后端用 Express 承载全部业务规则与积分口径,统一暴露 /api(28 个路由、215 个接口);数据层 MySQL 8.0(33 张表、18 个迁移);实时通信按班级分房间。设计四条主线:分数守恒,1 分同时等于余额、累计与宠物成长,全项目只有一份加分实现;口径只写一份,加分档位、倒计时阈值、道具分组抽成单一来源供多入口共用;数据同源,老师详情页、家长端与分享页复用同一份聚合;数字由系统算、文字才交给 AI。
二、不同模块使用的技术栈
前端 React 18 + TypeScript + Vite(119 个文件、约 3.9 万行),Zustand 管状态,Framer Motion 加 CSS 做动画,Recharts 画图表,axios 单例注入令牌并在 401 时跳登录。后端 Node.js + Express,mysql2 连接池、JWT 与 bcryptjs 认证、winston 日志。权限走分层中间件:验令牌、按角色、班主任与学科教师只能操作本班、年级组长只读、管理员二级密码令牌;家长与分享密码用 AES-256-GCM 加密存储,登录只认 bcrypt。资源层有 640 条真人语音与 29 个场景音效。部署在腾讯云,Nginx 反代接口与上传目录,全程 HTTPS;53 个自动化脚本做端到端验收。
三、我负责的模块和结果
我作为全栈开发与交付负责人,独立完成需求整理、数据库设计、前后端开发、素材制作到上线验收的全过程:设计 33 张表与 18 个迁移,实现 215 个接口(认证与五角色权限、班级与座位历史、积分、宠物养成与 9 类道具、作业成绩考勤、评价报告、家长端与分享链接、宠物小组),开发 12 个页面与 61 个组件(课堂卡片、投屏倒计时、道具动画等)。结果:系统已稳定上线,最近一轮 11 个提交一次上线成功,线上复验 40/40 加补测 19/19 全绿;宠物提醒通知、家长端通知页与座位历史等历史故障全部闭环修复。
四、我遇到的难点、坑以及解决方案
① 分享密码错返 401,被前端拦截器当成登录失效跳登录页 → 改 403。② 生产"部署了但行为没变":进程不响应 SIGTERM,旧的仍占端口用旧代码应答 → 重启加强制结束兜底。③ 服务器全局变量污染数据库口令,dotenv 不覆盖已存在变量 → 连错库。④ Nginx 正则优先于前缀规则 → 上传目录图片全 404;日志格式丢掉第二个参数 → 错误原因整段消失。⑤ mysql2 返回的小数是字符串 → 分数累加变拼接、统计算成 NaN;空值被当成 0 → 默认值失效。⑥ 早期迁移是 SQLite 方言 → 两张表线上从未建立、一用就 500;角色枚举缺家长角色 → 账号