SpringBoot+Vue在线试题库系统开发实战-代码聚汇网

SpringBoot+Vue在线试题库系统开发实战

卧茶奈奈熊

1. 项目概述与核心价值

这个"SpringBoot+Vue 精品在线试题库系统"是一个典型的Java Web毕业设计项目，采用前后端分离架构。作为教学管理系统的一个细分领域，它解决了传统纸质考试和试题管理的痛点：试题版本混乱、组卷效率低下、成绩统计耗时等问题。

我见过太多学生做毕设时东拼西凑，最后系统根本跑不起来。而这个项目提供了完整的技术闭环：

后端：SpringBoot 2.7 + MyBatis Plus
前端：Vue 3 + Element Plus
数据库：MySQL 8.0
文档：Swagger接口文档 + 完整SQL脚本

2. 技术架构解析

2.1 后端技术栈

java复制@SpringBootApplication
@MapperScan("com.exam.mapper")
public class ExamApplication {
    public static void main(String[] args) {
        SpringApplication.run(ExamApplication.class, args);
    }
}

这是典型的SpringBoot启动类配置，关键点在于：

使用MyBatis Plus需要配置@MapperScan注解
数据库连接池默认使用HikariCP
内置Tomcat服务器（默认端口8080）

2.2 前端技术栈

javascript复制// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

前端开发时需要注意：

配置代理解决跨域问题
Element Plus需要按需引入组件
Axios请求需要统一拦截处理

3. 核心功能实现

3.1 试题管理模块

数据库设计关键表：

sql复制CREATE TABLE `question` (
  `id` int NOT NULL AUTO_INCREMENT,
  `question_type` tinyint COMMENT '1单选 2多选 3判断',
  `content` text COMMENT '题干',
  `options` json COMMENT '选项(JSON数组)',
  `answer` varchar(255) COMMENT '正确答案',
  `analysis` text COMMENT '解析',
  `subject_id` int COMMENT '所属科目',
  `difficulty` tinyint COMMENT '难度系数',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 智能组卷算法

java复制public List<Question> generatePaper(PaperRule rule) {
    // 1. 按题型、知识点、难度分类统计
    Map<String, List<Question>> questionMap = questionMapper
        .selectList(new QueryWrapper<Question>()
            .eq("subject_id", rule.getSubjectId()))
        .stream()
        .collect(Collectors.groupingBy(q -> 
            q.getQuestionType() + "_" + q.getKnowledgeId()));
    
    // 2. 随机选题算法
    List<Question> result = new ArrayList<>();
    rule.getRuleDetails().forEach(detail -> {
        String key = detail.getQuestionType() + "_" + detail.getKnowledgeId();
        List<Question> candidates = questionMap.get(key);
        Collections.shuffle(candidates);
        result.addAll(candidates.subList(0, detail.getQuestionCount()));
    });
    
    return result;
}

4. 开发环境搭建

4.1 后端环境

JDK 1.8+
Maven 3.6+
MySQL 8.0
初始化数据库：

bash复制mysql -uroot -p < exam.sql

4.2 前端环境

Node.js 16+
npm 8+
安装依赖：

bash复制npm install
npm run serve

5. 项目部署方案

5.1 后端打包

bash复制mvn clean package -DskipTests

生成的target/exam-0.0.1-SNAPSHOT.jar可直接运行：

bash复制java -jar exam-0.0.1-SNAPSHOT.jar

5.2 前端部署

生产环境构建：

bash复制npm run build

nginx复制server {
    listen       80;
    server_name  exam.yourdomain.com;
    
    location / {
        root   /path/to/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
    }
}

6. 常见问题排查

6.1 数据库连接失败

检查application.yml配置：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/exam?useSSL=false
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

6.2 跨域问题

如果前端访问接口出现CORS错误，可添加配置类：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*");
    }
}

6.3 Vue页面空白

检查路由模式是否为history：

javascript复制const router = createRouter({
  history: createWebHistory(),
  routes
})

需要确保服务器配置了fallback到index.html

7. 项目扩展建议

考试监控：加入WebSocket实现实时在线人数监控
自动批改：对客观题实现自动评分
错题本：记录学生错题并生成针对性练习
数据分析：使用ECharts可视化考试数据

这个项目我实际部署过三个学校的在线考试系统，最大的并发量达到过500+考生同时在线。关键是要做好Redis缓存和数据库连接池优化。建议毕业设计的同学可以重点完善其中的智能组卷算法，这是最能体现技术深度的部分。