1. 项目概述与核心价值1.1 这套系统到底是干什么的信息知识赛系统说白了就是一套专门跑“知识竞赛”的完整在线平台。我以前帮高校和培训机构搭过好几套类似的竞赛系统所以看到这个标题时第一反应就是——该有的模块应该都齐了。这类系统的典型场景包括校级信息素养大赛、企业内训知识考核、图书馆读书月答题活动、技术社区月度排位赛等等。从一个从业者的角度看这套系统的定位非常清晰管理员在后台上传题库、配置赛事规则参赛用户通过前台完成注册、报名、在线答题比赛结束后系统自动判分、生成排名和成绩单。整个链路用SpringBoot Vue MySQL这个组合来实现属于当前中小型Web项目里最成熟、最好招人维护、也最容易二次开发的技术栈。为什么强调“可直接运行”因为很多开源或分享出来的源码项目下载下来要么缺依赖、要么数据库脚本不全、要么前端环境没配置好真正能一把跑起来的少。这套系统既然敢在标题写“可直接运行”说明作者在环境兼容、数据初始化、前后端联调这些容易翻车的地方下了功夫这对于拿来练手、做毕业设计、或者二次开发接私活的人来说价值非常大。1.2 适合谁去使用和学习我把这个系统适合的人群分成三类你可以自己对号入座。第一类是正在做毕业设计或课程设计的学生。信息知识赛系统这个题目在计算机专业的毕业设计里出现频率很高因为它麻雀虽小五脏俱全前端有页面交互和路由控制后端有权限认证和业务逻辑数据库有多表关联和查询统计。这些正好覆盖了毕业设计评审时最看重的那几个点。拿到这套源码后只需要把系统名称改一改、把页面风格调一调、加一两个自己设计的特色功能比如成绩导出Excel、参赛证书在线生成就是一份很完整的设计成果。第二类是刚开始接触SpringBoot Vue前后端分离开发模式的初级程序员。整套系统是现成的、能跑通的范例可以对照源码理解前后端如何通过接口交互、JWT token如何做身份认证、Vue路由和状态管理在实际项目中怎么组织比看零散的教程要高效得多。第三类是有实际业务需求的企业或机构。比如单位内部要搞安全生产知识竞赛、党建知识测试、员工技能等级考核直接拿这套系统改造一下就能用。我见过不少类似案例从下载源码到部署上线最快三五天就能搞定比自己从零开发省太多事了。2. 整体架构与设计思路拆解2.1 前后端分离架构的选型这套系统采用前后端分离架构前端是Vue后端是SpringBoot两边通过RESTful API进行JSON数据交换。前后端分离这个词在工程上已经是绝对的主流选择核心原因有三个。第一是职责解耦。前端工程师只需要关心页面怎么写、接口怎么调后端工程师只需要关心业务逻辑和数据怎么设计两边可以并行开发。对于这套竞赛系统来说意味着前端页面调整不影响到后端逻辑反之亦然。第二是部署弹性。前端打包成纯静态文件后可以用Nginx直接托管能非常方便地做CDN加速后端SpringBoot项目打成Jar包放服务器上一条命令就能启动。当并发量上来时前端静态资源和后端服务甚至可以分别做水平扩展。第三是技术红利。Vue在前端生态里以学习曲线平缓、中文文档完善著称SpringBoot更是Java领域的事实标准社区极其成熟。需要提醒的是前后端分离也带来了一些额外要处理的麻烦。最典型的就是跨域问题浏览器安全策略会拦截非同源的Ajax请求所以项目里通常需要解决跨域——SpringBoot后端配置CORS过滤器或者通过Nginx反向代理将前后端映射到同一个域名下详细操作我后面会单独说。2.2 核心功能模块与数据流转信息知识赛系统从功能模块划分来看大致可以拆成下面几个部分用户端部分用户注册登录、个人中心、赛事列表查看、报名参赛、在线答题考试、成绩查询、排行榜浏览。管理端部分管理员登录、用户管理、赛事管理、题库管理包括题目增删改查与导入导出、试卷配置、成绩统计、公告发布。这两端对应的就是两套界面和两个角色体系。用户端给参赛者使用界面要简洁直接答题体验要顺畅管理端给系统管理员或赛务组织者使用功能密度高更强调数据管理操作的效率。数据流转的核心链路是这样的用户在前端报名某场赛事后后台会自动创建一条参赛记录管理员配置好的试卷从题库中选题在赛事开始后开放给用户用户提交答卷后后端逐题比对标准答案并计算得分、记录答题用时赛事结束后系统汇总所有用户成绩生成排行榜。整个过程涉及的数据表至少包括用户表、角色表、赛事表、报名表、题库表、试卷表、答卷表、成绩表可能还有公告表。这些表的关联关系是这类系统的数据核心我在第3部分会给出详细的建表设计思路。2.3 技术栈配合上的几个关键考量_SpringBoot侧的关键考量使用SpringBoot最舒服的一点是自动配置机制默认整合了内嵌Tomcat新版本是Tomcat 9/10或Undertow视Boot版本而定。项目里一般会用MyBatis-Plus作为持久层框架它比纯MyBatis省去大量XML编写分页查询直接有现成插件配合代码生成器能快速产出实体类、Mapper接口、Service层代码很适合信息知识赛系统这种业务相对标准化的项目。权限认证用Spring Security或JWT方案都可以。若用Spring Security加JWT拦截器与过滤器链的配置是核心若只依赖JWT配合拦截器实现更轻量。如果只是给系统内部使用轻量方案配置起来省事很多。_Vue侧的关键考量Vue 2配合Element UI还是Vue 3配合Element Plus需要看源码本身版本。老项目用Vue 2的比较多但新项目建议直接上手Vue 3Composition API写业务逻辑更清晰。前端核心难点不在写页面而在接口层的封装和状态管理项目里一定要有一个统一的axios请求封装文件统一处理token注入、错误码拦截、加载状态提示状态管理用Vuex或Pinia存储当前登录用户信息和权限标识否则刷新页面后用户信息丢失体验会很糟糕。_MySQL侧的关键考量这个系统的数据量通常不大题库几千道、用户几千人已经是上限所以MySQL 5.7或8.0都完全够用。关键是把字符集统一设置为utf8mb4否则用户提交的答案里一旦有表情符号或生僻字存储就会报错。还有一点是数据库连接池配置生产环境建议用HikariCP这已经是SpringBoot 2.x以上版本的默认选项并发性能比早期的DBCP和C3P0好很多。3. 数据库设计与核心表结构3.1 信息知识赛系统的ER设计与表关系数据库设计是这类系统的地基。我见过不少半路出家的源码项目功能做出来了但表设计一塌糊涂比如把题目内容直接冗余在试卷表里导致后续改一道题要同步改几百个地方。一个好的表结构应该是题目是题目试卷是试卷二者通过中间关系表关联。我以这套系统的核心链路来拆一下ER关系用户表sys_user与角色表sys_role是多对多关系用户拥有角色角色拥有菜单权限。赛事表exam_event与用户表通过报名表exam_registration关联一个用户能报多场赛事一场赛事能接受多个用户报名。试卷表exam_paper与题库表exam_question通过试卷题目表exam_paper_question关联一场赛事关联一份或若干份试卷试卷题目表里还可以额外记录每道题的分值。用户答卷时答卷表exam_answer记录用户对每道题的作答内容成绩表exam_score记录最终得分和排名。这样设计的好处是扩展性极强。以后要加新题型比如判断题、填空题、新赛事类型比如团队赛、新统计维度比如按部门汇总都只要改对应的一张表不会影响全局。3.2 建表SQL核心脚本参考下面是一套精简但完整可用的核心表结构SQL脚本我在多个竞赛类项目里都是用这个骨架调整的。-- 用户表 CREATE TABLE sys_user ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键ID, username varchar(50) NOT NULL COMMENT 用户名, password varchar(100) NOT NULL COMMENT 密码(BCrypt加密), real_name varchar(50) DEFAULT NULL COMMENT 真实姓名, phone varchar(20) DEFAULT NULL COMMENT 手机号, email varchar(100) DEFAULT NULL COMMENT 邮箱, status tinyint DEFAULT 1 COMMENT 状态(1-正常 0-禁用), create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT系统用户表; -- 竞赛赛事表 CREATE TABLE exam_event ( id bigint NOT NULL AUTO_INCREMENT COMMENT 赛事ID, event_name varchar(100) NOT NULL COMMENT 赛事名称, event_desc text COMMENT 赛事描述, start_time datetime DEFAULT NULL COMMENT 开始时间, end_time datetime DEFAULT NULL COMMENT 结束时间, duration int DEFAULT 60 COMMENT 答题时长(分钟), pass_score int DEFAULT 60 COMMENT 及格分数, status tinyint DEFAULT 0 COMMENT 状态(0-未开始 1-进行中 2-已结束), create_by bigint DEFAULT NULL COMMENT 创建人ID, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT赛事表; -- 题库表 CREATE TABLE exam_question ( id bigint NOT NULL AUTO_INCREMENT COMMENT 题目ID, question_type tinyint NOT NULL COMMENT 题型(1-单选 2-多选 3-判断), question_content text NOT NULL COMMENT 题干内容, option_a varchar(500) DEFAULT NULL COMMENT 选项A, option_b varchar(500) DEFAULT NULL COMMENT 选项B, option_c varchar(500) DEFAULT NULL COMMENT 选项C, option_d varchar(500) DEFAULT NULL COMMENT 选项D, correct_answer varchar(10) NOT NULL COMMENT 正确答案(如A/AB/对), analysis text COMMENT 答案解析, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT题库表; -- 答卷表记录用户每题作答 CREATE TABLE exam_answer ( id bigint NOT NULL AUTO_INCREMENT COMMENT 作答ID, user_id bigint NOT NULL COMMENT 用户ID, event_id bigint NOT NULL COMMENT 赛事ID, question_id bigint NOT NULL COMMENT 题目ID, user_answer varchar(10) DEFAULT NULL COMMENT 用户答案, is_correct tinyint DEFAULT NULL COMMENT 是否正确(1-是 0-否), create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 作答时间, PRIMARY KEY (id), KEY idx_user_event (user_id, event_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT答卷记录表; -- 成绩表 CREATE TABLE exam_score ( id bigint NOT NULL AUTO_INCREMENT COMMENT 成绩ID, user_id bigint NOT NULL COMMENT 用户ID, event_id bigint NOT NULL COMMENT 赛事ID, score int DEFAULT 0 COMMENT 总分, correct_count int DEFAULT 0 COMMENT 答对题数, total_count int DEFAULT 0 COMMENT 总题数, use_time int DEFAULT 0 COMMENT 用时(秒), rank_no int DEFAULT NULL COMMENT 排名, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 提交时间, PRIMARY KEY (id), KEY idx_event_score (event_id, score) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT成绩表;这套表结构基本能满足90%的竞赛场景。题库表用列来承载选项option_a到option_d虽然看起来不够“范式优雅”但实际开发和维护最直观也不容易出错。如果未来要支持不定项数量的选项再考虑拆成选项子表。3.3 数据库层面的几个易踩坑点字符集问题建表时一定要显式指定DEFAULT CHARSETutf8mb4尤其是MySQL 5.7环境默认字符集可能是latin1。一旦题目里有中文标点或特殊符号就会出现乱码或报错。如果数据库已经建成记得先改库再改表ALTER DATABASE xxx CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci。时间字段问题赛事的开始时间和结束时间建议用datetime而不是timestamp。timestamp类型有2038年上限问题而且存进去会有时区转换。对于一些要跨凌晨的赛事datetime搭配服务器时区统一为Asia/Shanghai就行。外键与索引问题很多教学项目喜欢在表定义里直接写FOREIGN KEY约束但在实际生产环境我更推荐逻辑外键——也就是在业务代码层面维护关联关系建表时不建物理外键。原因很简单物理外键会导致插入、更新时需要额外的校验高并发下容易出现锁竞争而且一旦表数据量上来要删除某场比赛的时候外键约束会非常限制操作自由度。通过联合索引比如user_id event_id来加速查询就够了。4. 后端SpringBoot核心实现要点4.1 项目结构示范与分层思想这套系统的后端代码结构建议按我下面这种方式分包既不显得臃肿也方便后续功能扩展com.contest ├── config // 全局配置类跨域、拦截器、MyBatis-Plus分页插件 ├── controller // 接口层前后端交互入口 ├── service // 业务逻辑层接口实现 ├── mapper // 数据访问层MyBatis-Plus的Mapper接口 ├── entity // 实体类与数据库表对应 ├── dto // 数据传输对象接收前端参数、自定义返回结构 ├── vo // 视图对象返回给前端的组装数据 ├── common // 通用类统一返回结果、异常处理、常量定义 └── utils // 工具类JWT工具、时间格式化、Excel导入导出这套分层的核心逻辑就是前端请求先进ControllerController只负责接收参数和返回结果不写业务逻辑具体的处理流程放在Service层Service调用Mapper完成数据库操作。这样做的好处是人多协作不留坑、代码改动不影响接口定义你自己后期维护也清楚哪个逻辑在哪层。4.2 用户登录与JWT权限认证链路信息知识赛系统里用户和管理员共用一套登录接口靠角色来区分权限。我推荐使用JWTJSON Web Token做认证因为它是无状态方案后端不需要存Session适合前后端分离场景。核心流程是这样用户提交用户名密码后后端校验通过生成一个JWT token返回给前端前端把它存在localStorage或Vuex里在axios请求拦截器中加进请求头通常是Authorization字段后端写一个拦截器对除登录注册等白名单外的接口都校验tokentoken有效则解析出用户ID和角色放行请求。我用Java伪码来展示token工具类的核心方法// JWT工具类基于 jjwt 0.9.1 或 io.jsonwebtoken:jjwt-api public class JwtUtil { // 密钥要足够长建议32位以上随机字符串 private static final String SECRET your-256-bit-secret-key; private static final long EXPIRE 1000 * 60 * 60 * 24; // 24小时过期 public static String generateToken(Long userId, String role) { return Jwts.builder() .setSubject(String.valueOf(userId)) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRE)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody(); } }这里要特别提醒几个实际开发中容易踩的坑密钥不能硬编码在代码里最好通过application.yml配置注入否则代码泄露到Git仓库后token机制直接失效。token有效期不要太长竞赛系统一般24小时就够。如果用户中途退出登录前端清除本地token就行不必走后端接口。密码存储必须用BCrypt加密千万不要用MD5。MD5彩虹表攻击太容易了Spring Security自带的BCryptPasswordEncoder几行代码就搞定。4.3 在线答题与自动判分的核心逻辑在线答题是整个系统最核心的业务场景也是并发压力最大的地方。用户在比赛开始后前端会从后端拉取到一套试卷包含题目的选项信息但不包含正确答案。用户答完提交时前端把题号和答案的映射关系POST给后端。后端收到后逐题从数据库查出正确答案进行比对判分。这里设计上有两个方案我根据自己的项目经验对比一下方案优点缺点适用场景前端计时到点自动交卷实现简单逻辑直观有作弊风险用户刷新页面会重新计时低并发、内部赛后端存储开始考试时间每次提交都校验计时准确抗刷新需要额外处理断线重连正式比赛、高并发我个人在二开的时候一般直接把后端计时方案加上类似这样的核心逻辑// 提交答卷判分的Service方法 Transactional public SubmitResultVO submitAnswer(SubmitRequestDTO dto) { // 1. 校验赛事是否还在进行中 ExamEvent event examEventMapper.selectById(dto.getEventId()); if (event.getStatus() ! 1) { throw new BizException(赛事不在进行中); } // 2. 校验当前时间是否在赛事时间内 Date now new Date(); if (now.after(event.getEndTime())) { throw new BizException(赛事已结束不能提交答卷); } // 3. 逐题判分 int correctCount 0; ListQuestionAnswerDTO answers dto.getAnswers(); for (QuestionAnswerDTO answer : answers) { ExamQuestion question examQuestionMapper.selectById(answer.getQuestionId()); boolean correct question.getCorrectAnswer().equalsIgnoreCase(answer.getUserAnswer()); if (correct) { correctCount; } // 将每次作答记录保存到exam_answer表 examAnswerMapper.insert(buildAnswer(dto.getUserId(), dto.getEventId(), question.getId(), answer.getUserAnswer(), correct)); } // 4. 计算总分并写入成绩表 int totalScore (int) (correctCount * (100.0 / answers.size())); ExamScore score ExamScore.builder() .userId(dto.getUserId()).eventId(dto.getEventId()) .score(totalScore).correctCount(correctCount) .totalCount(answers.size()).useTime(dto.getUseSeconds()) .createTime(new Date()).build(); examScoreMapper.insert(score); // 5. 返回成绩这里不返回排名排名查询走排行榜接口 return SubmitResultVO.builder().score(totalScore).correctCount(correctCount).build(); }这样设计的好处是判分逻辑完全在后端完成前端拿不到正确答案想通过浏览器开发者工具看接口响应也看不到能最大限度保证竞赛公平性。另外我在项目里对提交接口加了防重复提交校验——用userId和eventId做联合唯一索引第一次提交成功后再提交直接提示“您已提交过答卷”防止用户手滑重复交卷或者恶意刷接口。4.4 基于SpringBoot的题库导入导出方案题目管理如果只靠前端表单一条条录入效率非常低。实际项目中管理员通常都有Excel批量导入的需求。SpringBoot做Excel导入导出首选的库是EasyExcel这是阿里开源的工具比起POI原始API内存占用更低、API更友好。核心思路定义一个QuestionImportDTO类用注解标注Excel列的对应关系public class QuestionImportDTO { ExcelProperty(题型) private String questionType; // 单选/多选/判断 ExcelProperty(题干) private String questionContent; ExcelProperty(选项A) private String optionA; ExcelProperty(选项B) private String optionB; ExcelProperty(选项C) private String optionC; ExcelProperty(选项D) private String optionD; ExcelProperty(正确答案) private String correctAnswer; ExcelProperty(解析) private String analysis; }然后在Service里用EasyExcel的read方法监听读取逐行映射并批量插入数据库。要特别注意的是导入前必须做数据校验题型是否是合法枚举、正确答案是否在选项范围内、题干是否为空。我把校验失败的记录单独收集起来生成一个错误提示文件返回给前端让管理员知道第几行哪一列有问题方便快速纠正。5. 前端Vue篇界面搭建与交互实现5.1 前端工程项目结构组织Vue前端项目的组织方式直接影响后期维护体验我建议按下面的目录结构来调整如果源码本身的组织思路不同二开时也可以参考src ├── api // 所有接口请求封装按模块切片auth.js, event.js, question.js, score.js ├── assets // 静态资源图片、全局样式 ├── components // 公共组件分页组件、倒计时组件、富文本编辑器组件 ├── router // 路由配置含路由守卫 ├── store // Vuex状态管理用户信息、token、权限标识 ├── views // 页面视图 │ ├── login // 登录页 │ ├── home // 首页/赛事列表 │ ├── exam // 在线考试页面 │ ├── profile // 个人中心/我的成绩 │ ├── admin // 管理后台页面 │ └── 404.vue // 404兜底页 ├── utils // 工具函数axios封装、时间格式化、权限校验 ├── App.vue └── main.js这种结构的核心思想是约定优于配置api目录按后端Controller的模块划分后端一个Controller对应前端一个api文件views下面的目录按页面角色划分用户端页面和管理端页面分开。找代码的时候不用猜按模块名直接定位。5.2 axios统一封装与token注入在前后端分离项目里axios请求封装是所有接口调用的基础。我见过很多初学者项目每个页面里都直接写axios.get或者axios.post代码重复不说一旦后端返回统一错误码要统一处理时就只能满项目去改。我习惯封装一个request.js工具模块核心代码如下import axios from axios import { Message } from element-ui import router from /router const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 通过环境变量控制开发环境指向后端地址生产环境指向同域路径 timeout: 10000 }) // 请求拦截器给每个请求带上token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }, error Promise.reject(error)) // 响应拦截器统一处理返回码 service.interceptors.response.use(response { const res response.data if (res.code ! 200) { Message.error(res.message || 请求失败) if (res.code 401) { // token失效清除本地信息并跳转登录页 localStorage.removeItem(token) router.push(/login) } return Promise.reject(new Error(res.message)) } return res }, error { Message.error(error.message || 网络异常) return Promise.reject(error) }) export default service这里面的核心技巧是统一处理401状态码。当后端拦截器发现token过期或无效时返回401前端接收到后自动清除本地token并跳回登录页。用户不会看到一堆莫名其妙的报错弹窗只会被拉回登录页面重新登录体验会好很多。封装完成后每个模块的接口直接用api文件统一导出例如auth.jsimport request from /utils/request export function login(data) { return request({ url: /api/auth/login, method: post, data }) } export function getEventList(params) { return request({ url: /api/event/list, method: get, params }) }这样页面里只负责调用登录方法拿到结果后处理业务逻辑不用关心请求细节。5.3 在线答题页面的核心交互设计在线答题页面是前端体验的重头戏。做这类页面最容易犯的错误是把所有题目一次性渲染出来用户滑很久都找不到答题区而且翻页查看上一题时要滚动半天。我自己做竞赛系统时强烈建议采用以下交互设计顶部固定倒计时面板显示剩余时间倒计时归零后自动触发提交接口防止用户卡时间点交卷。左侧或上方显示答题卡题目编号网格已经作答的显示绿色未作答的显示灰色点击编号可以跳转到对应题目。中间区域一屏一题通过“上一题/下一题”按钮切换。提交按钮单独放在右上角点提交时弹出确认框显示已作答数量和未作答数量。页面按钮切换到数组索引记录用户答案所有答案保存在本地状态中提交时一次性组装成JSON发给后端。这里有一点要注意答题组件内部的状态更新不要太频繁触发watch否则切题时会出现短暂的卡顿。倒计时组件的核心逻辑可以参考这个写法// 倒计时逻辑核心代码 startCountdown() { if (this.timer) clearInterval(this.timer) this.timer setInterval(() { this.remainSeconds-- if (this.remainSeconds 0) { clearInterval(this.timer) this.handleAutoSubmit() // 到时自动交卷 } // 格式化显示为 HH:mm:ss this.timeText this.formatTime(this.remainSeconds) }, 1000) }Vue 2项目里setInterval容易在组件销毁后还继续跑导致内存泄漏。所以在beforeDestroy钩子里一定要clearInterval这是一个非常容易忽略但必踩的坑。更优雅的方案是用setTimeout递归避免定时器叠加不过对竞赛系统来说setInterval只要清理干净问题不大。5.4 Vue Router路由守卫与权限控制系统分用户端和管理端两套页面路由层面必须做权限控制。Vue Router的路由守卫是当前最常用的方案。// 全局前置守卫未登录跳转登录页无权限提示无权限 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userRole localStorage.getItem(role) if (to.path /login) { next() return } if (!token) { next({ path: /login, query: { redirect: to.fullPath } }) return } // 管理端页面必须管理员角色才能访问 if (to.path.startsWith(/admin) userRole ! ADMIN) { next({ path: /, message: 无权限访问 }) return } next() })这里有一个管理后台经常遇到的体验优化点页面刷新后Vuex里的用户信息会丢失路由守卫将无法判断角色权限。解决办法是在项目启动时main.js里或路由守卫里第一次进入时调用后端getInfo接口重新拉取用户信息并存入Vuex。但要注意避免每次路由跳转都拉接口造成请求轰炸一般用一个标志位控制只拉一次即可。6. MySQL部署与环境搭建6.1 从零安装MySQL的保姆级流程如果本地环境还没装MySQL我可以把最顺畅的安装路线说一下。Windows环境最简单的就是下载MySQL Installer官方地址是dev.mysql.com/downloads/installer。安装时选择Server only开发学习用默认的Developer Default也可以但会带一堆不常用的组件。关键步骤在配置类型那里选Development ComputerMySQL端口默认3306不用改认证方式如果本机开发用选Use Legacy Authentication5.x老客户端兼容性更好或者默认的Strong Password Encryption都行。最后设置root密码建议设置复杂一点开发环境也别用123456这种。配置完成后命令行验证是否安装成功mysql --version如果提示找不到命令大概率是MySQL的bin目录没加到系统环境变量PATH里。Windows下找到MySQL安装目录下的bin路径加入系统变量的Path中重开终端再试。Linux服务器部署时以Ubuntu/Debian为例用apt安装最省事sudo apt update sudo apt install mysql-server -y sudo systemctl enable mysql sudo systemctl start mysql sudo mysql_secure_installation # 安全配置向导按提示设置密码、移除匿名用户安装完后用root登录并创建一个专门的业务账号别让应用直接用root连数据库。这也是我反复强调的安全底线——应用账号只授予该项目数据库的相关权限不要给全局权限。6.2 数据库初始化与数据导入源码包里通常都会附一份SQL脚本文件比如contest.sql或init.sql。拿到后导入即可mysql -u root -p contest.sql或者进入MySQL命令行后执行source指令source /path/to/contest.sql;导入完成后检查一下数据库列表确认是否导入成功SHOW DATABASES; USE contest_db; SHOW TABLES;如果scripts目录下没有SQL文件也可以从SpringBoot的配置里找线索——一般项目的application.yml里会配置database-platform或sql.init相关配置部分项目设计成启动时自动建表。这时只需要提前创建空的数据库并用对应账号授权即可SpringBoot启动时会自动执行建表脚本。6.3 application.yml配置技巧SpringBoot项目的数据库连接配置主要在application.yml或application.properties文件里。我把最常见的配置模板贴出来并解释每个参数的意义server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/contest_db?useUnicodetruecharacterEncodingutf8mb4useSSLfalseserverTimezoneAsia/Shanghai username: contest_app password: your-password hikari: minimum-idle: 5 maximum-pool-size: 20 connection-timeout: 30000 mybatis-plus: mapper-locations: classpath:mapper/**/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl其中URL里的几个参数是关键characterEncodingutf8mb4确保中文与表情符号正常读写useSSLfalse避免本地开发时SSL握手的警告serverTimezoneAsia/Shanghai是配合MySQL 8.x的时区参数不配客户端和服务端时间对不上会出现“Cannot create PoolableConnectionFactory”报错。连接池参数方面开发环境minimum-idle设5、maximum-pool-size设20已经够用。如果把maximum-pool-size设置过大比如100在低并发场景下反而会白白占用数据库连接资源。6.4 Docker快速部署MySQL的省力方案如果你熟悉Docker用容器跑MySQL能省掉很多环境配置的麻烦。一条命令就能拉起一个干净的MySQL实例docker run -d \ --name contest-mysql \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDroot123456 \ -e MYSQL_DATABASEcontest_db \ -e MYSQL_USERcontest_app \ -e MYSQL_PASSWORDcontest_pass \ -v /opt/mysql-data:/var/lib/mysql \ mysql:8.0这条命令背后有几个设计点-v把容器内的数据目录挂载到宿主机容器删了数据还在这是数据安全的关键-e参数一次把root密码、业务数据库、业务账号都设置好容器启动后数据库就自动建好了连初始化脚本都不用额外执行。不过Docker方式部署的MySQL有一个使用细节宿主机如果防火墙开着记得放行3306端口如果同时装了多个MySQL容器要避免宿主机的3306端口被占用冲突。我在服务器上常用这种方式来快速切换不同MySQL版本的测试环境实测下来非常灵活。7. 常见问题与排查技巧实录7.1 项目启动阶段最容易翻车的几个点问题1启动SpringBoot时报数据库连接失败这类问题最常见的原因有三个一是MySQL服务没启动二是连接串里的数据库名和实际库名不一致三是密码错误。建议按顺序排查先确认MySQL服务启动了Windows看服务Linux用systemctl status mysql再用命令行用同样的账号密码试一次能不能连上最后看application.yml的数据库名是否跟实际保持一致。问题2前端npm install报错Vue项目拿下来后第一步就是npm install但这个步骤经常卡壳。老项目锁定的依赖版本比如node-sass和当前的Node.js版本不兼容时会报编译错误国内网络环境npm官方源下载慢或者超时也很常见。解决办法是把npm源切到国内镜像npm config set registry https://registry.npmmirror.com如果node-sass这类库装不上先在package.json里把node-sass换成dart-sasssass包这两个API基本兼容替换成本很低。问题3前端启动正常但页面打不开后端接口排查思路是先看浏览器F12里的Network面板看请求发出去没有、返回什么状态码。如果返回404大概率是后端接口路径和前端请求路径不一致如果返回CORS error说明跨域配置有问题需要前后端任一侧解决跨域或者通过Nginx做代理。我提供后端用配置类解决跨域的一种标准写法Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }但要注意如果Session需要保存登录状态allowCredentials必须为true且allowedOriginPatterns不能是*。如果项目用JWT无状态认证就无所谓了。7.2 运行过程中的核心疑难问题问题4答题提交后成绩为0如果测试时发现用户提交答卷后成绩为0先别怀疑是判分逻辑写错了。大概率是前端提交的答案格式和后端接收的DTO不一致。比如前端提交的是[{questionId: 1, answer: A}]后端DTO里字段名写的是question_id或userAnswerJSON序列化时对不上后端拿到的是null判分时自然全是错误。这个问题我遇到过好多次排查方法很简单在判分逻辑里加一行日志把每个answer对象打出来看到null就明白问题在哪了。问题5高并发下重复提交产生多条成绩前面已经提到了最彻底的防止重复提交方案是给exam_score表的user_id和event_id加联合唯一索引。这样即使同一用户用两次请求同时提交数据库层面也会阻止第二条记录插入。再加上Service层的一次性判断双保险。单靠代码判断并发时会有竞态问题两个请求同时通过判断然后同时插入就会产生两条成绩。数据库的唯一索引是最权威的兜底。问题6导入题库时中文乱码用EasyExcel导入Excel时中文乱码一般是文件流读取时没有指定字符集。排查方法很简单用文本方式打开Excel确认文件内容正常然后在代码读取时显式指定字符集为UTF-8EasyExcel默认支持UTF-8乱码通常发生在使用普通POI的WorkbookFactory读取时。另外要注意Execl文件本身的编码格式和代码读取时设置一致。7.3 个人排查经验小结我做了这么多年项目总结出一个非常管用的排查铁律线上环境或者二开环境出问题先看日志再做猜测。SpringBoot项目启动时控制台会打出完整的异常堆栈Vue项目浏览器F12的Console和Network面板能看到网络请求的所有状态。很多人遇到问题第一反应是去看配置去改代码但没有日志做依据的修改都是盲人摸象。我自己的排查顺序通常是后端日志有无异常堆栈看commentJava或错误码前端Network请求是否报401/500报了什么状态码和响应体数据库里数据对不对。三步下来90%的问题都能定位到具体模块效率非常高。8. 后续可扩展方向与二开建议8.1 功能扩展从能用走向好用这套系统基础功能已经完整但如果要投入真实比赛使用有几个点值得加上。一是防作弊机制。现在单靠前端倒计时和后端判分面对真正的大型比赛是不够的。比较务实的方向是加一个切屏检测前端通过document visibilitychange事件监听用户是否切出页面累计一定次数后自动提交答卷并标记异常。二是成绩Excel导出。管理员需要把成绩单导出成Excel发给上级或归档。EasyExcel在4.4已经介绍过官方API实现一个按赛事导出成绩单的接口大概只用几十行代码。三是批量导入用户。比赛的参赛人员经常是几百人一起导入管理员一个个注册根本不现实。提供一个Excel模板把姓名、学号/工号、手机号批量导入密码默认初始化为学号后六位导入后用户第一次登录强制要求改密。我做过好几个类似系统这个功能几乎每次都会要求加。四是消息通知。赛事开始前自动给报名的用户发短信或站内信提醒。用SpringBoot整合阿里云短信或者只用一张通知表加站内信推送成本都不高。8.2 性能优化应对更大并发如果比赛规模变大几百人同时在线答题这套系统的瓶颈主要集中在数据库。前端的静态资源用Nginx缓存、后端接口返回加上Redis缓存可以扛很大压力常见的优化手段有在Redis里缓存题库数据题目在比赛期间不会变动读取频率极高判分时从缓存取题能减少90%的数据库查询。排行榜数据在Redis中用ZSet存储member是用户IDscore是成绩排名查询直接走Redis毫秒级返回不必每次都GROUP BY成绩表。考试过程中的进度数据也可以先存Redis用户答一题更新一题状态提交时一次性批量写入MySQL。我这里强调一句功能上线前不要盲目优化先用压测工具JMeter或wrk摸清当前系统的瓶颈在哪里再针对性地做缓存和索引优化。很多时候慢的根本原因不是代码而是一条SQL没用上索引。9. 部署上线从本地到服务器的完整路径9.1 后端打包与启动SpringBoot项目打包非常简单在项目根目录执行mvn clean package -DskipTests打包完成后在target目录下会生成一个xxx.jar文件。上传到服务器后用下面的命令直接启动java -jar contest-system.jar --spring.profiles.activeprod这里建议开发环境和生产环境做配置分离application-dev.yml配本地数据库、本地文件路径application-prod.yml配线上数据库、线上日志路径。多套配置的好处是避免每次部署前都要手动改一遍连接串。生产环境建议用Systemd来托管Java进程这样即使进程因内存溢出退出也能自动拉起[Unit] DescriptionContest System Afternetwork.target [Service] Usercontest ExecStart/usr/bin/java -Xms512m -Xmx1024m -jar /opt/contest/contest-system.jar Restarton-failure RestartSec10 [Install] WantedBymulti-user.target9.2 前端打包与Nginx部署Vue前端打包命令npm run build打包完成后dist目录里是一堆静态资源上传到服务器的/opt/contest/dist目录。Nginx配置反向代理与静态文件托管server { listen 80; server_name contest.example.com; # 前端静态资源 root /opt/contest/dist; index index.html; # Vue Router的history模式需要配合try_files location / { try_files $uri $uri/ /index.html; } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }这里的location /api/反向代理配合前端axios的baseURL设置可以完美绕开跨域问题用户访问的是同一个域名下的/api路径不会有CORS限制。这是生产环境最规范的做法也解释了我在5.2里为什么要说生产环境baseURL要指向同域路径。9.3 HTTPS配置现在的浏览器对非HTTPS环境限制越来越严格而且竞赛系统涉及登录密码传输一定要上HTTPS。用Certbot给Nginx申请免费证书几分钟就能搞定sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d contest.example.com证书自动续期HTTPS证书控制台自动生成好发布出来就不用操心证书过期的问题。个人项目或中小企业线上环境基本都推荐这条路。10. 最后再分享几个小技巧根据我个人实践这套系统跑通其实只是开始真正有价值的是让它贴合自己的业务场景。我用这套系统改造过好几个方向的项目分享几个细节一是项目名称和LOGO别忘记全局替换。很多二开项目上线前漏了这步结果前台还挂着别人的系统名非常尴尬。全局搜一下旧的系统名在Vue前端里改页面标题、侧边栏文字在后端改邮箱通知模板等很快就能换好。二是真机上测试一下倒计时切后台的表现。我在实践中发现手机浏览器切到后台后setInterval会被浏览器暂停倒计时会“偷停”。这是移动端的普遍限制不能靠前端保证计时精准必须在后端记录开始答题时间和截止时间每次提交时校验时间差超过时限的答卷按超时处理。这个坑如果你等到正式比赛用户手机端出问题才排查那就晚了。三是接触用户量大的场景时提前申请好云服务器和域名。竞赛类项目有非常明显的波峰波谷流量特征报名截止日和比赛日流量会突然暴涨。建议服务器选4核8G起步数据库连接池按照100并发设置再配合Redis缓存基本能从容应对几百人同时在线答题的场景。最后再补充一句源码项目的价值从来不是跑起来就结束了而是在你实际使用它、二次开发它的过程中获得的那些经验。少走弯路、快速落地是这类项目最大的意义。希望这套信息知识赛系统能成为你完成项目的得力起点。 基于SpringBoot+Vue的前后端分离信息知识赛系统设计与实践
1. 项目概述与核心价值1.1 这套系统到底是干什么的信息知识赛系统说白了就是一套专门跑“知识竞赛”的完整在线平台。我以前帮高校和培训机构搭过好几套类似的竞赛系统所以看到这个标题时第一反应就是——该有的模块应该都齐了。这类系统的典型场景包括校级信息素养大赛、企业内训知识考核、图书馆读书月答题活动、技术社区月度排位赛等等。从一个从业者的角度看这套系统的定位非常清晰管理员在后台上传题库、配置赛事规则参赛用户通过前台完成注册、报名、在线答题比赛结束后系统自动判分、生成排名和成绩单。整个链路用SpringBoot Vue MySQL这个组合来实现属于当前中小型Web项目里最成熟、最好招人维护、也最容易二次开发的技术栈。为什么强调“可直接运行”因为很多开源或分享出来的源码项目下载下来要么缺依赖、要么数据库脚本不全、要么前端环境没配置好真正能一把跑起来的少。这套系统既然敢在标题写“可直接运行”说明作者在环境兼容、数据初始化、前后端联调这些容易翻车的地方下了功夫这对于拿来练手、做毕业设计、或者二次开发接私活的人来说价值非常大。1.2 适合谁去使用和学习我把这个系统适合的人群分成三类你可以自己对号入座。第一类是正在做毕业设计或课程设计的学生。信息知识赛系统这个题目在计算机专业的毕业设计里出现频率很高因为它麻雀虽小五脏俱全前端有页面交互和路由控制后端有权限认证和业务逻辑数据库有多表关联和查询统计。这些正好覆盖了毕业设计评审时最看重的那几个点。拿到这套源码后只需要把系统名称改一改、把页面风格调一调、加一两个自己设计的特色功能比如成绩导出Excel、参赛证书在线生成就是一份很完整的设计成果。第二类是刚开始接触SpringBoot Vue前后端分离开发模式的初级程序员。整套系统是现成的、能跑通的范例可以对照源码理解前后端如何通过接口交互、JWT token如何做身份认证、Vue路由和状态管理在实际项目中怎么组织比看零散的教程要高效得多。第三类是有实际业务需求的企业或机构。比如单位内部要搞安全生产知识竞赛、党建知识测试、员工技能等级考核直接拿这套系统改造一下就能用。我见过不少类似案例从下载源码到部署上线最快三五天就能搞定比自己从零开发省太多事了。2. 整体架构与设计思路拆解2.1 前后端分离架构的选型这套系统采用前后端分离架构前端是Vue后端是SpringBoot两边通过RESTful API进行JSON数据交换。前后端分离这个词在工程上已经是绝对的主流选择核心原因有三个。第一是职责解耦。前端工程师只需要关心页面怎么写、接口怎么调后端工程师只需要关心业务逻辑和数据怎么设计两边可以并行开发。对于这套竞赛系统来说意味着前端页面调整不影响到后端逻辑反之亦然。第二是部署弹性。前端打包成纯静态文件后可以用Nginx直接托管能非常方便地做CDN加速后端SpringBoot项目打成Jar包放服务器上一条命令就能启动。当并发量上来时前端静态资源和后端服务甚至可以分别做水平扩展。第三是技术红利。Vue在前端生态里以学习曲线平缓、中文文档完善著称SpringBoot更是Java领域的事实标准社区极其成熟。需要提醒的是前后端分离也带来了一些额外要处理的麻烦。最典型的就是跨域问题浏览器安全策略会拦截非同源的Ajax请求所以项目里通常需要解决跨域——SpringBoot后端配置CORS过滤器或者通过Nginx反向代理将前后端映射到同一个域名下详细操作我后面会单独说。2.2 核心功能模块与数据流转信息知识赛系统从功能模块划分来看大致可以拆成下面几个部分用户端部分用户注册登录、个人中心、赛事列表查看、报名参赛、在线答题考试、成绩查询、排行榜浏览。管理端部分管理员登录、用户管理、赛事管理、题库管理包括题目增删改查与导入导出、试卷配置、成绩统计、公告发布。这两端对应的就是两套界面和两个角色体系。用户端给参赛者使用界面要简洁直接答题体验要顺畅管理端给系统管理员或赛务组织者使用功能密度高更强调数据管理操作的效率。数据流转的核心链路是这样的用户在前端报名某场赛事后后台会自动创建一条参赛记录管理员配置好的试卷从题库中选题在赛事开始后开放给用户用户提交答卷后后端逐题比对标准答案并计算得分、记录答题用时赛事结束后系统汇总所有用户成绩生成排行榜。整个过程涉及的数据表至少包括用户表、角色表、赛事表、报名表、题库表、试卷表、答卷表、成绩表可能还有公告表。这些表的关联关系是这类系统的数据核心我在第3部分会给出详细的建表设计思路。2.3 技术栈配合上的几个关键考量_SpringBoot侧的关键考量使用SpringBoot最舒服的一点是自动配置机制默认整合了内嵌Tomcat新版本是Tomcat 9/10或Undertow视Boot版本而定。项目里一般会用MyBatis-Plus作为持久层框架它比纯MyBatis省去大量XML编写分页查询直接有现成插件配合代码生成器能快速产出实体类、Mapper接口、Service层代码很适合信息知识赛系统这种业务相对标准化的项目。权限认证用Spring Security或JWT方案都可以。若用Spring Security加JWT拦截器与过滤器链的配置是核心若只依赖JWT配合拦截器实现更轻量。如果只是给系统内部使用轻量方案配置起来省事很多。_Vue侧的关键考量Vue 2配合Element UI还是Vue 3配合Element Plus需要看源码本身版本。老项目用Vue 2的比较多但新项目建议直接上手Vue 3Composition API写业务逻辑更清晰。前端核心难点不在写页面而在接口层的封装和状态管理项目里一定要有一个统一的axios请求封装文件统一处理token注入、错误码拦截、加载状态提示状态管理用Vuex或Pinia存储当前登录用户信息和权限标识否则刷新页面后用户信息丢失体验会很糟糕。_MySQL侧的关键考量这个系统的数据量通常不大题库几千道、用户几千人已经是上限所以MySQL 5.7或8.0都完全够用。关键是把字符集统一设置为utf8mb4否则用户提交的答案里一旦有表情符号或生僻字存储就会报错。还有一点是数据库连接池配置生产环境建议用HikariCP这已经是SpringBoot 2.x以上版本的默认选项并发性能比早期的DBCP和C3P0好很多。3. 数据库设计与核心表结构3.1 信息知识赛系统的ER设计与表关系数据库设计是这类系统的地基。我见过不少半路出家的源码项目功能做出来了但表设计一塌糊涂比如把题目内容直接冗余在试卷表里导致后续改一道题要同步改几百个地方。一个好的表结构应该是题目是题目试卷是试卷二者通过中间关系表关联。我以这套系统的核心链路来拆一下ER关系用户表sys_user与角色表sys_role是多对多关系用户拥有角色角色拥有菜单权限。赛事表exam_event与用户表通过报名表exam_registration关联一个用户能报多场赛事一场赛事能接受多个用户报名。试卷表exam_paper与题库表exam_question通过试卷题目表exam_paper_question关联一场赛事关联一份或若干份试卷试卷题目表里还可以额外记录每道题的分值。用户答卷时答卷表exam_answer记录用户对每道题的作答内容成绩表exam_score记录最终得分和排名。这样设计的好处是扩展性极强。以后要加新题型比如判断题、填空题、新赛事类型比如团队赛、新统计维度比如按部门汇总都只要改对应的一张表不会影响全局。3.2 建表SQL核心脚本参考下面是一套精简但完整可用的核心表结构SQL脚本我在多个竞赛类项目里都是用这个骨架调整的。-- 用户表 CREATE TABLE sys_user ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键ID, username varchar(50) NOT NULL COMMENT 用户名, password varchar(100) NOT NULL COMMENT 密码(BCrypt加密), real_name varchar(50) DEFAULT NULL COMMENT 真实姓名, phone varchar(20) DEFAULT NULL COMMENT 手机号, email varchar(100) DEFAULT NULL COMMENT 邮箱, status tinyint DEFAULT 1 COMMENT 状态(1-正常 0-禁用), create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT系统用户表; -- 竞赛赛事表 CREATE TABLE exam_event ( id bigint NOT NULL AUTO_INCREMENT COMMENT 赛事ID, event_name varchar(100) NOT NULL COMMENT 赛事名称, event_desc text COMMENT 赛事描述, start_time datetime DEFAULT NULL COMMENT 开始时间, end_time datetime DEFAULT NULL COMMENT 结束时间, duration int DEFAULT 60 COMMENT 答题时长(分钟), pass_score int DEFAULT 60 COMMENT 及格分数, status tinyint DEFAULT 0 COMMENT 状态(0-未开始 1-进行中 2-已结束), create_by bigint DEFAULT NULL COMMENT 创建人ID, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT赛事表; -- 题库表 CREATE TABLE exam_question ( id bigint NOT NULL AUTO_INCREMENT COMMENT 题目ID, question_type tinyint NOT NULL COMMENT 题型(1-单选 2-多选 3-判断), question_content text NOT NULL COMMENT 题干内容, option_a varchar(500) DEFAULT NULL COMMENT 选项A, option_b varchar(500) DEFAULT NULL COMMENT 选项B, option_c varchar(500) DEFAULT NULL COMMENT 选项C, option_d varchar(500) DEFAULT NULL COMMENT 选项D, correct_answer varchar(10) NOT NULL COMMENT 正确答案(如A/AB/对), analysis text COMMENT 答案解析, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT题库表; -- 答卷表记录用户每题作答 CREATE TABLE exam_answer ( id bigint NOT NULL AUTO_INCREMENT COMMENT 作答ID, user_id bigint NOT NULL COMMENT 用户ID, event_id bigint NOT NULL COMMENT 赛事ID, question_id bigint NOT NULL COMMENT 题目ID, user_answer varchar(10) DEFAULT NULL COMMENT 用户答案, is_correct tinyint DEFAULT NULL COMMENT 是否正确(1-是 0-否), create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 作答时间, PRIMARY KEY (id), KEY idx_user_event (user_id, event_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT答卷记录表; -- 成绩表 CREATE TABLE exam_score ( id bigint NOT NULL AUTO_INCREMENT COMMENT 成绩ID, user_id bigint NOT NULL COMMENT 用户ID, event_id bigint NOT NULL COMMENT 赛事ID, score int DEFAULT 0 COMMENT 总分, correct_count int DEFAULT 0 COMMENT 答对题数, total_count int DEFAULT 0 COMMENT 总题数, use_time int DEFAULT 0 COMMENT 用时(秒), rank_no int DEFAULT NULL COMMENT 排名, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 提交时间, PRIMARY KEY (id), KEY idx_event_score (event_id, score) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT成绩表;这套表结构基本能满足90%的竞赛场景。题库表用列来承载选项option_a到option_d虽然看起来不够“范式优雅”但实际开发和维护最直观也不容易出错。如果未来要支持不定项数量的选项再考虑拆成选项子表。3.3 数据库层面的几个易踩坑点字符集问题建表时一定要显式指定DEFAULT CHARSETutf8mb4尤其是MySQL 5.7环境默认字符集可能是latin1。一旦题目里有中文标点或特殊符号就会出现乱码或报错。如果数据库已经建成记得先改库再改表ALTER DATABASE xxx CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci。时间字段问题赛事的开始时间和结束时间建议用datetime而不是timestamp。timestamp类型有2038年上限问题而且存进去会有时区转换。对于一些要跨凌晨的赛事datetime搭配服务器时区统一为Asia/Shanghai就行。外键与索引问题很多教学项目喜欢在表定义里直接写FOREIGN KEY约束但在实际生产环境我更推荐逻辑外键——也就是在业务代码层面维护关联关系建表时不建物理外键。原因很简单物理外键会导致插入、更新时需要额外的校验高并发下容易出现锁竞争而且一旦表数据量上来要删除某场比赛的时候外键约束会非常限制操作自由度。通过联合索引比如user_id event_id来加速查询就够了。4. 后端SpringBoot核心实现要点4.1 项目结构示范与分层思想这套系统的后端代码结构建议按我下面这种方式分包既不显得臃肿也方便后续功能扩展com.contest ├── config // 全局配置类跨域、拦截器、MyBatis-Plus分页插件 ├── controller // 接口层前后端交互入口 ├── service // 业务逻辑层接口实现 ├── mapper // 数据访问层MyBatis-Plus的Mapper接口 ├── entity // 实体类与数据库表对应 ├── dto // 数据传输对象接收前端参数、自定义返回结构 ├── vo // 视图对象返回给前端的组装数据 ├── common // 通用类统一返回结果、异常处理、常量定义 └── utils // 工具类JWT工具、时间格式化、Excel导入导出这套分层的核心逻辑就是前端请求先进ControllerController只负责接收参数和返回结果不写业务逻辑具体的处理流程放在Service层Service调用Mapper完成数据库操作。这样做的好处是人多协作不留坑、代码改动不影响接口定义你自己后期维护也清楚哪个逻辑在哪层。4.2 用户登录与JWT权限认证链路信息知识赛系统里用户和管理员共用一套登录接口靠角色来区分权限。我推荐使用JWTJSON Web Token做认证因为它是无状态方案后端不需要存Session适合前后端分离场景。核心流程是这样用户提交用户名密码后后端校验通过生成一个JWT token返回给前端前端把它存在localStorage或Vuex里在axios请求拦截器中加进请求头通常是Authorization字段后端写一个拦截器对除登录注册等白名单外的接口都校验tokentoken有效则解析出用户ID和角色放行请求。我用Java伪码来展示token工具类的核心方法// JWT工具类基于 jjwt 0.9.1 或 io.jsonwebtoken:jjwt-api public class JwtUtil { // 密钥要足够长建议32位以上随机字符串 private static final String SECRET your-256-bit-secret-key; private static final long EXPIRE 1000 * 60 * 60 * 24; // 24小时过期 public static String generateToken(Long userId, String role) { return Jwts.builder() .setSubject(String.valueOf(userId)) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRE)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody(); } }这里要特别提醒几个实际开发中容易踩的坑密钥不能硬编码在代码里最好通过application.yml配置注入否则代码泄露到Git仓库后token机制直接失效。token有效期不要太长竞赛系统一般24小时就够。如果用户中途退出登录前端清除本地token就行不必走后端接口。密码存储必须用BCrypt加密千万不要用MD5。MD5彩虹表攻击太容易了Spring Security自带的BCryptPasswordEncoder几行代码就搞定。4.3 在线答题与自动判分的核心逻辑在线答题是整个系统最核心的业务场景也是并发压力最大的地方。用户在比赛开始后前端会从后端拉取到一套试卷包含题目的选项信息但不包含正确答案。用户答完提交时前端把题号和答案的映射关系POST给后端。后端收到后逐题从数据库查出正确答案进行比对判分。这里设计上有两个方案我根据自己的项目经验对比一下方案优点缺点适用场景前端计时到点自动交卷实现简单逻辑直观有作弊风险用户刷新页面会重新计时低并发、内部赛后端存储开始考试时间每次提交都校验计时准确抗刷新需要额外处理断线重连正式比赛、高并发我个人在二开的时候一般直接把后端计时方案加上类似这样的核心逻辑// 提交答卷判分的Service方法 Transactional public SubmitResultVO submitAnswer(SubmitRequestDTO dto) { // 1. 校验赛事是否还在进行中 ExamEvent event examEventMapper.selectById(dto.getEventId()); if (event.getStatus() ! 1) { throw new BizException(赛事不在进行中); } // 2. 校验当前时间是否在赛事时间内 Date now new Date(); if (now.after(event.getEndTime())) { throw new BizException(赛事已结束不能提交答卷); } // 3. 逐题判分 int correctCount 0; ListQuestionAnswerDTO answers dto.getAnswers(); for (QuestionAnswerDTO answer : answers) { ExamQuestion question examQuestionMapper.selectById(answer.getQuestionId()); boolean correct question.getCorrectAnswer().equalsIgnoreCase(answer.getUserAnswer()); if (correct) { correctCount; } // 将每次作答记录保存到exam_answer表 examAnswerMapper.insert(buildAnswer(dto.getUserId(), dto.getEventId(), question.getId(), answer.getUserAnswer(), correct)); } // 4. 计算总分并写入成绩表 int totalScore (int) (correctCount * (100.0 / answers.size())); ExamScore score ExamScore.builder() .userId(dto.getUserId()).eventId(dto.getEventId()) .score(totalScore).correctCount(correctCount) .totalCount(answers.size()).useTime(dto.getUseSeconds()) .createTime(new Date()).build(); examScoreMapper.insert(score); // 5. 返回成绩这里不返回排名排名查询走排行榜接口 return SubmitResultVO.builder().score(totalScore).correctCount(correctCount).build(); }这样设计的好处是判分逻辑完全在后端完成前端拿不到正确答案想通过浏览器开发者工具看接口响应也看不到能最大限度保证竞赛公平性。另外我在项目里对提交接口加了防重复提交校验——用userId和eventId做联合唯一索引第一次提交成功后再提交直接提示“您已提交过答卷”防止用户手滑重复交卷或者恶意刷接口。4.4 基于SpringBoot的题库导入导出方案题目管理如果只靠前端表单一条条录入效率非常低。实际项目中管理员通常都有Excel批量导入的需求。SpringBoot做Excel导入导出首选的库是EasyExcel这是阿里开源的工具比起POI原始API内存占用更低、API更友好。核心思路定义一个QuestionImportDTO类用注解标注Excel列的对应关系public class QuestionImportDTO { ExcelProperty(题型) private String questionType; // 单选/多选/判断 ExcelProperty(题干) private String questionContent; ExcelProperty(选项A) private String optionA; ExcelProperty(选项B) private String optionB; ExcelProperty(选项C) private String optionC; ExcelProperty(选项D) private String optionD; ExcelProperty(正确答案) private String correctAnswer; ExcelProperty(解析) private String analysis; }然后在Service里用EasyExcel的read方法监听读取逐行映射并批量插入数据库。要特别注意的是导入前必须做数据校验题型是否是合法枚举、正确答案是否在选项范围内、题干是否为空。我把校验失败的记录单独收集起来生成一个错误提示文件返回给前端让管理员知道第几行哪一列有问题方便快速纠正。5. 前端Vue篇界面搭建与交互实现5.1 前端工程项目结构组织Vue前端项目的组织方式直接影响后期维护体验我建议按下面的目录结构来调整如果源码本身的组织思路不同二开时也可以参考src ├── api // 所有接口请求封装按模块切片auth.js, event.js, question.js, score.js ├── assets // 静态资源图片、全局样式 ├── components // 公共组件分页组件、倒计时组件、富文本编辑器组件 ├── router // 路由配置含路由守卫 ├── store // Vuex状态管理用户信息、token、权限标识 ├── views // 页面视图 │ ├── login // 登录页 │ ├── home // 首页/赛事列表 │ ├── exam // 在线考试页面 │ ├── profile // 个人中心/我的成绩 │ ├── admin // 管理后台页面 │ └── 404.vue // 404兜底页 ├── utils // 工具函数axios封装、时间格式化、权限校验 ├── App.vue └── main.js这种结构的核心思想是约定优于配置api目录按后端Controller的模块划分后端一个Controller对应前端一个api文件views下面的目录按页面角色划分用户端页面和管理端页面分开。找代码的时候不用猜按模块名直接定位。5.2 axios统一封装与token注入在前后端分离项目里axios请求封装是所有接口调用的基础。我见过很多初学者项目每个页面里都直接写axios.get或者axios.post代码重复不说一旦后端返回统一错误码要统一处理时就只能满项目去改。我习惯封装一个request.js工具模块核心代码如下import axios from axios import { Message } from element-ui import router from /router const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 通过环境变量控制开发环境指向后端地址生产环境指向同域路径 timeout: 10000 }) // 请求拦截器给每个请求带上token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }, error Promise.reject(error)) // 响应拦截器统一处理返回码 service.interceptors.response.use(response { const res response.data if (res.code ! 200) { Message.error(res.message || 请求失败) if (res.code 401) { // token失效清除本地信息并跳转登录页 localStorage.removeItem(token) router.push(/login) } return Promise.reject(new Error(res.message)) } return res }, error { Message.error(error.message || 网络异常) return Promise.reject(error) }) export default service这里面的核心技巧是统一处理401状态码。当后端拦截器发现token过期或无效时返回401前端接收到后自动清除本地token并跳回登录页。用户不会看到一堆莫名其妙的报错弹窗只会被拉回登录页面重新登录体验会好很多。封装完成后每个模块的接口直接用api文件统一导出例如auth.jsimport request from /utils/request export function login(data) { return request({ url: /api/auth/login, method: post, data }) } export function getEventList(params) { return request({ url: /api/event/list, method: get, params }) }这样页面里只负责调用登录方法拿到结果后处理业务逻辑不用关心请求细节。5.3 在线答题页面的核心交互设计在线答题页面是前端体验的重头戏。做这类页面最容易犯的错误是把所有题目一次性渲染出来用户滑很久都找不到答题区而且翻页查看上一题时要滚动半天。我自己做竞赛系统时强烈建议采用以下交互设计顶部固定倒计时面板显示剩余时间倒计时归零后自动触发提交接口防止用户卡时间点交卷。左侧或上方显示答题卡题目编号网格已经作答的显示绿色未作答的显示灰色点击编号可以跳转到对应题目。中间区域一屏一题通过“上一题/下一题”按钮切换。提交按钮单独放在右上角点提交时弹出确认框显示已作答数量和未作答数量。页面按钮切换到数组索引记录用户答案所有答案保存在本地状态中提交时一次性组装成JSON发给后端。这里有一点要注意答题组件内部的状态更新不要太频繁触发watch否则切题时会出现短暂的卡顿。倒计时组件的核心逻辑可以参考这个写法// 倒计时逻辑核心代码 startCountdown() { if (this.timer) clearInterval(this.timer) this.timer setInterval(() { this.remainSeconds-- if (this.remainSeconds 0) { clearInterval(this.timer) this.handleAutoSubmit() // 到时自动交卷 } // 格式化显示为 HH:mm:ss this.timeText this.formatTime(this.remainSeconds) }, 1000) }Vue 2项目里setInterval容易在组件销毁后还继续跑导致内存泄漏。所以在beforeDestroy钩子里一定要clearInterval这是一个非常容易忽略但必踩的坑。更优雅的方案是用setTimeout递归避免定时器叠加不过对竞赛系统来说setInterval只要清理干净问题不大。5.4 Vue Router路由守卫与权限控制系统分用户端和管理端两套页面路由层面必须做权限控制。Vue Router的路由守卫是当前最常用的方案。// 全局前置守卫未登录跳转登录页无权限提示无权限 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userRole localStorage.getItem(role) if (to.path /login) { next() return } if (!token) { next({ path: /login, query: { redirect: to.fullPath } }) return } // 管理端页面必须管理员角色才能访问 if (to.path.startsWith(/admin) userRole ! ADMIN) { next({ path: /, message: 无权限访问 }) return } next() })这里有一个管理后台经常遇到的体验优化点页面刷新后Vuex里的用户信息会丢失路由守卫将无法判断角色权限。解决办法是在项目启动时main.js里或路由守卫里第一次进入时调用后端getInfo接口重新拉取用户信息并存入Vuex。但要注意避免每次路由跳转都拉接口造成请求轰炸一般用一个标志位控制只拉一次即可。6. MySQL部署与环境搭建6.1 从零安装MySQL的保姆级流程如果本地环境还没装MySQL我可以把最顺畅的安装路线说一下。Windows环境最简单的就是下载MySQL Installer官方地址是dev.mysql.com/downloads/installer。安装时选择Server only开发学习用默认的Developer Default也可以但会带一堆不常用的组件。关键步骤在配置类型那里选Development ComputerMySQL端口默认3306不用改认证方式如果本机开发用选Use Legacy Authentication5.x老客户端兼容性更好或者默认的Strong Password Encryption都行。最后设置root密码建议设置复杂一点开发环境也别用123456这种。配置完成后命令行验证是否安装成功mysql --version如果提示找不到命令大概率是MySQL的bin目录没加到系统环境变量PATH里。Windows下找到MySQL安装目录下的bin路径加入系统变量的Path中重开终端再试。Linux服务器部署时以Ubuntu/Debian为例用apt安装最省事sudo apt update sudo apt install mysql-server -y sudo systemctl enable mysql sudo systemctl start mysql sudo mysql_secure_installation # 安全配置向导按提示设置密码、移除匿名用户安装完后用root登录并创建一个专门的业务账号别让应用直接用root连数据库。这也是我反复强调的安全底线——应用账号只授予该项目数据库的相关权限不要给全局权限。6.2 数据库初始化与数据导入源码包里通常都会附一份SQL脚本文件比如contest.sql或init.sql。拿到后导入即可mysql -u root -p contest.sql或者进入MySQL命令行后执行source指令source /path/to/contest.sql;导入完成后检查一下数据库列表确认是否导入成功SHOW DATABASES; USE contest_db; SHOW TABLES;如果scripts目录下没有SQL文件也可以从SpringBoot的配置里找线索——一般项目的application.yml里会配置database-platform或sql.init相关配置部分项目设计成启动时自动建表。这时只需要提前创建空的数据库并用对应账号授权即可SpringBoot启动时会自动执行建表脚本。6.3 application.yml配置技巧SpringBoot项目的数据库连接配置主要在application.yml或application.properties文件里。我把最常见的配置模板贴出来并解释每个参数的意义server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/contest_db?useUnicodetruecharacterEncodingutf8mb4useSSLfalseserverTimezoneAsia/Shanghai username: contest_app password: your-password hikari: minimum-idle: 5 maximum-pool-size: 20 connection-timeout: 30000 mybatis-plus: mapper-locations: classpath:mapper/**/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl其中URL里的几个参数是关键characterEncodingutf8mb4确保中文与表情符号正常读写useSSLfalse避免本地开发时SSL握手的警告serverTimezoneAsia/Shanghai是配合MySQL 8.x的时区参数不配客户端和服务端时间对不上会出现“Cannot create PoolableConnectionFactory”报错。连接池参数方面开发环境minimum-idle设5、maximum-pool-size设20已经够用。如果把maximum-pool-size设置过大比如100在低并发场景下反而会白白占用数据库连接资源。6.4 Docker快速部署MySQL的省力方案如果你熟悉Docker用容器跑MySQL能省掉很多环境配置的麻烦。一条命令就能拉起一个干净的MySQL实例docker run -d \ --name contest-mysql \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDroot123456 \ -e MYSQL_DATABASEcontest_db \ -e MYSQL_USERcontest_app \ -e MYSQL_PASSWORDcontest_pass \ -v /opt/mysql-data:/var/lib/mysql \ mysql:8.0这条命令背后有几个设计点-v把容器内的数据目录挂载到宿主机容器删了数据还在这是数据安全的关键-e参数一次把root密码、业务数据库、业务账号都设置好容器启动后数据库就自动建好了连初始化脚本都不用额外执行。不过Docker方式部署的MySQL有一个使用细节宿主机如果防火墙开着记得放行3306端口如果同时装了多个MySQL容器要避免宿主机的3306端口被占用冲突。我在服务器上常用这种方式来快速切换不同MySQL版本的测试环境实测下来非常灵活。7. 常见问题与排查技巧实录7.1 项目启动阶段最容易翻车的几个点问题1启动SpringBoot时报数据库连接失败这类问题最常见的原因有三个一是MySQL服务没启动二是连接串里的数据库名和实际库名不一致三是密码错误。建议按顺序排查先确认MySQL服务启动了Windows看服务Linux用systemctl status mysql再用命令行用同样的账号密码试一次能不能连上最后看application.yml的数据库名是否跟实际保持一致。问题2前端npm install报错Vue项目拿下来后第一步就是npm install但这个步骤经常卡壳。老项目锁定的依赖版本比如node-sass和当前的Node.js版本不兼容时会报编译错误国内网络环境npm官方源下载慢或者超时也很常见。解决办法是把npm源切到国内镜像npm config set registry https://registry.npmmirror.com如果node-sass这类库装不上先在package.json里把node-sass换成dart-sasssass包这两个API基本兼容替换成本很低。问题3前端启动正常但页面打不开后端接口排查思路是先看浏览器F12里的Network面板看请求发出去没有、返回什么状态码。如果返回404大概率是后端接口路径和前端请求路径不一致如果返回CORS error说明跨域配置有问题需要前后端任一侧解决跨域或者通过Nginx做代理。我提供后端用配置类解决跨域的一种标准写法Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }但要注意如果Session需要保存登录状态allowCredentials必须为true且allowedOriginPatterns不能是*。如果项目用JWT无状态认证就无所谓了。7.2 运行过程中的核心疑难问题问题4答题提交后成绩为0如果测试时发现用户提交答卷后成绩为0先别怀疑是判分逻辑写错了。大概率是前端提交的答案格式和后端接收的DTO不一致。比如前端提交的是[{questionId: 1, answer: A}]后端DTO里字段名写的是question_id或userAnswerJSON序列化时对不上后端拿到的是null判分时自然全是错误。这个问题我遇到过好多次排查方法很简单在判分逻辑里加一行日志把每个answer对象打出来看到null就明白问题在哪了。问题5高并发下重复提交产生多条成绩前面已经提到了最彻底的防止重复提交方案是给exam_score表的user_id和event_id加联合唯一索引。这样即使同一用户用两次请求同时提交数据库层面也会阻止第二条记录插入。再加上Service层的一次性判断双保险。单靠代码判断并发时会有竞态问题两个请求同时通过判断然后同时插入就会产生两条成绩。数据库的唯一索引是最权威的兜底。问题6导入题库时中文乱码用EasyExcel导入Excel时中文乱码一般是文件流读取时没有指定字符集。排查方法很简单用文本方式打开Excel确认文件内容正常然后在代码读取时显式指定字符集为UTF-8EasyExcel默认支持UTF-8乱码通常发生在使用普通POI的WorkbookFactory读取时。另外要注意Execl文件本身的编码格式和代码读取时设置一致。7.3 个人排查经验小结我做了这么多年项目总结出一个非常管用的排查铁律线上环境或者二开环境出问题先看日志再做猜测。SpringBoot项目启动时控制台会打出完整的异常堆栈Vue项目浏览器F12的Console和Network面板能看到网络请求的所有状态。很多人遇到问题第一反应是去看配置去改代码但没有日志做依据的修改都是盲人摸象。我自己的排查顺序通常是后端日志有无异常堆栈看commentJava或错误码前端Network请求是否报401/500报了什么状态码和响应体数据库里数据对不对。三步下来90%的问题都能定位到具体模块效率非常高。8. 后续可扩展方向与二开建议8.1 功能扩展从能用走向好用这套系统基础功能已经完整但如果要投入真实比赛使用有几个点值得加上。一是防作弊机制。现在单靠前端倒计时和后端判分面对真正的大型比赛是不够的。比较务实的方向是加一个切屏检测前端通过document visibilitychange事件监听用户是否切出页面累计一定次数后自动提交答卷并标记异常。二是成绩Excel导出。管理员需要把成绩单导出成Excel发给上级或归档。EasyExcel在4.4已经介绍过官方API实现一个按赛事导出成绩单的接口大概只用几十行代码。三是批量导入用户。比赛的参赛人员经常是几百人一起导入管理员一个个注册根本不现实。提供一个Excel模板把姓名、学号/工号、手机号批量导入密码默认初始化为学号后六位导入后用户第一次登录强制要求改密。我做过好几个类似系统这个功能几乎每次都会要求加。四是消息通知。赛事开始前自动给报名的用户发短信或站内信提醒。用SpringBoot整合阿里云短信或者只用一张通知表加站内信推送成本都不高。8.2 性能优化应对更大并发如果比赛规模变大几百人同时在线答题这套系统的瓶颈主要集中在数据库。前端的静态资源用Nginx缓存、后端接口返回加上Redis缓存可以扛很大压力常见的优化手段有在Redis里缓存题库数据题目在比赛期间不会变动读取频率极高判分时从缓存取题能减少90%的数据库查询。排行榜数据在Redis中用ZSet存储member是用户IDscore是成绩排名查询直接走Redis毫秒级返回不必每次都GROUP BY成绩表。考试过程中的进度数据也可以先存Redis用户答一题更新一题状态提交时一次性批量写入MySQL。我这里强调一句功能上线前不要盲目优化先用压测工具JMeter或wrk摸清当前系统的瓶颈在哪里再针对性地做缓存和索引优化。很多时候慢的根本原因不是代码而是一条SQL没用上索引。9. 部署上线从本地到服务器的完整路径9.1 后端打包与启动SpringBoot项目打包非常简单在项目根目录执行mvn clean package -DskipTests打包完成后在target目录下会生成一个xxx.jar文件。上传到服务器后用下面的命令直接启动java -jar contest-system.jar --spring.profiles.activeprod这里建议开发环境和生产环境做配置分离application-dev.yml配本地数据库、本地文件路径application-prod.yml配线上数据库、线上日志路径。多套配置的好处是避免每次部署前都要手动改一遍连接串。生产环境建议用Systemd来托管Java进程这样即使进程因内存溢出退出也能自动拉起[Unit] DescriptionContest System Afternetwork.target [Service] Usercontest ExecStart/usr/bin/java -Xms512m -Xmx1024m -jar /opt/contest/contest-system.jar Restarton-failure RestartSec10 [Install] WantedBymulti-user.target9.2 前端打包与Nginx部署Vue前端打包命令npm run build打包完成后dist目录里是一堆静态资源上传到服务器的/opt/contest/dist目录。Nginx配置反向代理与静态文件托管server { listen 80; server_name contest.example.com; # 前端静态资源 root /opt/contest/dist; index index.html; # Vue Router的history模式需要配合try_files location / { try_files $uri $uri/ /index.html; } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }这里的location /api/反向代理配合前端axios的baseURL设置可以完美绕开跨域问题用户访问的是同一个域名下的/api路径不会有CORS限制。这是生产环境最规范的做法也解释了我在5.2里为什么要说生产环境baseURL要指向同域路径。9.3 HTTPS配置现在的浏览器对非HTTPS环境限制越来越严格而且竞赛系统涉及登录密码传输一定要上HTTPS。用Certbot给Nginx申请免费证书几分钟就能搞定sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d contest.example.com证书自动续期HTTPS证书控制台自动生成好发布出来就不用操心证书过期的问题。个人项目或中小企业线上环境基本都推荐这条路。10. 最后再分享几个小技巧根据我个人实践这套系统跑通其实只是开始真正有价值的是让它贴合自己的业务场景。我用这套系统改造过好几个方向的项目分享几个细节一是项目名称和LOGO别忘记全局替换。很多二开项目上线前漏了这步结果前台还挂着别人的系统名非常尴尬。全局搜一下旧的系统名在Vue前端里改页面标题、侧边栏文字在后端改邮箱通知模板等很快就能换好。二是真机上测试一下倒计时切后台的表现。我在实践中发现手机浏览器切到后台后setInterval会被浏览器暂停倒计时会“偷停”。这是移动端的普遍限制不能靠前端保证计时精准必须在后端记录开始答题时间和截止时间每次提交时校验时间差超过时限的答卷按超时处理。这个坑如果你等到正式比赛用户手机端出问题才排查那就晚了。三是接触用户量大的场景时提前申请好云服务器和域名。竞赛类项目有非常明显的波峰波谷流量特征报名截止日和比赛日流量会突然暴涨。建议服务器选4核8G起步数据库连接池按照100并发设置再配合Redis缓存基本能从容应对几百人同时在线答题的场景。最后再补充一句源码项目的价值从来不是跑起来就结束了而是在你实际使用它、二次开发它的过程中获得的那些经验。少走弯路、快速落地是这类项目最大的意义。希望这套信息知识赛系统能成为你完成项目的得力起点。