企业官网建设流程全解析

简介：这是一套面向Java方向毕业设计与课程设计场景的在线考试系统完整源码包，基于SpringBoot+MyBatis后端与Vue前端、MySQL数据库构建，适合计算机专业学生、初学者及需要快速搭建考试平台的开发者参考。系统分为前台与后台：前台支持学生登录、查看考试信息、浏览历史记录与在线答题，考试模块可随机组卷并自动评分；后台提供管理员登录及学生、教师、班级、试题、试卷、考试与记录等管理功能，覆盖考试业务全流程。压缩包共244个文件，约8.67MB，以47个Java源码、19个Vue组件、33个HTML页面、32个JS脚本及29个SCSS样式文件为主体，另含SQL数据库脚本、说明文档、LW文档与项目配置资源，结构清晰便于二次开发。目前已有55人学习下载，可作为毕业设计选题、课程设计作业或SpringBoot+Vue全栈练手项目，帮助读者快速理解前后端分离架构与考试系统核心逻辑。

1. 在线考试系统源码拆解：一套 SpringBoot+Vue+MySQL 的毕设能跑多远

每年到了毕设季，问得最多的一类问题就是：拿到一套「在线考试系统源码（SpringBoot+Vue+MySQL+说明文档+LW）」的压缩包，到底能不能直接跑起来、能不能过答辩、能不能改成自己的东西。我见过太多人把 zip 解压完，IDEA 一打开满屏红，前端 npm install 卡在 node-sass 上，MySQL 导进去中文全是问号，最后三天熬夜改到怀疑人生。这套技术栈本身不复杂，SpringBoot 做后端接口、Vue 做前后端分离、MySQL 存题库和考试记录，是当前 Java 毕业设计里最主流也最稳的组合。它适合两类人：一类是想快速跑通一个完整业务闭环、把精力放在论文和答辩上的同学；另一类是想借这套代码把 SpringBoot 和 Vue 的工程化流程真正走一遍的 Java 新手。下面我按「先跑通、再拆解、后改造」的顺序，把这条路讲清楚。

2. 环境准备：把 SpringBoot、Vue、MySQL 三件套装到能互相说话

2.1 版本选型为什么比你想的更致命

在线考试系统源码翻车，八成不是代码逻辑问题，而是版本对不上。SpringBoot 版本太高会连带 JDK、MyBatis、MySQL 驱动一起出问题，这是血泪经验。我一般建议毕设场景锁死这套组合：JDK 8 或 JDK 11、SpringBoot 2.7.x、MySQL 5.7 或 8.0、Node.js 14 或 16。原因很直接——网上能搜到的教程、报错解决方案、依赖坐标，绝大多数都是围绕这几个版本写的。你一旦上 SpringBoot 3.x，JDK 最低 17，javax全变jakarta，老代码里的@Resource、拦截器配置、MyBatis 版本全要动，对毕设来说纯属给自己加难度。

MySQL 这边，5.7 和 8.0 的差别主要在驱动类名和连接串参数。5.7 用com.mysql.jdbc.Driver，8.0 用com.mysql.cj.jdbc.Driver，而且 8.0 必须带时区参数，否则启动就报时区错误。下面是我常用的application.yml数据库配置，直接抄：

spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/exam_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true username: root password: 你的密码

serverTimezone=Asia/Shanghai是 8.0 的后悔药，不加会报The server time zone value is unrecognized。characterEncoding=utf8决定中文能不能正常存，useSSL=false避免本地连接时的证书警告。这几个参数看着小，缺一个就是启动失败。

2.2 后端跑通的最小步骤

拿到源码后，先别急着改代码，按这个顺序走：

第一步，用 IDEA 以 Maven 项目导入后端目录，等依赖下载完。如果卡在某个依赖上，检查pom.xml里的 SpringBoot 父版本，改成2.7.18这种稳定版。

第二步，在 MySQL 里建库，字符集选utf8mb4，然后导入源码里的.sql文件。导入命令：

mysql -u root -p exam_system < exam_system.sql

第三步，改application.yml里的数据库账号密码，然后启动主类。看到控制台打印出 Tomcat 端口和启动耗时，说明后端活了。

第四步，浏览器访问http://localhost:8080或源码里配置的接口前缀，看有没有返回。如果 404，检查context-path配置；如果 500，看控制台堆栈，多半是数据库连不上或表字段对不上。

2.3 前端 Vue 跑通与联调

前端目录通常是独立的，进去先看package.json里的依赖。Vue 2 和 Vue 3 的启动命令、目录结构差别很大，别混着用。常见做法是：

npm install npm run serve

如果npm install报 node-sass 编译错误，说明 Node 版本和 node-sass 不匹配。最省事的办法是换 Node 14，或者把 node-sass 换成 sass（dart-sass）。这一步卡住的人特别多，属于典型的环境玄学。

前端起来后，默认访问http://localhost:8081之类。这时候前端能打开，但接口请求可能跨域。源码里一般会在vue.config.js配代理，把/api转发到后端 8080。如果没配，你自己加：

devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } }

changeOrigin: true是解决跨域的关键，pathRewrite决定前端请求路径要不要去掉/api前缀。这两个参数配错，前端就是一直转圈或报 404。

3. 源码结构拆解：题库、考试、判分三条主线怎么串

3.1 后端分层与核心表设计

