Spring Boot + React 从0搭建在线考试系统实战

剑弟

143人浏览 · 2026-07-02 07:00:00

剑弟 · 2026-07-02 07:00:00 发布

Spring Boot + React 从0搭建在线考试系统实战

一、背景

前段时间有个初二信息老师找到我，说需要一个在线模拟考试系统，学生浏览器打开就能考。需求其实不复杂：

老师 Excel 导入试题
学生选试卷、答题、交卷、看成绩
单选题、多选题、判断题都要支持
倒计时、答题卡、自动交卷
老师后台看成绩统计

但作为一个独立开发者，我得考虑成本和技术选型。这篇文章就记录一下我是怎么从0搭起来的。

二、技术选型

后端：Spring Boot 3.2 + MyBatis-Plus + MySQL 8.0
前端：React 18 + TypeScript + Vite + shadcn/ui + TailwindCSS
认证：JWT（jjwt 0.12.x）
部署：同一台 99 元 ECS + Nginx

为什么这么选？

Spring Boot 生态成熟，MyBatis-Plus 做 CRUD 确实快。前端选 React 是因为考试页面交互复杂（倒计时、答题卡弹窗、题目切换），组件化比纯 HTML 好做太多。shadcn/ui 颜值在线，Tailwind 写样式快。

全部跑在 99 元的 ECS 上，学生端接口不需要登录，直接访问即可考试。

三、数据库设计

核心表就几张：t_exam_paper（试卷）、t_question（试题）、t_exam_result（考试结果）、t_exam_session（正在作答会话）。

每张表都遵循规范加上了审计字段：

CREATE TABLE t_exam_paper (
    id          BIGINT AUTO_INCREMENT PRIMARY KEY,
    title       VARCHAR(100) NOT NULL COMMENT '试卷名称',
    duration    INT NOT NULL DEFAULT 45 COMMENT '考试时长(分钟)',
    status      TINYINT DEFAULT 0 COMMENT '0=草稿 1=已发布',
    score_total INT DEFAULT 0 COMMENT '试卷总分',
    pass_score  INT DEFAULT NULL COMMENT '及格线',
    created_by  VARCHAR(50) COMMENT '创建人用户名',
    updated_by  VARCHAR(50) COMMENT '更新人用户名',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
    update_time DATETIME DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP
);

试题表支持三种题型：单选（选项 JSON 存 A/B/C/D）、多选（答案用逗号分隔 A,B,C）、判断（对/错）。

考试结果表存的是完整答题详情 JSON，方便后面做错题分析。

四、JWT 认证的几个坑

做管理后台认证时踩了几个坑，写出来给新手参考：

4.1 OPTIONS 预检请求被拦截

浏览器发跨域请求前会先发一个 OPTIONS 预检。但自定义的 JWT 过滤器会拦截它——因为没有 Authorization 头。

// 在 JWT 过滤器开头加
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
    chain.doFilter(request, response);
    return;
}

4.2 中文乱码

返回值直接 response.setContentType("application/json") 默认是 ISO-8859-1 编码，中文变 ???。要加 charset：

response.setContentType("application/json;charset=UTF-8");

4.3 Spring CGLIB 代理的坑

在 @Configuration 类里用匿名类定义 JWT 过滤器时，this.jwtUtil 可能拿不到值。需要提前捕获到局部变量：

@Bean
public OncePerRequestFilter jwtAuthFilter() {
    JwtUtil jwt = this.jwtUtil;  // 先捕获
    return new OncePerRequestFilter() {
        void doFilterInternal(...) {
            var claims = jwt.parseToken(token);  // 用局部变量
        }
    };
}