SpringBoot+Vue在线考试系统全栈开发实战-代码聚汇网

SpringBoot+Vue在线考试系统全栈开发实战

暗茧

1. 项目概述与核心价值

这个基于SpringBoot+Vue的在线考试系统管理平台，是我在指导大学生毕业设计和企业内训时反复验证过的全栈解决方案。它完美解决了传统考试系统部署复杂、功能单一的问题，采用前后端分离架构，后端使用SpringBoot+MyBatisPlus实现RESTful API，前端采用Vue+ElementUI构建交互界面，数据库选用MySQL 5.7+Redis缓存方案。

关键优势：整套系统从零部署到上线只需2小时，自带多角色权限体系（管理员/教师/学生），包含从题库管理到智能阅卷的完整功能链，特别适合作为全栈开发的学习样板。

2. 技术架构深度解析

2.1 后端技术栈选型依据

SpringBoot 2.7.18版本的选择经过严格测试：

相比3.x版本对JDK17的强制要求，2.7.x仍兼容JDK8
内置Tomcat 9.0容器稳定性经过验证
与MyBatisPlus 3.5.3的集成更成熟

数据库设计中的关键优化点：

sql复制# 试卷表的分库分字段设计
CREATE TABLE exam_paper (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  class_id BIGINT NOT NULL COMMENT '关联班级',
  question_ids TEXT COMMENT 'JSON格式存储试题ID集合',
  INDEX idx_class (class_id) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.2 前端工程化实践

Vue 2.6 + ElementUI 2.15的组合方案考虑：

比Vue3更适合教学场景（生态更成熟）
采用vue-cli 4.5脚手架初始化项目
关键性能优化配置：

javascript复制// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      maxSize: 244 * 1024 // 控制单个chunk体积
    })
  }
}

3. 核心功能实现细节

3.1 考试防作弊机制

切屏检测实现：

java复制// 后端检测逻辑
@Aspect
@Component
public class ScreenSwitchAspect {
    @Around("execution(* com..exam.controller.*.submit*(..))")
    public Object checkSwitchCount(ProceedingJoinPoint pjp) throws Throwable {
        HttpServletRequest request = ((ServletRequestAttributes) 
            RequestContextHolder.getRequestAttributes()).getRequest();
        Integer switchCount = (Integer) request.getSession()
            .getAttribute("SWITCH_COUNT");
        if(switchCount > 3) {
            throw new ExamException("切屏次数超过限制");
        }
        return pjp.proceed();
    }
}

前端监听方案：

javascript复制// 全局事件监听
let switchCount = 0;
document.addEventListener('visibilitychange', () => {
  if(document.hidden) {
    switchCount++;
    axios.post('/api/exam/switch', { count: switchCount })
  }
});

3.2 智能阅卷模块

采用规则引擎+相似度算法的混合方案：

客观题：正则表达式匹配答案
主观题：基于SimHash的文本相似度计算

java复制public class AiCorrectService {
    private static final int HASH_BITS = 64;
    
    public double calculateSimilarity(String answer, String standard) {
        SimHash hash1 = new SimHash(answer, HASH_BITS);
        SimHash hash2 = new SimHash(standard, HASH_BITS);
        return hash1.getSimilarity(hash2);
    }
}

4. 部署实战与避坑指南

4.1 数据库配置要点

MySQL 5.7必须调整的参数：

ini复制# my.cnf关键配置
[mysqld]
innodb_buffer_pool_size = 1G  # 缓冲池大小
max_connections = 200         # 并发连接数
transaction_isolation = READ-COMMITTED

4.2 前端打包优化

配置Gzip压缩：

javascript复制// vue.config.js
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)$/,
        threshold: 10240
      })
    ]
  }
}

路由懒加载方案：

javascript复制const ExamPaper = () => import(/* webpackChunkName: "exam" */ './views/ExamPaper.vue')

5. 典型问题解决方案

5.1 跨域问题处理

SpringBoot后端配置类：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .maxAge(3600);
    }
}

5.2 文件上传限制

需同时修改前后端配置：

后端调整：

yaml复制# application.yml
spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 20MB

前端Axios实例：

javascript复制const instance = axios.create({
  baseURL: '/api',
  timeout: 30000,
  headers: { 'Content-Type': 'multipart/form-data' }
})

6. 扩展开发建议

微信小程序适配方案：

使用uni-app重构前端
后端新增/wxapi接口前缀
采用JWT替代Session认证

大数据分析扩展：

sql复制-- 成绩分析物化视图
CREATE MATERIALIZED VIEW exam_analysis AS
SELECT 
  user_id, 
  AVG(score) as avg_score,
  PERCENTILE_CONT(0.5) WITHIN GROUP(ORDER BY score) as median
FROM exam_record
GROUP BY user_id;

这套系统我在3所高校的计算机专业毕设指导中实际应用，学生反馈最集中的收获点是：

完整的RBAC权限体系实现
前后端分离的工程化实践
从需求分析到部署上线的全流程经验

对于想深入学习的开发者，建议重点研究：

MyBatisPlus的动态SQL机制
Vue的响应式原理实现
SpringBoot自动配置原理