企业官网建设流程全解析

简介：这是一套面向高校计算机专业学生与Java初学者的在线考试系统毕业设计源码包，基于SpringBoot、Vue与MySQL构建，适合作为毕业设计、课程设计或自学练手项目。系统分为前后台：前台提供学生登录、首页信息、考试记录查询与在线答题，支持随机组卷与自动评分；后台涵盖管理员登录、学生管理、教师管理、班级管理、试题管理、试卷管理、考试管理与记录管理，功能链路完整。压缩包共244个文件，约8.67MB，以47个Java源码、33个HTML页面、32个JS脚本、19个Vue组件及29个SCSS样式文件为主，另含SQL数据库脚本、说明文档与LW论文文件，便于快速理解项目结构与二次开发。目前已有55人学习下载，适合需要完整赛题方案、模块化代码参考与数据库设计思路的读者，可据此掌握SpringBoot与Vue前后端分离开发流程。

1. 从一份 Java 毕业设计源码说起：在线考试系统到底能跑通哪些环节

如果你正在做 Java 方向的毕业设计或课程设计，大概率绕不开「在线考试系统」这个题目。它看起来简单——不就是出题、答题、判分吗？但真正动手时你会发现，权限怎么分、试卷怎么组、交卷后主观题怎么处理、成绩怎么统计，每一个点都能卡住两三天。这份基于 SpringBoot + Vue + MySQL 的在线考试系统源码，配套了说明文档和论文（LW），本质上是一套已经跑通主流程的参考实现。它适合三类人：一是时间紧、需要快速搭出可演示系统的同学；二是想拿一个完整项目练手 SpringBoot 和 Vue 前后端分离的开发者；三是需要对照论文结构梳理自己设计思路的人。源码不是让你照抄，而是让你看清一个考试系统从登录到出分，中间到底有多少个接口、多少张表、多少个状态流转。下面我按实际拆包的顺序，把这份资源怎么用、参数怎么配、坑在哪，一条条讲清楚。

2. 拆开压缩包先看什么：目录结构、技术栈与数据库表设计

2.1 前后端分离的目录长什么样

拿到压缩包后别急着导入 IDE，先解压看顶层结构。常见做法是分成两个独立目录，一个放 SpringBoot 后端，一个放 Vue 前端，外加一个 doc 或 sql 目录放说明文档和建表语句。我一般会先确认三件事：后端有没有pom.xml、前端有没有package.json、数据库脚本是不是.sql文件。这三样齐了，项目基本就能跑。

后端目录通常长这样：

exam-system/ ├── exam-backend/ # SpringBoot 后端 │ ├── src/main/java/com/exam/ │ │ ├── controller/ # 接口层 │ │ ├── service/ # 业务层 │ │ ├── mapper/ # MyBatis 映射 │ │ ├── entity/ # 实体类 │ │ └── config/ # 配置类 │ ├── src/main/resources/ │ │ ├── application.yml │ │ └── mapper/ # XML 映射文件 │ └── pom.xml ├── exam-frontend/ # Vue 前端 │ ├── src/ │ │ ├── views/ # 页面 │ │ ├── api/ # 接口封装 │ │ └── router/ # 路由 │ └── package.json └── doc/ ├── 说明文档.md ├── 论文.docx └── exam.sql # 建表脚本

这个结构是 SpringBoot + Vue 项目最典型的组织方式。后端按 controller、service、mapper、entity 分层，前端按 views、api、router 分目录。你拿到任何一份同类源码，都可以用这个模板去套，缺哪层就补哪层。

2.2 技术栈版本与选型理由

这份源码的技术栈是 SpringBoot + MyBatis + MySQL + Vue，属于国内 Java 毕业设计里最稳的组合。为什么不用 JPA 而用 MyBatis？因为考试系统里成绩统计、错题分析这类查询往往需要手写 SQL，MyBatis 的 XML 映射更直观，也方便你在论文里展示 SQL 设计。Vue 这边通常是 Vue 2 + Element UI，因为组件库成熟，表格、表单、弹窗直接拿来用，省去大量样式调试时间。

选型上有一个点要注意：SpringBoot 版本别盲目追新。热词里有人问「springboot版本太高」怎么办，原因就是高版本 SpringBoot 对 JDK 和依赖有要求，而很多毕业设计源码是在 JDK 8 + SpringBoot 2.3 左右的环境下写的。你本地如果装了 JDK 17，直接跑可能报错。稳妥做法是先看pom.xml里的<java.version>和<parent>版本，再决定用哪个 JDK。

2.3 数据库表设计：考试系统的核心表有哪些

考试系统的表设计直接决定功能能不能扩展。常见做法是围绕「用户—试卷—题目—考试记录—成绩」这条主线建表。下面是我从这类源码里总结出的核心表清单，你对照exam.sql看，缺哪张就说明功能被裁剪了。

