我接手过不少校园竞赛类的管理系统项目自己也用SpringBoot2Vue3这套组合写过类似的练手项目。看到SpringBoot2Vue3MyBatis-PlusMySQL8.0这个标题第一反应就是这就是目前Java Web全栈开发最标准、也最适合学习和二次开发的一套组合。无论你是大三大四准备做毕设还是刚入职想找个完整项目练手这个项目都能覆盖大部分场景。这次就借着这个项目标题把校园竞赛管理系统从需求拆解、技术选型、模块划分到环境搭建、核心功能实现、部署上线再到常见坑位排查完整梳理一遍。这不是那种纯讲概念的文章而是可以直接照着做的实操指南。1. 项目整体设计与模块拆解1.1 校园竞赛管理系统到底在管理什么校园竞赛管理系统的核心不是“写代码”而是先搞明白业务上究竟要管哪些事。我见过不少同学拿到项目后直接打开页面开写结果写到一半发现表结构对不上业务场景再回头改反而浪费大量时间。不管是ACM、蓝桥杯还是校内技能赛竞赛的完整生命周期分为赛前发布、赛中报名与审核、现场签到或作品提交、评委打分、成绩公布、证书发放以及赛后的数据统计。所以一个能真正落地的竞赛管理系统至少要包含以下角色和模块管理员端用户管理、竞赛分类管理、创建竞赛、配置赛程、分配评委、审核报名、管理成绩与公告。教师/评委端查看被分配的评审任务录入评分或下载作品材料。学生端浏览竞赛列表、查看详情、在线报名、上传作品、查看个人成绩与获奖状态。角色之间的关系可以用一句话概括管理员搭台学生报名评委打分系统汇总。抽象成模块后整个系统就是“用户体系竞赛管理报名审核成绩管理内容管理”这五大块的组合。明白了这个框架再去设计数据库后续所有接口和页面的开发都会顺畅很多。1.2 三层架构与前后端分离的划分方式这套项目采用的是典型的前后端分离架构。后端以SpringBoot2为底座按Controller、Service、Mapper三层划分前端用Vue3做单页应用与后端通过RESTful接口交互。很多初学者会纠结“前后端分离项目代码到底怎么组织”。我建议按功能模块来分包而不是按技术类型硬拆。后端可以这样规划controller接收请求、参数校验、返回统一结果对象。service业务逻辑层例如报名时校验是否重复、竞赛是否已经开始。mapper数据库操作层配合MyBatis-Plus的BaseMapper大部分CRUD不需要写SQL。entity数据库实体类与表字段一一对应。dto/vo接口入参对象与返回视图对象避免直接把实体暴露给前端。前端则建议用Vue3的组合式API配合Vite构建目录上按views页面、components通用组件、api接口封装、router路由、store全局状态划分。这样分层后前后端各司其职后续无论是单独给前端换皮肤还是给后端加接口都不会互相影响。2. 技术栈选型解析为什么是这四项搭配2.1 SpringBoot2成熟稳定资源最多最近几年SpringBoot3也逐渐普及但对于一个要兼顾教学、毕设、快速交付的校园管理系统来说SpringBoot2.x依然是更稳妥的选择。原因有三点第一SpringBoot2的生态资料极其丰富网上随便一搜就是完整案例哪怕你是第一次做全栈项目遇到报错也能很快找到解决方案。第二很多公司内部的老项目和新启动的中小型项目仍然基于SpringBoot2学习它能更贴近实际工作环境。第三SpringBoot2与MyBatis-Plus、Vue3等在版本兼容上非常成熟不会像追新版本那样踩到莫名其妙的不兼容问题。这里补充一个重点不要在SpringBoot2.x下随意引入依赖的最新版本。举一个我实际踩过的例子有同事引入了最新版的mybatis-plus-boot-starter结果自带了一个较新的MyBatis版本和SpringBoot2的自动配置类发生了冲突启动直接报错。同类问题也常见于ShardingSphere、Redis等组件的starter依赖上。最稳妥的方式是查一下当前SpringBoot2版本对应的、社区验证过的依赖版本。2.2 Vue3比Vue2好在哪迁移需要注意什么Vue3的升级不只是性能提升最重要是从选项式API走向了组合式API。Vue2里我们写data、methods、computed、watch是分开的Vue3中则可以在setup里把数据、逻辑、计算属性按功能聚合在一起代码可读性和复用性都更强。用竞赛管理系统来举例。竞赛列表页既要请求数据又要处理搜索条件、翻页、状态筛选在Vue2中逻辑分散在各选项里在Vue3中用组合式API可以这样组织数据相关的用ref和reactive声明查询动作封装成loadList()函数分页和搜索逻辑直接在handleSearch()和handlePageChange()中处理再用onMounted触发初始化。这样一个页面的所有逻辑都集中在一个模块里不用来回找代码。Vue2迁移到Vue3还有一个重要差异是响应式原理Vue2使用Object.defineProperty进行数据劫持对新增属性、数组下标修改支持不佳Vue3使用Proxy可以监听动态新增和删除操作。如果你在Vue3项目中给一个响应式对象动态添加字段直接obj.newField value在模板里可能没有响应正确做法是使用$set的替代方案即重新赋值整个对象或者事先在对象中声明该字段。项目里如果用了vue-router和pinia也需要注意API变化Vue3路由推荐使用createRouter创建路由实例状态管理不再用Vuex默认方式更推荐使用pinia写法更简洁且天然支持组合式API风格。2.3 MyBatis-Plus开发效率翻倍的ORM利器MyBatis-Plus是MyBatis的增强工具核心价值是“只做增强不做修改”。也就是说MyBatis原有的一切能力都保留只是在上面叠加了通用CRUD、分页插件、条件构造器、代码生成器等能力。很多刚接触的人会混淆MyBatis和MyBatis-Plus的区别。我用一句话概括MyBatis需要你手动写大量的SQL映射MyBatis-Plus则让你免写大部分单表CRUD。具体来说BaseMapper提供了insert、deleteById、updateById、selectById、selectList等现成方法。LambdaQueryWrapper和LambdaUpdateWrapper可以用链式调用的方式拼接查询条件避免硬编码数据库字段名。分页插件用PaginationInnerInterceptor实现不用自己手写LIMIT。在竞赛管理系统中典型的场景是“查询当前用户报名的竞赛列表”。传统MyBatis写法需要写SQL、定义resultMap、配mapper XML到了MyBatis-Plus里一行条件构造器就完成了。自己写SQL的场景仅限于多表关联查询和复杂统计比如查询某个竞赛的报名人数、按学院分组统计获奖数量等。实际情况中如果项目报表统计比较多多表查询还是会用到自定义SQL这也是MyBatis-Plus保留XML映射文件的原因。它解决的是单表CRUD量大的痛点而不是取代SQL。2.4 MySQL8.0新版本带来哪些实际改变MySQL8.0相比5.7在性能、安全、窗口函数、公共表表达式CTE等方面都有明显提升。对校园竞赛管理系统这种中小型系统来说最直接的体验变化有三个方面。一是默认字符集变为utf8mb4可以直接存储emoji不必像MySQL5.7时代那样安装时特殊设置简历、项目介绍里出现的符号、表情都能正常入库。二是窗口函数非常强大例如查询“每个竞赛下报名人数排名前30的学生”一行ROW_NUMBER() OVER (PARTITION BY ...)就能搞定。三是安全性增强默认使用caching_sha2_password认证插件老版本客户端连接时可能报错这时候创建用户时换成mysql_native_password即可。安装MySQL8.0时的几个关键点Windows下建议从官网下载MSI版本安装过程中选择Server only自定义数据目录时不要包含中文路径否则后续初始化容易出问题。安装完成后默认的root账号密码是安装时设置的但root默认只能本地登录。给项目建一个专用数据库和账号授权语法如下CREATE DATABASE IF NOT EXISTS contest_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER contest_userlocalhost IDENTIFIED BY YourPassword123; GRANT ALL PRIVILEGES ON contest_db.* TO contest_userlocalhost; FLUSH PRIVILEGES;application.yml中的连接串建议显式指定时区和加密协议url: jdbc:mysql://localhost:3306/contest_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue如果不加serverTimezone控制台经常会报The server time zone value Öйú±ê׼ʱ¼ä is unrecognized之类的错误。这个坑我帮别人排查过很多次基本都是时区配置缺失导致的。3. 核心功能实现与实操细节3.1 用户认证与权限控制竞赛管理系统的用户角色复杂有学生、教师、管理员、评委权限必须从开发第一天就考虑清楚。常见的做法是Spring Security JWTJWT无状态适合前后端分离。登录成功后后端签发一个包含用户ID、用户名、角色信息的token前端把token存在本地存储中请求时放在Authorization请求头。拦截器或过滤器校验token并根据角色控制接口访问权限。具体实现上后端可以自定义一个JwtAuthenticationFilter在Spring Security的过滤器链中插入解析token后填充当前用户信息到SecurityContextHolder然后在PreAuthorize(hasRole(ADMIN))这样的注解中实现方法级权限控制。校园竞赛系统中可以这样区分权限POST /api/contest仅ADMIN注意权限校验。POST /api/contest/enroll学生、教师均可登录报名。GET /api/contest/{id}/reviews仅ADMIN和评委可访问。前端路由也需要配合做权限控制最简单的做法是在路由meta中标记角色通过路由守卫判断。比如定义meta: { roles: [ADMIN] }路由跳转前检查当前用户的角色是否在允许列表中若否则跳转403页面。登录后动态生成路由比一次性在路由表里写死所有页面更灵活。3.2 竞赛报名与审核流程设计报名功能看似简单实际涉及很多边界情况。一套合理的报名流程至少要处理以下规则竞赛未开始报名时不能报名。竞赛报名已截止或人数已满时不能报名。同一学生不能重复报名同一竞赛。如果是团队赛还需要组长创建团队、添加成员、成员逐个确认。后端表结构上要区分“竞赛表”和“报名表”。竞赛表存竞赛的报名开始时间、结束时间、人数上限报名表存用户ID、竞赛ID、报名状态。状态可以设计为PENDING待审核、APPROVED通过、REJECTED拒绝。举例来说查看某个用户已报名的竞赛在MyBatis-Plus中可以这样写ListEnrollment list enrollmentMapper.selectList( new LambdaQueryWrapperEnrollment() .eq(Enrollment::getUserId, userId) .eq(Enrollment::getStatus, APPROVED) );注意一点如果这种查询需要返回竞赛的标题和封面图单表就不够用了。建议写一个自定义的Mapper方法使用JOIN查询把Enrollment表与Contest表关联起来。MyBatis-Plus的单表能力很强但多表场景还是写好SQL更清晰。3.3 成绩录入与排名展示成绩管理是竞赛系统中最体现业务规则的部分。不同赛制有不同计分方式有的竞赛由多个评委打分最终取平均分有的初赛晋级制前30%进入决赛有的评分包含多个维度权重各不相同。在系统实现上建议把“成绩明细”和“成绩汇总”分开存。成绩明细表记录每个评委对每个参赛作品的具体评分成绩汇总表记录最终每位选手或团队的最终得分与名次。这样做的好处是后续想要回溯某位评委的打分情况以及修正某个错误评分都很方便。成绩录入接口需要做幂等设计同一个评委多次提交同一份评分应当做更新而不是重复插入。防止评委不小心双击提交导致两条记录。排名展示需要注意并发场景。当所有成绩录入完成管理员点击“发布成绩”时系统应计算最终排名并生成获奖名单。计算排名时如果有并列分数可以使用简单的规则先比总分总分相同再比较作品用时或者评委仲裁结果。这个规则在代码里写清楚比事后手工修改数据好得多。3.4 公告与文件上传设计竞赛系统中往往需要发布赛事公告提供比赛材料下载。文件上传功能推荐使用OSS对象存储或本地磁盘存储两种方案。开发阶段用本地磁盘比较方便生产环境则建议用OSS否则服务器重启后上传的文件可能会丢失。用SpringBoot实现文件上传的核心代码非常简短PostMapping(/upload) public ResultString upload(RequestParam(file) MultipartFile file) { // 原始文件名做处理防止路径遍历攻击 String originalFilename file.getOriginalFilename(); String ext originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName System.currentTimeMillis() UUID.randomUUID() ext; // 存储到本地或OSS file.transferTo(new File(uploadDir, fileName)); return Result.success(fileName); }关键点在逻辑上必须先判空、限制文件大小、限制文件类型。比如只允许上传jpg、png、pdf、zip等格式并对上传目录做校验防止用户传入../../xxx路径。生产环境更推荐使用OSS直接在服务端生成签名URL前端直传不经由后端转发能显著减轻后端压力。文件上传的另一个坑是Nginx配置的大小限制。如果前端上传大文件一直报413 Request Entity Too Large多半是Nginx的client_max_body_size默认值太小修改后重启Nginx即可。4. 环境搭建与部署实战4.1 用Docker快速安装MySQL8.0如果本机不想直接装MySQL用Docker是最快的方式。一个命令就能启动MySQL8.0实例docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDroot123456 \ -e MYSQL_DATABASEcontest_db \ -e TZAsia/Shanghai \ -v /opt/mysql-data:/var/lib/mysql \ mysql:8.0参数说明-p 3306:3306将容器的3306端口映射到宿主机。MYSQL_ROOT_PASSWORD设置root密码。MYSQL_DATABASE容器启动时自动创建数据库。-v /opt/mysql-data:/var/lib/mysql数据目录挂载到宿主机容器删掉数据还在。使用Docker部署MySQL有一点必须提醒如果没有把数据目录挂载出来一旦容器被删除所有数据将彻底丢失。所以生产环境的数据目录挂载一定要有。启动完成后可以进入容器验证docker exec -it mysql8 mysql -uroot -p4.2 前端Vue3项目创建与本地联调前端使用Vite创建Vue3项目非常快npm create vitelatest contest-frontend -- --template vue cd contest-frontend npm install npm run dev装上基础依赖npm install axios vue-router pinia element-plus联调阶段需要特别注意跨域问题。开发环境下前端运行在5173端口后端运行在8080端口直接用axios请求后端必跨域。解决方式是在Vite的配置中加一个代理// vite.config.js export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, } } } })这样前端请求/api/contest/list时Vite会自动转发到http://localhost:8080/api/contest/list浏览器端看不到跨域问题开发体验非常顺滑。后端在SpringBoot里也可以同时配置Cors跨域规则但既然用了代理后端一般不需要处理。环境准备好之后先写一个最简单的登录接口前后端跑通一遍完整流程再逐步扩展业务模块。这样比一次性写完所有功能再联调要稳妥得多。4.3 后端项目打包与云服务器部署后端打包用Maven即可mvn clean package -DskipTests打包后会在target目录下生成contest-system.jar。在服务器上部署时推荐使用systemd接管进程而不是简单用nohup java -jar这样服务器重启后服务能自动拉起。systemd服务配置示例[Unit] DescriptionContest System Afternetwork.target [Service] Typesimple Userroot WorkingDirectory/opt/contest ExecStart/usr/bin/java -Xms256m -Xmx512m -jar /opt/contest/contest-system.jar SuccessExitStatus143 Restartalways RestartSec5 [Install] WantedBymulti-user.target把服务文件放在/etc/systemd/system/contest.service执行systemctl daemon-reload和systemctl enable --now contest即可。前端部署更简单npm run build生成dist目录把dist里的文件放到Nginx的站点目录即可。Nginx配置中需要将/api反向代理到后端服务。部署后如果页面能打开但接口请求404多半是Nginx的/api代理规则没配好。有一点容易忽略前端路由如果使用了history模式Nginx必须配置try_files否则用户直接访问某个子路由时会404。配置如下location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; }hash模式则没有这个问题但URL上会带个#不够美观。5. 常见问题与排查技巧实录5.1 后端启动失败与依赖冲突后端启动时报Invalid value type for attribute factoryBeanObjectType: java.lang.String或类似的MyBatis-Plus版本兼容错误大概率是依赖引入了不兼容的MyBatis版本。排查思路是先检查pom.xml中mybatis-plus-boot-starter的版本在SpringBoot2.4及以上环境中需使用3.5.1以上版本。如果是用ShardingSphere做分表还要额外关注它适配的MyBatis版本范围。除了版本冲突最常见的启动失败原因是数据库连接不上。这里建议把所有异常信息完整看一遍不要只看第一行。排查顺序通常是数据库进程是否运行 - 账号密码是否正确 - 数据库名是否存在 - 连接串时区是否正确 - 驱动类是否引入。5.2 分页查询不生效返回全部数据MyBatis-Plus的分页插件需要手动注册。很多初学者只引入了分页依赖但忘了加配置类结果selectPage方法返回的还是全部数据。正确配置如下Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }配置完成后Page对象才能正常工作。如果配置了但分页还是失效检查是否配置出现两次或者自定义SQL中手写了LIMIT。5.3 前端页面白屏与接口跨域前端打开页面白屏先按F12看Console和Network。如果是构建后部署出现白屏多半是打包时base路径没配置对。Vite默认base为/如果部署在子路径下需要修改base: /contest/。接口跨域报错先区分环境开发环境用Vite代理解决生产环境用Nginx反向代理解决。如果两边都做了还报跨域检查后端是否单独配置了Cors跨域规则与代理配置冲突。5.4 常见问题速查表问题现象可能原因解决办法连接MySQL报Public Key Retrieval is not allowed连接串缺少allowPublicKeyRetrievaltrue在JDBC连接串加上该参数后端启动报时区错误JDBC连接串缺少serverTimezone显式指定serverTimezoneAsia/Shanghai分页查询返回全部数据未注册分页插件添加MybatisPlusInterceptor配置类前端刷新子路由404Nginx未配置try_files配置try_files $uri $uri/ /index.html;上传文件报413错误Nginx或Spring Boot上传大小限制调整client_max_body_size和spring.servlet.multipart.max-file-sizeVue3动态添加字段不更新响应式原理差异使用reactive时预先声明字段或重新赋值delete请求在网关或过滤器被过滤部分框架默认只放行GET/POST配置中放行DELETE、PUT方法页面可以打开接口404前后端接口路径不一致检查/api前缀与后端上下文路径相反设置5.5 几条实操中的避坑经验开发这套系统时我踩过的最大的坑是事务问题。报名功能中除了写入报名记录还要更新当前报名人数以及发送通知记录。如果这三个操作不在同一个事务里报名成功后第2步或第3步失败就会出现用户已报名但系统没记录或报名人数不准等脏数据问题。解决办法是在Service方法上加上Transactional(rollbackFor Exception.class)。注意一定要指定rollbackFor否则默认只在运行时异常时回滚遇到受检异常不会回滚数据一致性会被破坏。第二个经验是接口幂等。成绩提交、报名操作都必须做好幂等校验。最实用的办法是前端在发起请求后立即禁用按钮防止用户双击后端在业务上做唯一性约束例如在报名表上加(user_id, contest_id)联合唯一索引数据库层面阻断重复报名。第三点是日志一定要打到位。排查线上问题时日志就是线索。建议在整个操作的入口和出口打印参数与结果特别是第三方交互、文件上传、成绩计算这类关键流程。基本的logback配置里至少要把请求路径、状态码、耗时打出来后续查问题会轻松很多。最后再分享一个小技巧。开发环境中使用application-dev.yml和application-prod.yml分开配置数据库、Redis、文件存储路径等参数配合spring.profiles.active切换。这算是老生常谈但每次帮人排查“为什么本地跑得好好的上服务器就崩”的问题十有八九都是环境配置没分开导致的。这套SpringBoot2Vue3MyBatis-PlusMySQL8.0的组合技术栈非常主流业务场景也很清晰无论是作为课程设计、毕业设计还是个人作品都完全拿得出手。按照上面这些思路把一个校园竞赛管理系统从零跑通之后你对全栈开发的理解会提升一大截至少以后拿到类似的管理系统需求不会再不知道从哪下手了。
SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0校园竞赛管理系统全栈开发实战
我接手过不少校园竞赛类的管理系统项目自己也用SpringBoot2Vue3这套组合写过类似的练手项目。看到SpringBoot2Vue3MyBatis-PlusMySQL8.0这个标题第一反应就是这就是目前Java Web全栈开发最标准、也最适合学习和二次开发的一套组合。无论你是大三大四准备做毕设还是刚入职想找个完整项目练手这个项目都能覆盖大部分场景。这次就借着这个项目标题把校园竞赛管理系统从需求拆解、技术选型、模块划分到环境搭建、核心功能实现、部署上线再到常见坑位排查完整梳理一遍。这不是那种纯讲概念的文章而是可以直接照着做的实操指南。1. 项目整体设计与模块拆解1.1 校园竞赛管理系统到底在管理什么校园竞赛管理系统的核心不是“写代码”而是先搞明白业务上究竟要管哪些事。我见过不少同学拿到项目后直接打开页面开写结果写到一半发现表结构对不上业务场景再回头改反而浪费大量时间。不管是ACM、蓝桥杯还是校内技能赛竞赛的完整生命周期分为赛前发布、赛中报名与审核、现场签到或作品提交、评委打分、成绩公布、证书发放以及赛后的数据统计。所以一个能真正落地的竞赛管理系统至少要包含以下角色和模块管理员端用户管理、竞赛分类管理、创建竞赛、配置赛程、分配评委、审核报名、管理成绩与公告。教师/评委端查看被分配的评审任务录入评分或下载作品材料。学生端浏览竞赛列表、查看详情、在线报名、上传作品、查看个人成绩与获奖状态。角色之间的关系可以用一句话概括管理员搭台学生报名评委打分系统汇总。抽象成模块后整个系统就是“用户体系竞赛管理报名审核成绩管理内容管理”这五大块的组合。明白了这个框架再去设计数据库后续所有接口和页面的开发都会顺畅很多。1.2 三层架构与前后端分离的划分方式这套项目采用的是典型的前后端分离架构。后端以SpringBoot2为底座按Controller、Service、Mapper三层划分前端用Vue3做单页应用与后端通过RESTful接口交互。很多初学者会纠结“前后端分离项目代码到底怎么组织”。我建议按功能模块来分包而不是按技术类型硬拆。后端可以这样规划controller接收请求、参数校验、返回统一结果对象。service业务逻辑层例如报名时校验是否重复、竞赛是否已经开始。mapper数据库操作层配合MyBatis-Plus的BaseMapper大部分CRUD不需要写SQL。entity数据库实体类与表字段一一对应。dto/vo接口入参对象与返回视图对象避免直接把实体暴露给前端。前端则建议用Vue3的组合式API配合Vite构建目录上按views页面、components通用组件、api接口封装、router路由、store全局状态划分。这样分层后前后端各司其职后续无论是单独给前端换皮肤还是给后端加接口都不会互相影响。2. 技术栈选型解析为什么是这四项搭配2.1 SpringBoot2成熟稳定资源最多最近几年SpringBoot3也逐渐普及但对于一个要兼顾教学、毕设、快速交付的校园管理系统来说SpringBoot2.x依然是更稳妥的选择。原因有三点第一SpringBoot2的生态资料极其丰富网上随便一搜就是完整案例哪怕你是第一次做全栈项目遇到报错也能很快找到解决方案。第二很多公司内部的老项目和新启动的中小型项目仍然基于SpringBoot2学习它能更贴近实际工作环境。第三SpringBoot2与MyBatis-Plus、Vue3等在版本兼容上非常成熟不会像追新版本那样踩到莫名其妙的不兼容问题。这里补充一个重点不要在SpringBoot2.x下随意引入依赖的最新版本。举一个我实际踩过的例子有同事引入了最新版的mybatis-plus-boot-starter结果自带了一个较新的MyBatis版本和SpringBoot2的自动配置类发生了冲突启动直接报错。同类问题也常见于ShardingSphere、Redis等组件的starter依赖上。最稳妥的方式是查一下当前SpringBoot2版本对应的、社区验证过的依赖版本。2.2 Vue3比Vue2好在哪迁移需要注意什么Vue3的升级不只是性能提升最重要是从选项式API走向了组合式API。Vue2里我们写data、methods、computed、watch是分开的Vue3中则可以在setup里把数据、逻辑、计算属性按功能聚合在一起代码可读性和复用性都更强。用竞赛管理系统来举例。竞赛列表页既要请求数据又要处理搜索条件、翻页、状态筛选在Vue2中逻辑分散在各选项里在Vue3中用组合式API可以这样组织数据相关的用ref和reactive声明查询动作封装成loadList()函数分页和搜索逻辑直接在handleSearch()和handlePageChange()中处理再用onMounted触发初始化。这样一个页面的所有逻辑都集中在一个模块里不用来回找代码。Vue2迁移到Vue3还有一个重要差异是响应式原理Vue2使用Object.defineProperty进行数据劫持对新增属性、数组下标修改支持不佳Vue3使用Proxy可以监听动态新增和删除操作。如果你在Vue3项目中给一个响应式对象动态添加字段直接obj.newField value在模板里可能没有响应正确做法是使用$set的替代方案即重新赋值整个对象或者事先在对象中声明该字段。项目里如果用了vue-router和pinia也需要注意API变化Vue3路由推荐使用createRouter创建路由实例状态管理不再用Vuex默认方式更推荐使用pinia写法更简洁且天然支持组合式API风格。2.3 MyBatis-Plus开发效率翻倍的ORM利器MyBatis-Plus是MyBatis的增强工具核心价值是“只做增强不做修改”。也就是说MyBatis原有的一切能力都保留只是在上面叠加了通用CRUD、分页插件、条件构造器、代码生成器等能力。很多刚接触的人会混淆MyBatis和MyBatis-Plus的区别。我用一句话概括MyBatis需要你手动写大量的SQL映射MyBatis-Plus则让你免写大部分单表CRUD。具体来说BaseMapper提供了insert、deleteById、updateById、selectById、selectList等现成方法。LambdaQueryWrapper和LambdaUpdateWrapper可以用链式调用的方式拼接查询条件避免硬编码数据库字段名。分页插件用PaginationInnerInterceptor实现不用自己手写LIMIT。在竞赛管理系统中典型的场景是“查询当前用户报名的竞赛列表”。传统MyBatis写法需要写SQL、定义resultMap、配mapper XML到了MyBatis-Plus里一行条件构造器就完成了。自己写SQL的场景仅限于多表关联查询和复杂统计比如查询某个竞赛的报名人数、按学院分组统计获奖数量等。实际情况中如果项目报表统计比较多多表查询还是会用到自定义SQL这也是MyBatis-Plus保留XML映射文件的原因。它解决的是单表CRUD量大的痛点而不是取代SQL。2.4 MySQL8.0新版本带来哪些实际改变MySQL8.0相比5.7在性能、安全、窗口函数、公共表表达式CTE等方面都有明显提升。对校园竞赛管理系统这种中小型系统来说最直接的体验变化有三个方面。一是默认字符集变为utf8mb4可以直接存储emoji不必像MySQL5.7时代那样安装时特殊设置简历、项目介绍里出现的符号、表情都能正常入库。二是窗口函数非常强大例如查询“每个竞赛下报名人数排名前30的学生”一行ROW_NUMBER() OVER (PARTITION BY ...)就能搞定。三是安全性增强默认使用caching_sha2_password认证插件老版本客户端连接时可能报错这时候创建用户时换成mysql_native_password即可。安装MySQL8.0时的几个关键点Windows下建议从官网下载MSI版本安装过程中选择Server only自定义数据目录时不要包含中文路径否则后续初始化容易出问题。安装完成后默认的root账号密码是安装时设置的但root默认只能本地登录。给项目建一个专用数据库和账号授权语法如下CREATE DATABASE IF NOT EXISTS contest_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER contest_userlocalhost IDENTIFIED BY YourPassword123; GRANT ALL PRIVILEGES ON contest_db.* TO contest_userlocalhost; FLUSH PRIVILEGES;application.yml中的连接串建议显式指定时区和加密协议url: jdbc:mysql://localhost:3306/contest_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue如果不加serverTimezone控制台经常会报The server time zone value Öйú±ê׼ʱ¼ä is unrecognized之类的错误。这个坑我帮别人排查过很多次基本都是时区配置缺失导致的。3. 核心功能实现与实操细节3.1 用户认证与权限控制竞赛管理系统的用户角色复杂有学生、教师、管理员、评委权限必须从开发第一天就考虑清楚。常见的做法是Spring Security JWTJWT无状态适合前后端分离。登录成功后后端签发一个包含用户ID、用户名、角色信息的token前端把token存在本地存储中请求时放在Authorization请求头。拦截器或过滤器校验token并根据角色控制接口访问权限。具体实现上后端可以自定义一个JwtAuthenticationFilter在Spring Security的过滤器链中插入解析token后填充当前用户信息到SecurityContextHolder然后在PreAuthorize(hasRole(ADMIN))这样的注解中实现方法级权限控制。校园竞赛系统中可以这样区分权限POST /api/contest仅ADMIN注意权限校验。POST /api/contest/enroll学生、教师均可登录报名。GET /api/contest/{id}/reviews仅ADMIN和评委可访问。前端路由也需要配合做权限控制最简单的做法是在路由meta中标记角色通过路由守卫判断。比如定义meta: { roles: [ADMIN] }路由跳转前检查当前用户的角色是否在允许列表中若否则跳转403页面。登录后动态生成路由比一次性在路由表里写死所有页面更灵活。3.2 竞赛报名与审核流程设计报名功能看似简单实际涉及很多边界情况。一套合理的报名流程至少要处理以下规则竞赛未开始报名时不能报名。竞赛报名已截止或人数已满时不能报名。同一学生不能重复报名同一竞赛。如果是团队赛还需要组长创建团队、添加成员、成员逐个确认。后端表结构上要区分“竞赛表”和“报名表”。竞赛表存竞赛的报名开始时间、结束时间、人数上限报名表存用户ID、竞赛ID、报名状态。状态可以设计为PENDING待审核、APPROVED通过、REJECTED拒绝。举例来说查看某个用户已报名的竞赛在MyBatis-Plus中可以这样写ListEnrollment list enrollmentMapper.selectList( new LambdaQueryWrapperEnrollment() .eq(Enrollment::getUserId, userId) .eq(Enrollment::getStatus, APPROVED) );注意一点如果这种查询需要返回竞赛的标题和封面图单表就不够用了。建议写一个自定义的Mapper方法使用JOIN查询把Enrollment表与Contest表关联起来。MyBatis-Plus的单表能力很强但多表场景还是写好SQL更清晰。3.3 成绩录入与排名展示成绩管理是竞赛系统中最体现业务规则的部分。不同赛制有不同计分方式有的竞赛由多个评委打分最终取平均分有的初赛晋级制前30%进入决赛有的评分包含多个维度权重各不相同。在系统实现上建议把“成绩明细”和“成绩汇总”分开存。成绩明细表记录每个评委对每个参赛作品的具体评分成绩汇总表记录最终每位选手或团队的最终得分与名次。这样做的好处是后续想要回溯某位评委的打分情况以及修正某个错误评分都很方便。成绩录入接口需要做幂等设计同一个评委多次提交同一份评分应当做更新而不是重复插入。防止评委不小心双击提交导致两条记录。排名展示需要注意并发场景。当所有成绩录入完成管理员点击“发布成绩”时系统应计算最终排名并生成获奖名单。计算排名时如果有并列分数可以使用简单的规则先比总分总分相同再比较作品用时或者评委仲裁结果。这个规则在代码里写清楚比事后手工修改数据好得多。3.4 公告与文件上传设计竞赛系统中往往需要发布赛事公告提供比赛材料下载。文件上传功能推荐使用OSS对象存储或本地磁盘存储两种方案。开发阶段用本地磁盘比较方便生产环境则建议用OSS否则服务器重启后上传的文件可能会丢失。用SpringBoot实现文件上传的核心代码非常简短PostMapping(/upload) public ResultString upload(RequestParam(file) MultipartFile file) { // 原始文件名做处理防止路径遍历攻击 String originalFilename file.getOriginalFilename(); String ext originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName System.currentTimeMillis() UUID.randomUUID() ext; // 存储到本地或OSS file.transferTo(new File(uploadDir, fileName)); return Result.success(fileName); }关键点在逻辑上必须先判空、限制文件大小、限制文件类型。比如只允许上传jpg、png、pdf、zip等格式并对上传目录做校验防止用户传入../../xxx路径。生产环境更推荐使用OSS直接在服务端生成签名URL前端直传不经由后端转发能显著减轻后端压力。文件上传的另一个坑是Nginx配置的大小限制。如果前端上传大文件一直报413 Request Entity Too Large多半是Nginx的client_max_body_size默认值太小修改后重启Nginx即可。4. 环境搭建与部署实战4.1 用Docker快速安装MySQL8.0如果本机不想直接装MySQL用Docker是最快的方式。一个命令就能启动MySQL8.0实例docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDroot123456 \ -e MYSQL_DATABASEcontest_db \ -e TZAsia/Shanghai \ -v /opt/mysql-data:/var/lib/mysql \ mysql:8.0参数说明-p 3306:3306将容器的3306端口映射到宿主机。MYSQL_ROOT_PASSWORD设置root密码。MYSQL_DATABASE容器启动时自动创建数据库。-v /opt/mysql-data:/var/lib/mysql数据目录挂载到宿主机容器删掉数据还在。使用Docker部署MySQL有一点必须提醒如果没有把数据目录挂载出来一旦容器被删除所有数据将彻底丢失。所以生产环境的数据目录挂载一定要有。启动完成后可以进入容器验证docker exec -it mysql8 mysql -uroot -p4.2 前端Vue3项目创建与本地联调前端使用Vite创建Vue3项目非常快npm create vitelatest contest-frontend -- --template vue cd contest-frontend npm install npm run dev装上基础依赖npm install axios vue-router pinia element-plus联调阶段需要特别注意跨域问题。开发环境下前端运行在5173端口后端运行在8080端口直接用axios请求后端必跨域。解决方式是在Vite的配置中加一个代理// vite.config.js export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, } } } })这样前端请求/api/contest/list时Vite会自动转发到http://localhost:8080/api/contest/list浏览器端看不到跨域问题开发体验非常顺滑。后端在SpringBoot里也可以同时配置Cors跨域规则但既然用了代理后端一般不需要处理。环境准备好之后先写一个最简单的登录接口前后端跑通一遍完整流程再逐步扩展业务模块。这样比一次性写完所有功能再联调要稳妥得多。4.3 后端项目打包与云服务器部署后端打包用Maven即可mvn clean package -DskipTests打包后会在target目录下生成contest-system.jar。在服务器上部署时推荐使用systemd接管进程而不是简单用nohup java -jar这样服务器重启后服务能自动拉起。systemd服务配置示例[Unit] DescriptionContest System Afternetwork.target [Service] Typesimple Userroot WorkingDirectory/opt/contest ExecStart/usr/bin/java -Xms256m -Xmx512m -jar /opt/contest/contest-system.jar SuccessExitStatus143 Restartalways RestartSec5 [Install] WantedBymulti-user.target把服务文件放在/etc/systemd/system/contest.service执行systemctl daemon-reload和systemctl enable --now contest即可。前端部署更简单npm run build生成dist目录把dist里的文件放到Nginx的站点目录即可。Nginx配置中需要将/api反向代理到后端服务。部署后如果页面能打开但接口请求404多半是Nginx的/api代理规则没配好。有一点容易忽略前端路由如果使用了history模式Nginx必须配置try_files否则用户直接访问某个子路由时会404。配置如下location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; }hash模式则没有这个问题但URL上会带个#不够美观。5. 常见问题与排查技巧实录5.1 后端启动失败与依赖冲突后端启动时报Invalid value type for attribute factoryBeanObjectType: java.lang.String或类似的MyBatis-Plus版本兼容错误大概率是依赖引入了不兼容的MyBatis版本。排查思路是先检查pom.xml中mybatis-plus-boot-starter的版本在SpringBoot2.4及以上环境中需使用3.5.1以上版本。如果是用ShardingSphere做分表还要额外关注它适配的MyBatis版本范围。除了版本冲突最常见的启动失败原因是数据库连接不上。这里建议把所有异常信息完整看一遍不要只看第一行。排查顺序通常是数据库进程是否运行 - 账号密码是否正确 - 数据库名是否存在 - 连接串时区是否正确 - 驱动类是否引入。5.2 分页查询不生效返回全部数据MyBatis-Plus的分页插件需要手动注册。很多初学者只引入了分页依赖但忘了加配置类结果selectPage方法返回的还是全部数据。正确配置如下Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }配置完成后Page对象才能正常工作。如果配置了但分页还是失效检查是否配置出现两次或者自定义SQL中手写了LIMIT。5.3 前端页面白屏与接口跨域前端打开页面白屏先按F12看Console和Network。如果是构建后部署出现白屏多半是打包时base路径没配置对。Vite默认base为/如果部署在子路径下需要修改base: /contest/。接口跨域报错先区分环境开发环境用Vite代理解决生产环境用Nginx反向代理解决。如果两边都做了还报跨域检查后端是否单独配置了Cors跨域规则与代理配置冲突。5.4 常见问题速查表问题现象可能原因解决办法连接MySQL报Public Key Retrieval is not allowed连接串缺少allowPublicKeyRetrievaltrue在JDBC连接串加上该参数后端启动报时区错误JDBC连接串缺少serverTimezone显式指定serverTimezoneAsia/Shanghai分页查询返回全部数据未注册分页插件添加MybatisPlusInterceptor配置类前端刷新子路由404Nginx未配置try_files配置try_files $uri $uri/ /index.html;上传文件报413错误Nginx或Spring Boot上传大小限制调整client_max_body_size和spring.servlet.multipart.max-file-sizeVue3动态添加字段不更新响应式原理差异使用reactive时预先声明字段或重新赋值delete请求在网关或过滤器被过滤部分框架默认只放行GET/POST配置中放行DELETE、PUT方法页面可以打开接口404前后端接口路径不一致检查/api前缀与后端上下文路径相反设置5.5 几条实操中的避坑经验开发这套系统时我踩过的最大的坑是事务问题。报名功能中除了写入报名记录还要更新当前报名人数以及发送通知记录。如果这三个操作不在同一个事务里报名成功后第2步或第3步失败就会出现用户已报名但系统没记录或报名人数不准等脏数据问题。解决办法是在Service方法上加上Transactional(rollbackFor Exception.class)。注意一定要指定rollbackFor否则默认只在运行时异常时回滚遇到受检异常不会回滚数据一致性会被破坏。第二个经验是接口幂等。成绩提交、报名操作都必须做好幂等校验。最实用的办法是前端在发起请求后立即禁用按钮防止用户双击后端在业务上做唯一性约束例如在报名表上加(user_id, contest_id)联合唯一索引数据库层面阻断重复报名。第三点是日志一定要打到位。排查线上问题时日志就是线索。建议在整个操作的入口和出口打印参数与结果特别是第三方交互、文件上传、成绩计算这类关键流程。基本的logback配置里至少要把请求路径、状态码、耗时打出来后续查问题会轻松很多。最后再分享一个小技巧。开发环境中使用application-dev.yml和application-prod.yml分开配置数据库、Redis、文件存储路径等参数配合spring.profiles.active切换。这算是老生常谈但每次帮人排查“为什么本地跑得好好的上服务器就崩”的问题十有八九都是环境配置没分开导致的。这套SpringBoot2Vue3MyBatis-PlusMySQL8.0的组合技术栈非常主流业务场景也很清晰无论是作为课程设计、毕业设计还是个人作品都完全拿得出手。按照上面这些思路把一个校园竞赛管理系统从零跑通之后你对全栈开发的理解会提升一大截至少以后拿到类似的管理系统需求不会再不知道从哪下手了。
