温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系名片一、项目背景与意义教师资格证考试报考人数逐年增长考生群体以在校师范生、非师范转岗人员和在职备考者为主。传统备考方式依赖纸质教材、线下培训班和零散的网盘资料普遍存在三个问题一是学习内容分散知识点、真题、错题难以形成闭环二是缺乏学习进度跟踪考生很难判断自己处于什么水平三是缺少针对性练习刷题后无法定位薄弱章节。本项目基于 Spring Boot Vue3 构建一个教师资格证备考学习平台把课程学习、章节练习、真题模拟、错题本、学习计划与数据统计整合到同一套系统中帮助考生形成“学—练—测—复盘”的完整备考链路同时也可作为高校计算机专业毕业设计或课程设计的技术实践项目。二、系统功能需求分析2.1 用户角色划分考生用户浏览课程、观看视频、做章节练习与模拟考试、查看错题本与学习报告。教师/内容管理员维护课程章节、上传视频与讲义、录入题库、组卷与发布考试。系统管理员管理用户与角色权限、维护考试科目与知识点分类、查看平台运营数据。2.2 核心功能模块模块主要功能用户中心注册登录、个人信息、报考学段选择幼儿园/小学/中学、学习目标设置课程学习科目分类、章节列表、视频播放、讲义下载、学习进度记录题库练习章节练习、随机练习、真题模拟、答案解析、收藏题目考试测评限时组卷、自动交卷、客观题自动判分、成绩单与排名错题本错题自动归集、按知识点分类、重做与掌握度标记学习统计学习时长、做题量、正确率趋势、薄弱知识点分析后台管理课程管理、题库管理、试卷管理、用户管理、数据看板三、系统架构设计3.1 总体架构系统采用前后端分离架构。前端使用 Vue3 Vite 构建单页应用后端使用 Spring Boot 提供 RESTful 接口数据层使用 MySQL 存储业务数据Redis 缓存登录令牌与热点题目文件资源视频、讲义、头像存放在对象存储或本地文件服务中。flowchart TD A[Vue3 前端应用] --|HTTP/JSON| B[Nginx 反向代理] B -- C[Spring Boot 应用] C -- D[Service 业务层] D -- E[MyBatis-Plus 数据访问] E -- F[(MySQL)] D -- G[(Redis 缓存)] D -- H[对象存储/文件服务] C -- I[JWT 认证拦截器]3.2 技术选型层次技术说明前端框架Vue3 Vite组合式 API构建速度快UI 组件库Element Plus后台管理与表单页面快速搭建状态管理Pinia管理用户信息、学习进度等全局状态路由Vue Router路由守卫控制登录与角色权限网络请求Axios统一封装请求拦截与错误处理后端框架Spring Boot 3.x自动装配、内嵌 Tomcat持久层MyBatis-Plus简化 CRUD 与分页查询数据库MySQL 8.0业务数据存储缓存RedisToken、验证码、热点数据缓存认证Spring Security JWT无状态登录与接口鉴权四、数据库设计围绕“用户—课程—题库—考试—记录”五条主线设计核心表主要表结构如下表名说明关键字段sys_user用户表id、username、password、role、exam_level、create_timecourse课程表id、title、subject_id、cover、descriptioncourse_chapter课程章节表id、course_id、title、video_url、duration、sortquestion题目表id、subject_id、knowledge_id、type、content、options、answer、analysisexam_paper试卷表id、title、total_score、duration、statusexam_record考试记录表id、user_id、paper_id、score、start_time、submit_timeanswer_record答题明细表id、record_id、question_id、user_answer、is_correctstudy_progress学习进度表id、user_id、chapter_id、progress、last_timewrong_book错题本表id、user_id、question_id、wrong_count、mastered题目表通过type字段区分单选、多选、判断和简答选项统一以 JSON 字符串存储便于扩展不同题型答题明细表与考试记录表通过record_id关联支撑成绩单与错题归集。五、后端核心实现5.1 项目结构teacher-exam-server ├── src/main/java/com/example/exam │ ├── common # 统一响应、异常处理、常量 │ ├── config # Security、Redis、MyBatis-Plus 配置 │ ├── controller # 接口层 │ ├── service # 业务层 │ ├── mapper # 数据访问层 │ ├── entity # 实体类 │ └── dto # 请求/响应对象 └── src/main/resources ├── application.yml └── mapper # XML 映射文件5.2 统一响应与全局异常处理Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.setCode(200); r.setMessage(success); r.setData(data); return r; } public static T ResultT fail(String message) { ResultT r new Result(); r.setCode(500); r.setMessage(message); return r; } }RestControllerAdvice public class GlobalExceptionHandler { ExceptionHandler(BusinessException.class) public ResultVoid handleBusiness(BusinessException e) { return Result.fail(e.getMessage()); } ExceptionHandler(Exception.class) public ResultVoid handleException(Exception e) { log.error(系统异常, e); return Result.fail(系统繁忙请稍后重试); } }5.3 JWT 登录认证Service RequiredArgsConstructor public class AuthService { private final UserMapper userMapper; private final JwtUtil jwtUtil; public LoginVO login(LoginDTO dto) { SysUser user userMapper.selectOne( new LambdaQueryWrapperSysUser() .eq(SysUser::getUsername, dto.getUsername())); if (user null || !BCrypt.checkpw(dto.getPassword(), user.getPassword())) { throw new BusinessException(用户名或密码错误); } String token jwtUtil.generateToken(user.getId(), user.getRole()); LoginVO vo new LoginVO(); vo.setToken(token); vo.setUsername(user.getUsername()); vo.setRole(user.getRole()); return vo; } }5.4 考试交卷与自动判分交卷时先校验考试状态再逐题比对答案客观题自动判分主观题标记为待批阅最后汇总成绩并写入错题本。Transactional(rollbackFor Exception.class) public ExamResultVO submit(Long recordId, ListAnswerDTO answers) { ExamRecord record examRecordMapper.selectById(recordId); if (record null || record.getSubmitTime() ! null) { throw new BusinessException(考试记录不存在或已交卷); } int correctCount 0; int totalScore 0; for (AnswerDTO dto : answers) { Question question questionMapper.selectById(dto.getQuestionId()); boolean correct question.getAnswer().equalsIgnoreCase(dto.getUserAnswer()); if (correct) { correctCount; totalScore question.getScore(); } else { wrongBookService.saveWrong(record.getUserId(), question.getId()); } AnswerRecord ar new AnswerRecord(); ar.setRecordId(recordId); ar.setQuestionId(question.getId()); ar.setUserAnswer(dto.getUserAnswer()); ar.setIsCorrect(correct); answerRecordMapper.insert(ar); } record.setScore(totalScore); record.setSubmitTime(LocalDateTime.now()); examRecordMapper.updateById(record); ExamResultVO vo new ExamResultVO(); vo.setScore(totalScore); vo.setCorrectCount(correctCount); vo.setTotalCount(answers.size()); return vo; }六、前端核心实现6.1 请求封装与路由守卫import axios from axios import { ElMessage } from element-plus import router from /router const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( res { const { code, message, data } res.data if (code 200) return data ElMessage.error(message || 请求失败) return Promise.reject(new Error(message)) }, err { if (err.response?.status 401) { localStorage.removeItem(token) router.push(/login) } return Promise.reject(err) } ) export default request6.2 在线答题页面答题页使用 Pinia 保存当前试卷与作答状态支持题目切换、答题卡跳转和倒计时自动交卷。template div classexam-page div classquestion-area h3{{ currentIndex 1 }}. {{ currentQuestion.content }}/h3 el-radio-group v-modelanswers[currentQuestion.id] el-radio v-for(item, key) in currentQuestion.options :keykey :labelkey {{ key }}. {{ item }}/el-radio /el-radio-group /div div classanswer-card el-button v-for(q, i) in questions :keyq.id :typeanswers[q.id] ? primary : default clickcurrentIndex i {{ i 1 }}/el-button /div /div /template script setup import { ref, computed, onMounted } from vue import { useExamStore } from /stores/exam const examStore useExamStore() const questions ref([]) const currentIndex ref(0) const answers ref({}) const currentQuestion computed(() questions.value[currentIndex.value]) onMounted(async () { questions.value await examStore.loadPaper() }) /script七、关键难点与解决方案考试防作弊前端记录切屏次数并上报后端在交卷时校验考试时长与切屏记录超限标记异常。自动交卷一致性使用 Redis 存储考试剩余时间交卷接口做幂等校验避免重复提交产生多条记录。错题归集性能错题本按用户与题目建立唯一索引采用“存在则更新次数、不存在则插入”的方式避免重复数据。学习进度统计章节进度按视频播放百分比异步上报前端节流后端合并更新减少写库压力。题库扩展性题型通过枚举与策略模式处理判分逻辑新增题型只需实现对应判分策略。八、系统测试与部署测试阶段重点覆盖登录鉴权、组卷逻辑、交卷判分和错题归集四类场景使用 Postman 与 JUnit 分别完成接口测试和单元测试。部署时前端执行npm run build生成静态资源交由 Nginx 托管并反向代理/api到后端后端打包为 jar通过java -jar或 Docker 运行MySQL 与 Redis 使用容器编排统一管理。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/teacher_exam?useUnicodetruecharacterEncodingutf8 username: root password: 123456 data: redis: host: localhost port: 6379 mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true九、总结与展望本文围绕教师资格证备考场景完成了基于 Spring Boot Vue3 的学习平台的需求分析、架构设计、数据库设计与核心功能实现。系统通过课程学习、题库练习、模拟考试与错题本的联动帮助考生建立完整的备考闭环。后续可从三个方向继续完善一是引入推荐算法根据错题分布推荐薄弱知识点课程二是增加移动端适配或小程序端方便碎片化学习三是接入大模型能力提供主观题智能批阅与个性化学习建议。