其中paper_question这张关联表最容易被忽略。它不只是记录试卷里有哪些题，还要存每道题在这张试卷里的分值。因为同一道题在不同试卷里可能分值不同，分值必须放在关联表而不是题库表。很多同学自己写的时候把分值放在question表，结果组卷时发现改不了分，这就是设计上的坑。

exam_record表要区分「开始考试」和「交卷」两个时间点，还要有一个状态字段标记是进行中还是已交卷。否则学生刷新页面后无法恢复考试状态，体验会很差。

2.4 导入数据库与启动后端

看完表结构就可以动手了。第一步是建库导数据，第二步是改配置，第三步才是启动。顺序别乱，否则报错时你分不清是数据库问题还是代码问题。

# 1. 登录 MySQL 并创建数据库 mysql -u root -p CREATE DATABASE exam_system DEFAULT CHARACTER SET utf8mb4; exit; # 2. 导入建表脚本（假设脚本在 doc/exam.sql） mysql -u root -p exam_system < doc/exam.sql # 3. 确认表已创建 mysql -u root -p -e "USE exam_system; SHOW TABLES;"

导入完成后，打开后端application.yml，重点改三处：数据库连接、端口、文件上传路径。

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/exam_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 10MB max-request-size: 10MB

serverTimezone这个参数必须加，否则 MySQL 8.0 下启动会报时区错误。characterEncoding=utf8保证中文题目不乱码。文件上传大小按需调，如果支持图片题目就设大一点。

改完配置后在exam-backend目录执行mvn spring-boot:run，看到控制台输出 Tomcat started on port 8080 就说明后端起来了。如果报Access denied for user，检查密码；如果报Unknown database，说明建库那步没成功。

3. 前端跑起来与前后端联调：Vue 环境配置和接口对接

3.1 Vue 环境安装与依赖拉取

前端这边第一道坎是环境。热词里「vue安装及环境配置」「vue安装依赖」被反复搜，说明很多人卡在这一步。你需要 Node.js 和 npm，版本建议 Node 14 或 16，太新的 Node 18+ 可能和老的 node-sass 冲突。

# 查看版本，确认环境 node -v npm -v # 进入前端目录 cd exam-frontend # 安装依赖，国内建议换源 npm config set registry https://registry.npmmirror.com npm install

npm install如果卡在某个包不动，多半是网络问题，换源后重试。如果报node-sass编译错误，说明 Node 版本太高，常见做法是降到 Node 14，或者把node-sass换成sass（dart-sass）。这一步没有后悔药，版本对不上就是跑不起来。

依赖装完后执行npm run serve，默认跑在 8081 或 8082 端口。看到 Compiled successfully 就说明前端起来了。

3.2 接口代理配置：解决跨域

前端 8081、后端 8080，浏览器直接请求会跨域。Vue 项目里通常在vue.config.js配代理，把/api开头的请求转发到后端。

// vue.config.js module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' // 去掉 /api 前缀 } } } } }

changeOrigin: true是让代理服务器伪装请求来源，绕过浏览器同源策略。pathRewrite是因为后端接口路径通常不带/api，前端统一加前缀方便管理。改完这个文件必须重启npm run serve，热更新不会生效。

前端src/api目录下一般有一个request.js，里面配了 axios 的baseURL。确认它写的是/api，和后端代理对得上。如果登录接口返回 404，先看浏览器 Network 里请求的真实地址，再对照代理规则排查。

3.3 登录流程与权限拦截

考试系统的第一个功能是登录，它串起了前端表单、后端接口、数据库查询和 token 校验。以学生登录为例，流程是：前端提交用户名密码 → 后端查 user 表 → 校验密码 → 生成 token 返回 → 前端存 token → 后续请求带 token。

// 后端登录接口简化逻辑 @PostMapping("/login") public Result login(@RequestBody LoginDTO dto) { User user = userService.findByUsername(dto.getUsername()); if (user == null) { return Result.error("用户不存在"); } // 实际项目密码应加密存储，常见用 MD5 或 BCrypt if (!user.getPassword().equals(dto.getPassword())) { return Result.error("密码错误"); } String token = JwtUtil.createToken(user.getId(), user.getRole()); return Result.success(token); }

这里有个血泪经验：如果源码里密码是明文存储，你在论文里一定要写「采用加密存储」并真的改成 MD5 或 BCrypt，否则答辩时被问到安全性会很被动。改的时候注意，注册和登录两处都要改，只改一处会导致新用户登不进去。

前端拿到 token 后存在 localStorage，路由守卫里判断有没有 token，没有就跳回登录页。角色不同跳不同首页：学生进答题页，教师进题库管理，管理员进用户管理。这个跳转逻辑在router/index.js的beforeEach里。

3.4 组卷与答题的核心接口

组卷是教师端功能，从题库抽题生成试卷。常见做法是手动选题或按题型随机抽题。手动选题就是往paper_question表插记录，随机抽题则用 SQL 的ORDER BY RAND() LIMIT n。

