1. 项目概述：SpringBoot+Vue知识竞赛系统
这个基于SpringBoot和Vue.js的知识竞赛系统是一个典型的Java Web毕业设计项目，它完整实现了在线知识竞赛的全流程功能。系统采用前后端分离架构，后端使用SpringBoot框架提供RESTful API接口，前端采用Vue.js构建响应式用户界面，数据库使用MySQL并通过SQL脚本进行数据初始化。
作为毕业设计选题，这个项目具有几个显著优势：技术栈主流且完整（涵盖Java后端、前端框架、数据库）、业务场景明确（知识竞赛）、功能模块清晰（用户管理、题库管理、考试管理等）。系统源码包含完整的接口文档，方便开发者快速理解和二次开发。
2. 技术架构解析
2.1 后端技术栈
SpringBoot作为后端核心框架，提供了以下关键技术支持：
-
自动配置与启动器：通过spring-boot-starter-web快速构建Web应用，简化了传统SSM框架繁琐的XML配置。实测项目启动时间在3秒内，远快于传统Tomcat部署方式。
-
数据持久层：整合MyBatis-Plus实现ORM操作，其Lambda表达式查询方式避免了SQL注入风险。例如题库查询的典型实现：
java复制// 安全的分页查询示例
Page<Question> page = new Page<>(current, size);
questionMapper.selectPage(page, Wrappers.<Question>query()
.like(StringUtils.isNotBlank(keyword), "content", keyword)
.eq("type", questionType));
- 安全控制：采用Spring Security实现基于JWT的认证授权。关键配置类需继承WebSecurityConfigurerAdapter，重写configure方法定义访问规则。
2.2 前端技术栈
Vue.js作为前端框架，主要技术特点包括：
- 组件化开发：将系统拆分为可复用的组件，如Header、Sidebar、QuestionEditor等。通过Vue CLI生成的工程结构清晰：
code复制src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # Vuex状态管理
└── views/ # 页面视图
- 状态管理：使用Vuex集中管理全局状态，如用户登录信息、考试计时等。典型store模块化结构：
javascript复制// store/modules/exam.js
const state = {
remainingTime: 0,
answers: {}
}
const mutations = {
SET_REMAINING_TIME(state, time) {
state.remainingTime = time
}
}
- Axios封装：对HTTP请求进行统一拦截处理，添加Token、错误提示等：
javascript复制// utils/request.js
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
}
)
3. 数据库设计与实现
3.1 核心表结构
系统包含约15张主要数据表，关键表结构如下：
- 用户体系：
sql复制CREATE TABLE `sys_user` (
`user_id` bigint NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL COMMENT '登录账号',
`password` varchar(100) NOT NULL COMMENT '密码',
`real_name` varchar(50) DEFAULT NULL COMMENT '真实姓名',
`role` tinyint DEFAULT '1' COMMENT '角色(1学生 2教师 3管理员)',
PRIMARY KEY (`user_id`),
UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
- 题库系统：
sql复制CREATE TABLE `exam_question` (
`question_id` bigint NOT NULL AUTO_INCREMENT,
`type` tinyint NOT NULL COMMENT '题型(1单选 2多选 3判断)',
`content` text NOT NULL COMMENT '题干',
`options` json DEFAULT NULL COMMENT '选项(JSON数组)',
`answer` varchar(20) NOT NULL COMMENT '正确答案',
`analysis` text COMMENT '解析',
`subject_id` int DEFAULT NULL COMMENT '所属科目',
`difficulty` tinyint DEFAULT '1' COMMENT '难度(1-5)',
PRIMARY KEY (`question_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 性能优化实践
- 索引优化：在exam_record表的user_id和exam_id字段建立联合索引，提升查询效率：
sql复制ALTER TABLE `exam_record`
ADD INDEX `idx_user_exam` (`user_id`, `exam_id`);
- 慢SQL监控：在application.yml中配置慢查询阈值：
yaml复制spring:
datasource:
druid:
filter:
stat:
log-slow-sql: true
slow-sql-millis: 1000
4. 核心功能实现
4.1 在线考试模块
考试流程的状态机设计：
java复制public enum ExamStatus {
NOT_STARTED(0), // 未开始
ONGOING(1), // 进行中
AUTO_SUBMITTED(2), // 超时自动提交
MANUALLY_SUBMITTED(3), // 手动提交
TEACHER_REVIEWED(4); // 已批改
private final int code;
// ...
}
考试计时器的前端实现：
javascript复制// 使用Web Worker防止标签页休眠导致计时不准
const worker = new Worker('timer.worker.js');
worker.postMessage({ action: 'start', duration: 3600 });
worker.onmessage = (e) => {
store.commit('exam/SET_REMAINING_TIME', e.data.remaining);
if (e.data.remaining <= 0) {
this.autoSubmit();
}
};
4.2 自动批改算法
多选题判分逻辑（按比例给分）：
java复制public BigDecimal calculateScore(String standardAnswer, String userAnswer) {
if (StringUtils.isBlank(userAnswer)) {
return BigDecimal.ZERO;
}
String[] standards = standardAnswer.split(",");
String[] users = userAnswer.split(",");
Set<String> standardSet = new HashSet<>(Arrays.asList(standards));
Set<String> userSet = new HashSet<>(Arrays.asList(users));
// 正确选项
Set<String> correctChoices = new HashSet<>(standardSet);
correctChoices.retainAll(userSet);
// 错误选项
userSet.removeAll(standardSet);
// 计算公式：(正确数 - 错误数) / 标准答案数
BigDecimal score = BigDecimal.valueOf(correctChoices.size() - userSet.size())
.divide(BigDecimal.valueOf(standards.length), 2, RoundingMode.HALF_UP);
return score.compareTo(BigDecimal.ZERO) > 0 ? score : BigDecimal.ZERO;
}
5. 部署与运维
5.1 多环境配置
使用SpringBoot的Profile机制管理环境配置：
code复制resources/
├── application.yml # 公共配置
├── application-dev.yml # 开发环境
└── application-prod.yml # 生产环境
激活生产环境配置：
bash复制java -jar knowledge-contest.jar --spring.profiles.active=prod
5.2 前端部署优化
配置nginx实现静态资源缓存和Gzip压缩：
nginx复制server {
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/css;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
6. 常见问题解决方案
6.1 跨域问题
SpringBoot后端配置CORS：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.maxAge(3600);
}
}
6.2 性能监控
集成SpringBoot Actuator暴露监控端点：
yaml复制management:
endpoints:
web:
exposure:
include: health,info,metrics
endpoint:
health:
show-details: always
6.3 事务管理
声明式事务的合理使用：
java复制@Service
@Transactional(rollbackFor = Exception.class)
public class ExamService {
@Transactional(propagation = Propagation.REQUIRES_NEW)
public void submitExam(ExamRecord record) {
// 独立事务提交
}
}
7. 项目扩展建议
-
微服务改造：将用户服务、考试服务、题目服务拆分为独立模块，使用Spring Cloud Alibaba实现服务治理。
-
智能组卷算法：基于遗传算法实现按难度系数、知识点分布的智能组卷。
-
考试防作弊：
- 浏览器全屏检测
- 随机题目顺序
- 活体检测（需要接入第三方SDK）
-
数据分析看板：使用ECharts实现考试成绩分布、题目正确率等可视化分析。
这个项目完整展示了现代Web应用的全栈开发流程，从技术选型到具体实现都符合当前企业级开发标准。特别适合作为计算机相关专业的毕业设计选题，既有足够的复杂度体现专业能力，又不会过于庞大难以完成。