基于 Spring Boot + Vue 的在线考试系统设计与实现

引言

在线考试系统已成为现代教育和培训的重要工具，提供了便捷高效的考核方式。然而，为了保障考试的公平性和安全性，避免考生未经授权进入考试，设计考试密码机制是在线考试系统的一项关键功能。本项目将实现一个基于Spring Boot 和Vue的在线考试系统，提供用户管理、考试管理、考试密码验证、在线答题、成绩管理等功能。

1. 系统需求分析

1.1 功能需求

1.1.1 用户管理

用户注册、登录、修改个人信息。
区分考生和管理员角色，分配相应权限。

1.1.2 考试管理

管理员创建考试，设置考试信息（名称、时间、考试密码等）。
考生进入考试时，需输入考试密码。

1.1.3 在线答题

支持多种题型（单选、多选、填空题）。
考生提交答案后，系统自动判卷。

1.1.4 成绩管理

自动统计考试成绩，显示答题情况。
管理员查看所有考生成绩，考生仅能查看自己的成绩。

1.1.5 权限管理

管理员负责创建考试、管理题库和查看成绩。
考生仅能参与考试和查看自己的成绩。

1.2 非功能需求

数据安全性：考试密码需加密存储，防止泄露。
系统性能：支持高并发访问，确保考试过程稳定流畅。
易用性：界面直观友好，考生操作便捷。

2. 系统设计

2.1 系统架构

采用前后端分离架构：

前端（Vue.js）：实现页面展示与用户交互，基于 Element UI 构建组件化页面。
后端（Spring Boot）：提供 RESTful API 实现业务逻辑和数据处理。
数据库（MySQL）：存储用户、考试、题目、成绩等数据。

2.2 系统架构图

复制代码

+---------------------+      +----------------------+
|       Vue.js        | <--> |    Spring Boot       |
|  (用户界面)         |      | (业务逻辑与API服务)  |
+---------------------+      +----------------------+
           |                              |
           |                              |
+---------------------+      +----------------------+
|       MySQL         |      |   Redis（缓存）      |
|  (数据存储)         |      | (考试状态和缓存)     |
+---------------------+      +----------------------+

2.3 数据库设计

2.3.1 用户表（users）

存储用户基本信息。

sql 复制代码

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    role ENUM('ADMIN', 'STUDENT') DEFAULT 'STUDENT',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2.3.2 考试表（exams）

存储考试基本信息。

sql 复制代码

CREATE TABLE exams (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    password VARCHAR(255) NOT NULL, -- 考试密码，需加密存储
    start_time DATETIME NOT NULL,
    end_time DATETIME NOT NULL,
    created_by INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (created_by) REFERENCES users(id)
);

2.3.3 题目表（questions）

存储考试题目信息。

sql 复制代码

CREATE TABLE questions (
    id INT PRIMARY KEY AUTO_INCREMENT,
    exam_id INT NOT NULL,
    type ENUM('SINGLE', 'MULTIPLE', 'FILL') NOT NULL, -- 题目类型
    content TEXT NOT NULL, -- 题目内容
    options TEXT, -- 选项（JSON 格式）
    answer TEXT NOT NULL, -- 标准答案
    FOREIGN KEY (exam_id) REFERENCES exams(id)
);

2.3.4 答题记录表（answers）

存储考生的答题记录。

sql 复制代码

CREATE TABLE answers (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    exam_id INT,
    question_id INT,
    answer TEXT,
    is_correct BOOLEAN,
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (exam_id) REFERENCES exams(id),
    FOREIGN KEY (question_id) REFERENCES questions(id)
);

2.3.5 成绩表（results）

存储考试成绩。

sql 复制代码

CREATE TABLE results (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    exam_id INT,
    score FLOAT,
    submitted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (exam_id) REFERENCES exams(id)
);

2.4 核心流程

考试密码验证流程

考生选择考试后，输入考试密码。
前端将考试密码传递到后端进行验证。
如果密码正确，允许考生进入考试页面；否则提示密码错误。

3. 核心功能模块设计

3.1 用户管理模块

3.1.1 用户注册与登录

用户注册接口

使用 Spring Security 进行密码加密存储。

java 复制代码

@PostMapping("/register")
public ResponseEntity<String> register(@RequestBody User user) {
    user.setPassword(passwordEncoder.encode(user.getPassword()));
    userRepository.save(user);
    return ResponseEntity.ok("注册成功");
}

用户登录接口

通过 JWT（JSON Web Token）实现登录认证和会话管理。

3.2 考试管理模块

3.2.1 创建考试

管理员创建考试时，设置考试密码并保存。

示例代码：创建考试接口

java 复制代码

@PostMapping("/exams")
public ResponseEntity<String> createExam(@RequestBody Exam exam) {
    // 加密存储考试密码
    exam.setPassword(passwordEncoder.encode(exam.getPassword()));
    examRepository.save(exam);
    return ResponseEntity.ok("考试创建成功");
}

3.2.2 验证考试密码

考生在进入考试时输入密码，后端进行验证。

示例代码：考试密码验证接口

java 复制代码

@PostMapping("/exams/{id}/verify")
public ResponseEntity<String> verifyExamPassword(@PathVariable int id, @RequestBody String inputPassword) {
    Exam exam = examRepository.findById(id).orElseThrow(() -> new RuntimeException("考试不存在"));
    if (passwordEncoder.matches(inputPassword, exam.getPassword())) {
        return ResponseEntity.ok("密码正确");
    } else {
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("密码错误");
    }
}

3.3 在线答题模块

3.3.1 题目展示

前端请求考试的题目列表。

示例代码：获取题目列表接口

java 复制代码

@GetMapping("/exams/{id}/questions")
public List<Question> getQuestions(@PathVariable int id) {
    return questionRepository.findByExamId(id);
}

3.4 成绩管理模块

3.4.1 自动判卷与成绩统计

考生提交答案后，系统对答案进行判分并存储成绩。

示例代码：提交答案接口

java 复制代码

@PostMapping("/exams/{examId}/submit")
public ResponseEntity<String> submitAnswers(@PathVariable int examId, @RequestBody List<Answer> answers) {
    int score = 0;

    for (Answer answer : answers) {
        Question question = questionRepository.findById(answer.getQuestionId()).orElseThrow(() -> new RuntimeException("题目不存在"));
        boolean isCorrect = question.getAnswer().equals(answer.getAnswer());
        if (isCorrect) {
            score++;
        }
        answer.setIsCorrect(isCorrect);
        answerRepository.save(answer);
    }

    Result result = new Result();
    result.setExamId(examId);
    result.setUserId(currentUserId());
    result.setScore((float) score / answers.size() * 100);
    resultRepository.save(result);

    return ResponseEntity.ok("成绩已提交");
}

4. 前端功能实现

4.1 技术栈

Vue.js：前端框架。
Element UI：组件库，用于构建页面布局。

4.2 考试密码输入页面

前端代码示例

vue 复制代码

<template>
  <div>
    <h3>进入考试</h3>
    <input v-model="password" placeholder="输入考试密码">
    <button @click="verifyPassword">验证密码</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: ''
    };
  },
  methods: {
    verifyPassword() {
      axios.post(`/api/exams/${this.$route.params.id}/verify`, { password: this.password })
        .then(() => {
          alert("密码正确，进入考试");
          this.$router.push(`/exam/${this.$route.params.id}`);
        })
        .catch(() => {
          alert("密码错误，请重试");
        });
    }
  }
};
</script>