-- 从单选题里随机抽 10 道 SELECT id FROM question WHERE type = 'single' ORDER BY RAND() LIMIT 10;

ORDER BY RAND()在数据量小的时候没问题，题库上千条后性能会下降。如果论文里要体现优化，可以提「用随机 ID 范围查询替代全表随机」，但毕业设计规模下不必过度设计。

学生答题时，前端把答案暂存在内存或 localStorage，交卷时一次性提交。后端收到答案后，客观题自动判分，主观题存起来等教师批阅。判分逻辑是拿学生答案和question.answer比对，所以题库里答案字段的格式必须统一，比如多选题答案存成"ABC"而不是"A,B,C"，否则比对永远不相等。

4. 避坑与排查：这份源码最容易翻车的五个地方

4.1 启动报时区或编码错误

现象：后端启动时报The server time zone value 'xxx' is unrecognized或中文乱码。原因：MySQL 8.0 默认时区和连接串不匹配，或者建库时没指定 utf8mb4。解决：连接串加serverTimezone=Asia/Shanghai，建库语句用DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci。已经建好的库可以用ALTER DATABASE exam_system CHARACTER SET utf8mb4;补救。

4.2 前端依赖装不上或启动白屏

现象：npm install报错，或npm run serve后页面空白。原因：Node 版本与依赖不兼容，最常见是 node-sass。解决：先node -v确认版本，高于 16 就降到 14；或者删掉node_modules和package-lock.json重新装。白屏还要看控制台报错，如果是Cannot find module，说明依赖没装全。

4.3 接口 404 或跨域被拦

现象：登录点不动，Network 里请求红色。原因：代理没配、后端没起、路径前缀不对。解决：先直接访问http://localhost:8080确认后端活着，再检查vue.config.js的 proxy 和request.js的 baseURL 是否一致。改完代理必须重启前端。

4.4 交卷后成绩不对

现象：学生交卷显示 0 分或分数和预期不符。原因：答案格式不统一，或判分时没按试卷分值计算。解决：检查question.answer和前端提交的答案格式，多选题尤其容易出问题；再检查判分逻辑用的是题目默认分值还是paper_question里的分值。后者才是正确的。

4.5 论文与源码对不上

现象：论文里写的功能和源码实际实现不一致。原因：源码是模板改的，文档没同步更新。解决：以源码为准反向修改论文，或者把源码里缺失的功能补上。答辩前一定要把论文里提到的每个功能都在系统里点一遍，点不通的就改论文描述，别硬撑。

5. 进阶用法：把这份源码改成你自己的项目

5.1 换主题与改功能模块

直接交一份网上的源码风险很高，查重和答辩都可能出问题。稳妥做法是保留架构，替换业务细节。比如把「在线考试」改成「在线测评」或「技能考核」，改数据库表名和字段注释，改前端标题和 Logo，改配色。功能上可以加一个「错题本」模块：学生交卷后把错题存进wrong_question表，前端加一个错题列表页。这个改动不大，但能让你的项目看起来有独立设计。

-- 新增错题本表 CREATE TABLE wrong_question ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, question_id INT NOT NULL, paper_id INT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, INDEX idx_user (user_id) );

加表之后，后端加对应的 entity、mapper、service、controller，前端加页面和路由。这一套流程走下来，你对 SpringBoot + Vue 的增删改查就彻底熟了。

5.2 打包部署：把 Vue 塞进 SpringBoot

开发时前后端分开跑，交付时通常打成一个 jar。做法是npm run build生成dist目录，把里面的文件复制到 SpringBoot 的src/main/resources/static下，然后mvn package。这样访问http://localhost:8080就能同时打开前端页面。

# 前端打包 cd exam-frontend npm run build # 复制到后端静态目录 cp -r dist/* ../exam-backend/src/main/resources/static/ # 后端打包 cd ../exam-backend mvn clean package -DskipTests java -jar target/exam-backend-1.0.jar

注意 Vue 路由要用 hash 模式，否则刷新页面会 404。在router/index.js里把mode: 'history'改成mode: 'hash'，或者在后端加一个转发配置。hash 模式最省事，URL 里带#但不会出错。

5.3 验证清单：交付前必须走一遍

改完之后别急着交，按这个清单过一遍：用学生账号登录能答题、交卷能看到成绩；用教师账号能加题、组卷、看统计；用管理员账号能加用户、改角色；刷新页面不掉登录状态；换一台电脑用局域网 IP 能访问。这几条都过了，系统才算能演示。

我自己的习惯是每次改完数据库字段，都强制把建表脚本重新导一遍到干净的库，再跑一次全流程。因为手动改库很容易漏字段，等到答辩现场才发现就晚了。希望这份拆解能帮你少走几个弯路，把这份源码真正变成自己的东西。

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