SpringBoot2+Vue3构建高并发在线考试系统实践

1. 项目概述与核心价值

这是一个基于现代Java技术栈构建的在线考试与学习交流平台。作为全栈开发者，我选择SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0这套技术组合，主要解决传统教育平台存在的三个痛点：首先是前后端耦合导致的迭代效率低下，其次是考试系统的高并发稳定性问题，最后是缺乏有效的学习互动机制。

这套系统最突出的特点是采用了前后端分离架构。后端使用SpringBoot2提供RESTful API，前端用Vue3构建响应式界面，这种架构让我们的团队可以并行开发。在最近一次高校期末考试的线上测试中，系统成功支撑了2000+考生同时在线答题，服务器负载保持在60%以下。

提示：选择SpringBoot2而非最新版是出于企业级应用的稳定性考虑，许多金融机构和教育机构的生产环境仍在使用该长期支持版本

2. 技术栈深度解析

2.1 SpringBoot2的核心配置

在application.yml中，我们做了这些关键配置：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/exam_db?useSSL=false&serverTimezone=UTC
    username: root
    password: 加密后的密码
    driver-class-name: com.mysql.cj.jdbc.Driver
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

特别要注意的是MySQL8.0连接配置：

• 必须添加serverTimezone参数避免时区异常
• useSSL=false在测试环境可以关闭加密传输
• 生产环境建议使用MySQL Connector/J 8.0.28+版本

2.2 Vue3的组合式API实践

考试页面的核心逻辑采用setup语法：

javascript复制import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const examPaper = ref(null)
    const route = useRoute()
    
    onMounted(async () => {
      const { data } = await getExamPaper(route.params.id)
      examPaper.value = data
    })

    return { examPaper }
  }
}

这种写法相比Options API有两大优势：

1. 相关逻辑可以集中编写（如数据获取和事件处理）
2. 更好的TypeScript支持

3. 数据库设计与优化

3.1 MySQL8.0特性应用

我们充分利用了MySQL8.0的这些特性：

sql复制-- 使用窗口函数计算考试成绩排名
SELECT 
  student_id,
  score,
  RANK() OVER (PARTITION BY exam_id ORDER BY score DESC) AS ranking
FROM exam_results;

-- 使用JSON字段存储动态题目选项
ALTER TABLE questions ADD COLUMN options JSON;

3.2 分库分表策略

对于考试记录这类高频写入数据，我们采用水平分表：

• 按学期分表：exam_records_2023_1、exam_records_2023_2
• 使用MyBatis-Plus的动态表名插件：

java复制public class DynamicTableNameInterceptor implements InnerInterceptor {
    @Override
    public void beforeQuery(Executor executor, MappedStatement ms, 
        Object parameter, RowBounds rowBounds, ResultHandler resultHandler, 
        BoundSql boundSql) {
        // 动态替换表名逻辑
    }
}

4. 核心功能实现细节

4.1 实时考试防作弊机制

我们实现了三重防护：

1. 窗口焦点检测：使用Vue3的composition API监听blur/focus事件

javascript复制const handleVisibilityChange = () => {
  if (document.hidden) {
    warnUser('检测到切换窗口操作')
  }
}

2. 题目乱序：后端使用Fisher-Yates洗牌算法

java复制Collections.shuffle(questions, new SecureRandom());

3. 答案加密：采用RSA非对称加密传输

4.2 高并发解决方案

考试提交高峰期采用这些策略：

• 消息队列削峰：使用RabbitMQ延迟队列
• 数据库连接池优化：

properties复制spring.datasource.hikari.maximum-pool-size=20
spring.datasource.hikari.connection-timeout=30000

• Redis缓存热点数据：

java复制@Cacheable(value = "examPapers", key = "#id")
public ExamPaper getExamPaper(Long id) {
    // 数据库查询
}

5. 部署与监控方案

5.1 Docker化部署

我们的docker-compose.yml包含这些服务：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    volumes:
      - mysql_data:/var/lib/mysql
      
  redis:
    image: redis:6
    ports:
      - "6379:6379"

5.2 监控配置

使用SpringBoot Actuator暴露关键指标：

properties复制management.endpoints.web.exposure.include=health,metrics,info
management.metrics.tags.application=${spring.application.name}

配合Prometheus和Grafana构建的监控看板可以实时显示：

• 平均响应时间(<200ms)
• 错误率(<0.1%)
• JVM内存使用(<70%)

6. 典型问题排查实录

6.1 MyBatis-Plus分页失效问题

现象：前端获取的分页数据与实际不符
根本原因：多个拦截器执行顺序冲突
解决方案：

java复制@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    // 分页插件必须第一个添加
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
    // 其他拦截器...
    return interceptor;
}

6.2 Vue3响应式数据丢失

场景：编辑试卷时部分字段不更新
排查过程：

1. 检查Proxy代理对象是否被意外解包
2. 确认reactive()包裹了整个对象
3. 最终发现是使用了展开运算符导致响应式丢失
   修复方案：

javascript复制// 错误写法
state.form = { ...newData } 

// 正确写法
state.form = reactive(Object.assign({}, state.form, newData))

7. 项目文档结构说明

完整项目包含这些关键文档：

code复制/docs
  ├── 数据库设计.md
  ├── API接口规范.yaml
  ├── 前端部署指南.md
  └── 压力测试报告.pdf
/src/main/resources
  ├── /sql
  │   ├── init_schema.sql
  │   └── demo_data.sql
  └── application-prod.yml

特别提醒：MySQL8.0的初始化脚本需要特别注意：

sql复制CREATE USER 'exam_user'@'%' IDENTIFIED WITH mysql_native_password BY 'password';
-- 必须指定加密方式否则可能连接失败

8. 扩展开发建议

基于现有系统可以扩展这些功能：

1. 智能组卷：使用遗传算法根据知识点分布自动生成试卷

python复制# 伪代码示例
def fitness_function(paper):
    return abs(paper.knowledge_coverage - target_coverage)

2. 学习行为分析：用Elasticsearch存储学习轨迹数据
3. 即时通讯：集成WebSocket实现讨论区实时通知

我在实际部署中发现，CentOS7安装MySQL8.0时需要特别注意：

bash复制# 必须先卸载mariadb
sudo yum remove mariadb-libs
# 安装官方repo
sudo rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm

对于Java内存溢出问题，建议在启动脚本中添加这些参数：

bash复制JAVA_OPTS="-Xms512m -Xmx1024m -XX:+HeapDumpOnOutOfMemoryError"