一套标准的在线考试系统，后端一般分 controller、service、mapper、entity 四层。核心表跑不出这几张：用户表、题库表、试卷表、考试记录表、答题详情表。题库表通常有题型字段（单选、多选、判断、简答），试卷表关联题目 ID 列表或单独建关联表。

我见过不少源码把题目直接以 JSON 字符串塞进试卷表的一个字段里，这种设计能跑，但后期统计正确率、按知识点抽题会很痛苦。如果你要改，建议拆成paper_question关联表，字段就三个：试卷 ID、题目 ID、分值。这样判分和统计都好做。

判分逻辑是考试系统的核心。客观题直接比对答案，主观题一般只存不判或简单关键词匹配。下面是一段典型的判分伪代码：

// 遍历考生答案，逐题比对 for (Answer ans : answerList) { Question q = questionMap.get(ans.getQuestionId()); if ("CHOICE".equals(q.getType())) { // 客观题：答案完全一致才得分 if (q.getCorrectAnswer().equals(ans.getContent())) { score += q.getScore(); } } else { // 主观题：标记待人工批阅 ans.setNeedManual(true); } }

这段逻辑的关键在于questionMap要提前查好，别在循环里查数据库，否则一场考试几十道题就是几十次查询，性能直接崩。参数上，q.getScore()是每题分值，ans.getContent()是考生提交的答案，比对前最好做 trim 和大小写统一。

3.2 前端路由与考试页面交互

Vue 这边的核心页面就几个：登录、题库管理、试卷管理、考试页、成绩页。考试页最复杂，要处理倒计时、题目切换、答案暂存、交卷。倒计时一般用setInterval，但要注意组件销毁时清掉，否则会内存泄漏。

答案暂存常见做法是存 Vuex 或 localStorage。我一般建议考试过程中存 Vuex，交卷时一次性提交，同时用 localStorage 做防刷新兜底。路由守卫要拦住未登录用户和已交卷用户，防止直接改 URL 进考试页。

3.3 前后端数据格式约定

前后端联调最容易扯皮的就是数据格式。统一用{ code, msg, data }这种结构，code 为 200 表示成功，其他表示失败。分页数据统一用{ total, list }。这个约定一旦定下来，前端封装一个 axios 拦截器，后端封装一个统一返回类，后面加功能就是复制粘贴。

4. 避坑与排查：在线考试系统跑不起来时先看这几条

4.1 启动报数据库连接失败

现象：SpringBoot 启动直接抛Communications link failure或Access denied。原因通常是 MySQL 没启动、端口不对、账号密码错、或者 8.0 没加时区参数。解决：先命令行mysql -u root -p能登进去，再核对application.yml的 url、username、password，8.0 务必带serverTimezone。

4.2 前端 npm install 卡死或报错

现象：卡在node-sass或chromedriver下载。原因：Node 版本过高、网络拉不到二进制包。解决：换 Node 14/16，或者配置 npm 镜像源，把 node-sass 替换成 sass。这一步没有技术含量，就是耗时间。

4.3 中文乱码

现象：数据库里中文显示问号，或前端页面乱码。原因：建库时字符集不是utf8mb4，或连接串没加characterEncoding=utf8。解决：重建库指定CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci，连接串补上编码参数。

4.4 跨域报错

现象：前端控制台报Access-Control-Allow-Origin。原因：前端没配代理，或后端没加跨域配置。解决：优先用vue.config.js代理；如果必须后端解决，加一个CorsFilter或@CrossOrigin注解。

4.5 登录后接口 401 或跳回登录页

现象：明明登录成功，一调其他接口就 401。原因：token 没带上，或拦截器路径配错。解决：检查 axios 请求拦截器有没有把 token 放进 header，后端拦截器有没有放行登录接口和静态资源。

5. 从能跑到能答辩：改造与验证的几个实用技巧

5.1 把「能跑」变成「像自己做的」

源码能跑只是第一步，答辩老师一眼就能看出你是不是纯抄。我的习惯是至少改三处：换一套 UI 配色和登录页背景、把判分逻辑里的主观题改成关键词匹配并写进论文、加一个「错题本」或「成绩趋势图」这种小功能。改动不用大，但要有自己的逻辑说明。比如错题本，就是在答题详情表加个查询，把答错的题按用户 ID 聚合出来。

5.2 用接口测试工具验证核心链路

答辩前一定要自己把「注册→登录→选试卷→答题→交卷→看成绩」这条链路走通，并且用 Postman 或浏览器 F12 确认每个接口的入参出参。我一般会建一个测试账号，把每步的请求和响应截图存下来，论文里放两张，答辩时被问到也有底气。

5.3 论文与代码的对应关系

LW（论文）部分别和代码脱节。数据库表设计那一章，直接把你的建表 SQL 贴上去；系统实现那一章，挑判分和考试页两个核心模块，贴关键代码并解释。老师最反感的是论文里写的功能代码里找不到，或者代码里有的功能论文只字不提。

5.4 一个我常用来兜底的技巧

如果时间实在不够，先把客观题判分和成绩统计做扎实，主观题批阅做成「教师手动打分」的简单页面。这样系统闭环是完整的，答辩也能讲清楚。别一上来就追求自动组卷、防作弊、人脸识别，那些是加分项，不是及格项。

最后说个我自己的教训：每次拿到一套源码，先别改任何代码，原封不动跑通一遍，把环境、数据库、前后端启动顺序记在一个文档里。这个文档就是你后面所有改动的后悔药。希望帮到你。

本文还有配套的精品资源，点击获取