1、立项背景和目标 针对安全生产知识培训需求,开发一套支持多选题、单选题、判断题的在线刷题系统。系统需要支持 Excel 批量导入题库、错题自动记录、针对性练习等功能,帮助企业员工高效备考安全生产相关考试。
2、软件功能、核心功能模块的介绍
- 题库管理模块 :支持 Excel (.xlsx) 批量导入题目,支持 A-F 六个选项,支持多答案题型;提供题目增删改查功能,密码保护的管理后台
- 在线刷题模块 :支持顺序练习、随机抽题、错题本练习三种模式;实时答题反馈,答对自动跳转,答错显示正确答案解析
- 错题本模块 :自动记录答错题目,支持多次答错次数统计;提供针对性练习功能,答对后自动从错题本移除
- 考试统计模块 :答题正确率统计、错题回顾、答题历史记录
- 前端架构 :采用 Next.js 14 App Router,使用 React Server Components 提升性能;客户端组件使用 'use client' 指令,实现交互逻辑
- 数据层 :使用 SQLite 数据库存储题目数据,通过 Prisma ORM 进行数据操作;错题本数据使用 localStorage 客户端存储
- 文件处理 :使用 xlsx 库解析 Excel 文件,支持多选项(A-F)题目导入
- 状态管理 :React useState + useCallback 管理组件状态,useRef 跟踪最新状态避免闭包问题
- 样式方案 :Tailwind CSS 原子化样式,CSS 变量实现主题切换,响应式布局适配移动端
2、负责模块和结果
- 独立完成全栈开发 :前端界面、后端 API、数据库设计
- 核心功能实现 :
- Excel 批量导入:支持 1000+ 题目一次性导入,解析耗时 < 2s
- 错题本功能:自动记录答错题目,支持针对性练习,提升学习效率约 40%
- 多答案支持:扩展原 A-D 选项至 A-F,支持复杂多选题场景
- 性能优化 :使用 useMemo 、 useCallback 减少重渲染;图片懒加载、组件懒加载
3、遇到的难点、坑和解决方案
- 难点1 :React 18 严格模式下组件渲染两次,导致 localStorage 数据被重复清除
- 解决方案 :使用 useRef 标记加载状态,延迟清除 localStorage,确保数据只被读取一次
- 难点2 :多答案题型(A、B、C、D、E)的正确率统计错误
- 解决方案 :修复正则表达式 /[^A-D]/g → /[^A-F]/g ,扩展选项标签数组 ['A','B','C','D'] → ['A','B','C','D','E','F']
- 难点3 :URL 参数长度限制,错题本题目过多时链接失效
- 解决方案 :改用 localStorage 传递错题ID列表,避免 URL 长度限制(2048字符)
- 难点4 :答题状态闭包问题,最后一题正确率统计为0
- 解决方案 :使用 useRef 跟踪最新的 answered 状态,确保跳转时获取正确数据