做这种Spring Boot在线远程考试系统我至少跑过三四个不同版本的项目前后端分离架构下的在线考试系统说到底就是一套信息管理流程的线上化管理员维护考生和试题考生参加考试系统自动判分最后生成成绩报表。标题里说SpringBoot后端Vue前端MySQL【可直接运行】这个描述我深有体会——真正的坑往往不在写代码而在把整个环境拉通、让项目在你本机一次跑起来的过程。这篇文章我就以一套完整可运行的在线考试系统为样本把项目拆解、核心设计、运行部署、排错经验一次讲透。提示文中涉及的具体账号、项目代号均为本地模拟数据仅用于演示流程。1. 项目概述与技术选型解析1.1 这套考试系统到底在解决什么问题在线考试系统的核心业务并不复杂但环节多、状态多、权限划分清楚。从业务上讲它要解决三类角色的诉求管理员管理学生信息、维护题库、创建考试、查看成绩统计。管理员最关心的不是单场考试而是整体数据比如某门课程的平均分、各分数段人数分布、某道题的正确率。学生考生查看待参加的考试列表在有效时间内进入考试并答题提交后立即看到客观题得分。学生最怕的是到点没提交、答案丢失、刷新后考试状态错乱。系统本身要保证考试唯一性、答题记录可追溯、判分规则一致。同一场考试同一考生不允许重复提交这是在线考试系统的底线约束。所以你会发现这套系统表面上是考试实质上是一个围绕考试这个核心场景的权限管理数据管理流程状态机的系统。理解了这一点后面看代码和表结构就有主线了。在线考试相比传统纸质考试最大的价值在于自动判分和数据沉淀。选择题、判断题这类客观题可以被引擎实时判分主观题虽然无法全自动但系统可以预留教师批改入口。这也是为什么这类项目在毕设和企业内部培训场景里都非常常见。1.2 技术选型的现实逻辑为什么偏偏是这三件套SpringBoot Vue MySQL这个组合在近几年的Java全栈项目里几乎成了标配这不是偶然的而是每一层都在做自己最擅长的事。SpringBoot负责后端几个核心优势内嵌Tomcat不需要额外部署独立容器打一个Jar包就能跑这对项目要能直接运行来说太重要了。自动装配机制省掉了大量XML配置Spring MVC、数据源、事务管理都能通过注解和约定完成。生态成熟MyBatis-Plus、Spring Security、JWT这些都能快速集成。Vue负责前端选择它的理由同样明确组件化开发可以把登录页、考试页、成绩面板拆成独立组件互不干扰。Element UI这类组件库提供了表格、表单、弹窗、时间选择器等现成组件后台管理界面能快速搭建出来项目落地速度快。MySQL负责数据持久化这个不用多说关系型数据模型天然适合考试系统这种有强约束关联的场景。考生、试题、答卷、成绩之间都是明确的关联关系用外键和索引就能保证数据完整性。MySQL部署简单文档多遇到问题搜一下基本都有答案。这三者组合还有一个隐蔽但实在的优势社区案例极多。学生做毕设、工程师做内部系统、培训机构做教学案例几乎都在用这套组合意味着你遇到的大多数问题别人都已经踩过并留下了解决方案。2. 数据库设计考试系统的地基2.1 核心表结构设计思路数据库设计决定了整个系统的上限。我在设计这套考试系统表结构时遵循了一个核心原则业务上要什么表上就要有什么业务流程里存在什么状态字段上就要有对应状态位。用户表要能覆盖管理员和考生两种角色考试表要能表达考试的基本信息、时间窗口和状态试题表要能区分题型、存储选项与正确答案答卷表要记录考生作答的全过程。-- 用户表 CREATE TABLE user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(64) NOT NULL UNIQUE, password VARCHAR(128) NOT NULL, role TINYINT DEFAULT 0, -- 0:学生 1:管理员 real_name VARCHAR(64), student_no VARCHAR(64), created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 题库表 CREATE TABLE question ( id BIGINT PRIMARY KEY AUTO_INCREMENT, subject VARCHAR(64), question_type TINYINT, -- 1单选 2多选 3判断 content TEXT, option_a VARCHAR(255), option_b VARCHAR(255), option_c VARCHAR(255), option_d VARCHAR(255), answer VARCHAR(16), score INT DEFAULT 5, analysis TEXT ); -- 考试表 CREATE TABLE exam ( id BIGINT PRIMARY KEY AUTO_INCREMENT, exam_name VARCHAR(128), subject VARCHAR(64), duration INT, -- 考试时长单位分钟 start_time DATETIME, end_time DATETIME, total_score INT, status TINYINT, -- 0未开始 1进行中 2已结束 created_at DATETIME ); -- 答卷表 CREATE TABLE student_exam ( id BIGINT PRIMARY KEY AUTO_INCREMENT, exam_id BIGINT, user_id BIGINT, start_time DATETIME, submit_time DATETIME, score INT, status TINYINT -- 0考试中 1已提交 ); -- 答题明细表 CREATE TABLE answer_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, exam_id BIGINT, user_id BIGINT, question_id BIGINT, student_answer VARCHAR(16), is_correct TINYINT, score INT );表设计里有几个细节很容易被忽略但实际开发中非常关键答案字段用VARCHAR而不是TEXT。选择题答案也就是ABCDABDTF这样的短字符串VARCHAR(16)足够还能建索引加速查询。答题明细表和答卷表分离。有的设计会图省事把答案直接存成JSON塞在答卷表里短时间看没问题但你想统计某道题的正确率时就傻眼了SQL没法直接解析JSON。所有时间字段都存DATETIME。考试系统对时间非常敏感开始时间、截止时间、提交时间缺一不可。这是防作弊逻辑的基础数据。2.2 表关系与数据一致性约束表关系上答题明细表(answer_record)是全系统数据量最大、关系最复杂的表因为一场考试涉及多个考生每个考生涉及多道题目如果直接设计成一对多的主表加明细表结构就是典型的主从表模式student_exam是主表answer_record是从表从表通过exam_iduser_id关联主表。一致性约束有两个层面必须处理第一考试唯一性约束。同一考生在同一场考试中只能有一条答卷记录不能让用户刷新一下页面就产生两条记录。用数据库层面做唯一索引是兜底方案ALTER TABLE student_exam ADD UNIQUE KEY uk_exam_user (exam_id, user_id);第二判分过程的原子性。考生提交答卷时系统要做三件事计算客观题得分、更新答卷总分、标记答卷状态为已提交。这三件事要么全成功要么全失败所以判分逻辑必须在一个事务里完成。我在SpringBoot中用Transactional注解控制一旦判分过程中出现异常就整体回滚避免出现总分算了但提交状态没更新这种脏数据。数据一致性还有一个容易被忽视的点考试时间窗口校验。并不是所有提交操作都被允许后端必须校验当前时间是否在考试开始与结束时间之间。我第一次实现时只在提交时校验了一次后来发现考生可以提前进入答完题后一直等到考试快结束才提交甚至可以在考试结束后通过回放页面触发提交。所以正确做法是进入考试、答题过程中定时同步、提交答卷三个节点都要做时间校验具体到我这里是进入和提交两个关键入口拦截。3. 后端接口设计与实现3.1 项目结构与启动入口后端用Maven构建标准的分层结构Controller接收请求、Service处理业务、Mapper操作数据库。我第一次搭这个项目时最容易犯的错误是把所有逻辑都堆在Controller里结果接口方法几百行后来体会到一个原则Controller只干两件事——接收参数、返回结果业务判断和数据处理全部下沉到Service。项目结构大致如下exam-server/ ├── pom.xml ├── src/main/java/com/example/exam/ │ ├── ExamApplication.java # 启动类 │ ├── controller/ # 接口层 │ │ ├── AuthController.java # 登录、注册 │ │ ├── ExamController.java # 考试管理 │ │ ├── QuestionController.java # 题库管理 │ │ └── StudentExamController.java # 答题、提交 │ ├── service/ # 业务层 │ ├── mapper/ # MyBatis-Plus Mapper接口 │ ├── entity/ # 数据库实体 │ ├── config/ # 配置类CORS、拦截器、MyBatis-Plus分页 │ └── utils/ # JWT工具类、统一返回结果 └── src/main/resources/ ├── application.yml └── sql/init.sql # 初始化脚本启动类本身没有特殊之处标准SpringBoot写法。真正的关键配置在application.yml里下面这份配置是我实际项目里稳定运行过的版本数据库连接、端口、日志都做了合理设置server: port: 8081 spring: datasource: url: jdbc:mysql://localhost:3306/exam_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis-plus: mapper-locations: classpath*:/mapper/**/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl这里有一个让我踩过坑的地方useSSLfalse这个参数必须显式加上。MySQL 8.0以上版本默认使用SSL连接如果不加某些JDBC驱动版本会提示SSL连接错误导致数据源初始化失败。还有serverTimezone也务必指定不然应用服务器和数据库服务器时区不一致查询日期数据会有偏差。3.2 登录认证与权限控制实现在线考试系统的接口不是对所有人开放的考生只能看自己的考试管理员只能管理数据。这类前后端分离项目最常用的是JWT认证方案我自己实现时也没有引入Spring Security这种重框架而是直接用JWT加拦截器简单直接且足够用。核心思路是这样的用户登录时后端校验用户名密码校验通过后使用JWT工具类生成一个TokenToken中封装用户ID、用户名、角色。前端拿到Token后保存在localStorage中每次请求在HTTP请求头里带上Authorization: Bearer token。后端写一个拦截器拦截除登录、注册以外的所有接口从请求头取Token解析成功则放行失败则返回401状态码。JWT生成和解析的代码核心如下依赖用的jjwt库public String generateToken(User user) { return Jwts.builder() .setSubject(user.getUsername()) .claim(userId, user.getId()) .claim(role, user.getRole()) .setExpiration(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 24)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); }拦截器里要注意一个处理解析Token失败时捕获异常并返回统一格式的JSON而不是直接抛出去。不少初学者直接让异常往上抛最后前端收到的是一堆错误堆栈排查起来很痛苦。管理员权限这块我采用的方案比较简单粗暴——拦截器解析出Token后把用户ID和角色放入Request域中Controller中通过自定义注解RequireRole(admin)配合一个AOP切面来做角色校验。这样写的好处是权限逻辑与业务逻辑解耦新增接口时只要加一个注解就能控制访问范围。如果你只是做项目练手直接用拦截器判断角色也行代码量更少。3.3 核心接口逻辑实现考试系统最核心的接口有三个创建考试、进入考试、提交答卷。这三个接口写好了系统就完成了一半。创建考试接口的逻辑层层递进接收前端上传的考试信息和题目ID列表。校验考试时间范围合法性比如开始时间不能晚于结束时间考试时长不能为负数。根据题目ID列表从数据库查询题目对象计算总分。插入考试记录并把题目关联关系保存到exam_question中间表。这里需要说明表单提交的一个设计取舍考试与题目的关联关系。我第一版方案是把题目ID列表直接塞在exam表里用逗号分隔结果后面做编辑考试功能时痛苦的想骂人要拆分字符串再重新拼接还容易出错。第二版改成了中间表方案CREATE TABLE exam_question ( id BIGINT PRIMARY KEY AUTO_INCREMENT, exam_id BIGINT, question_id BIGINT );这才是正确思路。以后想统计某场考试哪些题参与率最高一条SQL关联就能查出来根本不用解析字符串。进入考试接口要做的事情比较多它需要读取考试信息校验当前时间是否在考试窗口内检查该考生是否已经提交过如果没提交过则创建一条student_exam记录最后返回给前端的就是考试信息和题目列表。题目列表这里有一个安全细节绝对不能把正确答案字段返回给前端否则考生看一眼接口响应就能知道答案。实际做法是SQL查询时直接排除answer和analysis字段或者用VO对象单独封装。提交答卷接口是整个系统最复杂的一个我拆成四步实现根据考试ID和用户ID查出答卷记录校验状态如果已提交直接拒绝防止重复提交。拉起所有题目获取正确答案与考生的答案比对判分。批量插入答题明细记录一个考生一场考试对应多条明细。更新答卷表总分和提交状态整个方法用事务包裹。判分逻辑里多选题的处理要留个心眼多选正确答案必须完全匹配才能得分少选、错选都不算分。这是业务决策不同系统的规则可能不同但必须前后端统一口径前端提示用户规则后端按规则执行不能出现前端说少选也给分、后端判错的情况。4. 前端Vue实现要点4.1 前端项目结构与路由权限控制前端部分我用的是Vue2加Element UI这也是在线考试这类后台管理系统最成熟的组合。Vue3固然新但Element UI的生态沉淀和排错资料更多初学者上手更稳。项目结构exam-web/ ├── public/ ├── src/ │ ├── api/ # 接口请求封装 │ ├── assets/ │ ├── components/ # 公共组件 │ ├── router/index.js # 路由配置 │ ├── store/ # Vuex状态管理 │ ├── views/ │ │ ├── login.vue │ │ ├── admin/ # 管理员页面 │ │ │ ├── dashboard.vue │ │ │ ├── questionManage.vue │ │ │ ├── examManage.vue │ │ │ └── studentManage.vue │ │ └── student/ # 学生页面 │ │ ├── examList.vue │ │ └── takeExam.vue │ ├── utils/ │ └── main.js └── vue.config.js路由权限这块我第一版做得很糟糕——光在router.js里写了一遍路由完全没有控制谁可以访问什么页面。后来意识到前端不管后端照样能限制接口但用户体验会非常割裂学生手动输个URL就能打开管理页面然后看到一堆加载错误。所以正确做法是路由守卫基于用户角色控制页面访问router.beforeEach((to, from, next) { const token localStorage.getItem(token); const role localStorage.getItem(role); if (!token to.path ! /login) { next(/login); } else if (token to.meta.role to.meta.role ! role) { next(/401); } else { next(); } });同时前端路由守卫只是用户体验优化真正的安全底线在后端拦截器。这个观点我反复在团队里强调因为前端代码完全暴露在用户手里有人能绕过守卫直接调接口后端必须自己把门守住。4.2 考试页面的状态管理与倒计时处理考试页面是前端最核心的页面它的核心难点在于状态的持续性。考生在答题过程中可能刷新页面、断网重连如果刷新后答案全没了那系统就是失败的。我用Vuex配合localStorage做了双重持久化进入考试时拉取题目列表一次性把答案对象存到Vuex中。考生每选择一题答案立即更新Vuex同时写入localStorage缓存。刷新页面时从localStorage恢复答题状态并调用后端接口获取剩余时间。倒计时处理是整个页面最容易出bug的地方。我第一版用setInterval每秒钟递减剩余时间结果考生切到其他标签页再回来浏览器为了省电会降低定时器精度倒计时就会出现漂移。后来改成了接口时间戳加本地计算的方案// 后端返回deadline时间戳 const deadline new Date(res.data.deadline).getTime(); // 剩余时间 deadline - 当前时间 const remain Math.max(0, Math.floor((deadline - Date.now()) / 1000));每秒钟刷新一次剩余时间最后5秒时前端自动弹出提示时间归零则自动触发提交。这样不管定时器怎么漂移只要本地时钟和服务器时间大致同步剩余时间计算就是准的。如果还不放心拿到服务器返回deadline时同时读取服务器返回的当前时间用deadline减去服务器当前时间得到剩余再减去本地流逝时间就能消除时钟偏差。4.3 接口请求封装与列表页数据展示前端接口请求统一用axios封装好处是可以在拦截器里统一处理Token携带和错误响应。我的封装思路如下service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }); service.interceptors.response.use( response { const res response.data; if (res.code 401) { localStorage.clear(); router.push(/login); } return res; }, error { ElMessage.error(error.response?.data?.message || 请求失败); return Promise.reject(error); } );统一封装的价值在于你不需要在每一个页面重复写Token获取、错误弹窗这些逻辑只管调用接口就行。实际项目中这类重复劳动是最消耗开发效率的。管理端页面的数据展示用的全是Element UI组件。题目管理页面用el-table展示题目列表用el-dialog做新增和编辑弹窗用el-select做科目筛选考试管理页面用el-card展示考试卡片用el-steps展示考试状态。权限数据管理页面则用el-tabs区分不同角色操作按钮使用el-button的type属性区分主次。还有成绩统计页面我最开始用的是el-table加浏览器原生数字结果看起来干巴巴的。后来集成了ECharts用饼图展示各分数段占比用柱状图展示各科目平均分对比同一个组件里的数据及时刷新整体效果好了几个档次。对这类管理系统来说图表不是炫技是帮管理员快速做决策的刚需功能。5. 环境搭建与本地运行全流程5.1 基础环境准备清单拿到源码要可直接运行环境版本必须匹配否则再好的代码也跑不起来。我基于最常见的情况整理了一份环境清单工具推荐版本注意事项JDK1.8太新的JDK 17可能遇到兼容问题建议就用8MySQL5.7或8.08.0以上记得带时区参数Maven3.6本地没有可用IDEA内置Node.js14~16Vue2项目在Node 18以上有时构建报错开发工具IntelliJ IDEA VSCode后端和前端分开打开安装顺序建议先装JDK和MySQL再装MavenNode.js最后装。安装期间要把系统环境变量配好java -version、mvn -version、node -v这几个命令在终端里能正常输出版本说明环境基本没问题。5.2 数据库初始化与后端配置数据库初始化是项目能否运行的关键步骤步骤如下打开MySQL命令行或Navicat创建一个数据库字符集选utf8mb4。执行项目里的init.sql脚本导入表结构和初始数据。查看user表确认管理员账号已存在。这里有几个容易踩的问题如果SQL脚本里有中文注释MySQL客户端连接字符串必须指定characterEncodingutf8不然插入中文数据会乱码。初始密码不要用明文可以在SQL里直接写入BCrypt加密后的密文后端登录校验时用BCryptPasswordEncoder匹配。建立数据库之后检查MySQL服务是否允许远程连接。本地跑通常不需要但如果要用另一台机器访问数据库就要看3306端口是否放行。后端配置在application.yml里核心就是修改数据库用户名密码。这里引入一个我认为非常必要的习惯不要用root用户跑业务系统。单独创建一个考试系统专用账号权限只限制到exam_db这一个库即使前端代码泄露也不会影响数据库里其他库的安全。启动后端的命令很简单在项目根目录执行mvn spring-boot:run或者先打包再运行mvn clean package -DskipTests java -jar target/exam-server.jar5.3 前端代理配置与启动验证前端和后端的端口不同浏览器直接访问前端页面会出现跨域问题。跨域问题有两个常规解决方案我建议优先用前端代理方式修改vue.config.jsmodule.exports { devServer: { port: 8088, proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } };这样配置后浏览器发请求到/api/login开发服务器会帮我们把请求转发到后端/login因为代理转发发生在服务端不经过浏览器的同源策略所以不会触发跨域错误。我在后端同时也开启了CORS配置双保险应对不同场景Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOriginPattern(*); config.addAllowedHeader(*); config.addAllowedMethod(*); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }启动前端npm install npm run serve浏览器访问http://localhost:8088看到登录页就说明前端起来了。输入管理员账号登录能进到管理后台再创建一个考试、添加几道题目最后切换到考生账号参加一次完整的考试整个链路就走通了。6. 常见问题与排错经验实录6.1 启动失败类问题快查这类问题我遇到的频率最高基本都能在几分钟内定位。端口被占用后端启动报Port 8081 was already in use。Windows下先看是谁占了端口netstat -ano | findstr 8081拿到PID后在任务管理器里找到对应进程结束掉或者直接改application.yml里的端口也行。MySQL连接失败启动日志报Communications link failure或者Access denied for user。第一步确认MySQL服务确实在运行Windows服务管理里查看MySQL服务状态第二步检查账号密码是否对上命令行里用同样的账号连一下试试第三步检查URL参数尤其是serverTimezone没配的话8.0以上驱动几乎必报时区错误第四步如果MySQL在Docker里跑要确认端口映射做到了宿主机3306。Maven依赖下载失败如果pom.xml里的依赖一直报红多半是网络问题导致Central仓库连接不稳定。可以检查IDEA里Maven的配置也可以切换到国内的镜像仓库在settings.xml里把镜像地址指过去。6.2 数据库与接口数据问题中文乱码数据库表已经建好了但插入的中文在数据显示时是一堆问号。排查顺序是先看数据库连接URL有没有characterEncodingutf8再看MySQL服务器默认字符集是不是utf8最后看表结构的字符集。表建错了就ALTER TABLE xxx CONVERT TO CHARACTER SET utf8mb4改表比改库成本低。明明有数据但接口返回空大概率是MyBatis-Plus的驼峰映射问题。数据库字段是student_no实体类属性是studentNo如果map-underscore-to-camel-case没开启查询结果就映射不上。这个配置在application.yml里加上就好mybatis-plus: configuration: map-underscore-to-camel-case: true接口返回的数据里时间是Long类型时间戳Jackson默认序列化Date字段不一定返回你想要的格式。我在application.yml里配置了spring.jackson.date-format时间字段就统一以yyyy-MM-dd HH:mm:ss格式输出了对接前端展示省了很多事。6.3 考试流程异常排查考生提交后成绩没有刷新这种问题先看日志有没有异常多半是判分时出现了SQL错误导致事务回滚。再看答辩明细表有没有记录如果明细表有记录但主表分数没更新说明主表更新SQL执行了但没有提交。检查事务配置确认判分方法上有Transactional注解。前端显示考试已结束但后端还能接收提交这是典型的前后端状态不同步。原因一般是后端时间校验只判断了当前时间是否晚于结束时间没有校验考试是否真的存在于进行中状态。我这里要求校验双条件时间窗口加状态字段两者都通过才允许提交。同样一场考试同一个考生被创建了多条答卷这是并发问题。用户在页面快速点击开始考试前端发了多次请求后端没有做好幂等控制。我加了唯一索引兜底同时进入考试接口里增加查询判断如果当前用户已经存在进行中的答卷直接返回已有数据不再重复插入。7. 实操中的几点体会这套系统我前后完整跑了很多遍印象最深的是一次部署到测试环境时遇到Linux下访问数据库报Table doesnt exist排查了半天发现是Linux系统表名大小写敏感而建表SQL里写的是大写结果统一用大写建表并把MySQL配置设成lower_case_table_names1问题就消失了。这种跨环境的小坑Windows上根本发现不了。另外建议大家拿到源码后不要急着改代码第一遍先原封不动跑起来把业务流走通管理员建考、添加题目、考生考试、提交看分这一圈下来你才会真正理解每个表是干什么用的、每个接口被哪些页面调用。第二遍再动手改比如增加一个题型、加一个成绩导出功能这时候你已经知道模块边界在哪里。很多初学者一上来就想着改结果引入了一堆问题定位半天都不知道是原来代码的问题还是自己改出来的问题。在线考试系统的价值不只是考试本身而在于它把一个真实业务系统的所有典型要素串了起来用户认证、权限模型、主从表设计、事务管理、前端状态同步、联调排错。把这套系统吃透你后续去做任何信息管理系统比如课程管理系统、设备管理系统核心能力都是可以直接迁移的。希望这篇拆解能帮你少走我在项目里走过的那几条弯路。