“大创管理系统”这名字听着挺传统但真要做起来会发现里面藏的坑一点不比一个正经办公业务系统少。每年大学生创新创业训练计划申报很多学院还在靠Excel来回传学生填一次信息学院统计一次专家评审再手工算一次分中间只要有人改错一格表格整个汇总就乱了。做这套基于SpringBootVue的大创管理系统核心就是把“项目申报、学院审核、专家评审、立项公示、中期检查、结题验收”这条完整链路挪到线上让每个角色打开浏览器就能完成自己的事数据在数据库里留痕不再依赖一堆乱糟糟的表格文件。这篇内容不是我临时凑出来的理论而是我把这套系统从需求分析、数据库设计、后端接口、前端页面到部署调试完整跑通后的经验总结适合准备做课设的同学也适合学校里有真实管理需求、想自己动手搭一套系统的老师或技术人员参考。提示下文涉及的代码和配置我以“能跑通”为第一目标版本都注明清楚了照着操作基本不用改。1. 项目整体设计与技术选型分析1.1 需求到底拆到什么粒度才够用很多人一上来就画一大堆功能图结果开发的时候发现一半功能根本用不上。我建议先按角色把需求理一遍这套系统里最主要的角色有五类学生、指导老师、学院管理员、校级管理员、评审专家。学生注册登录、填写项目信息、选择项目类型创新训练、创业训练、创业实践、上传项目申报书、查看申报进度、补充修改材料。指导老师查看学生申报的项目、填写指导意见、退回或同意申报。学院管理员审核本院学生项目控制申报数量指标导出汇总表。校级管理员管理用户、配置评审批次、分配评审专家、发布立项结果、管理通知公告。评审专家对分配到的项目打分填写评审意见。流程上最核心的一条线是学生提交申报指导老师审核学院管理员初审校级管理员组织专家评审专家打分后系统汇总成绩管理员划定立项名单并公示。需求拆到这一步后端接口基本就能定了千万不要一开始就陷入“我要做一个完美的系统”的执念里。1.2 为什么是这个技术栈组合选型这件事我不喜欢追新但要讲究“生态成熟、资料多、好招人、好复现”。SpringBootVue这个组合放到今天依然是校园类管理系统的稳妥选择理由很实在SpringBoot 2.7.x 版本统一处理了内嵌容器、自动配置、依赖管理不用再像传统SSH那样写一堆XML配置一个启动类就能把后端服务跑起来。Vue 做前端页面交互非常顺手组件化开发让列表、表单、弹窗这类高频场景能复用配合Element UI这类组件库页面做出来基本不影响“颜值”。MyBatis 不封装SQL反而更适合这种业务规则多、查询条件叠加的系统你可以自己控制每一条SQL出问题也好排查。MySQL 作为开源关系型数据库部署简单还有Navicat这种可视化工具用来做管理系统绰绰有余。有一点要特别提醒SpringBoot 别一上来就追 3.x。不是说3.x不好而是3.x 把 javax 包换成了 jakarta很多老教程的代码直接粘过来会报找不到包需要额外处理。我实际开发用的是 SpringBoot 2.7.18 JDK 1.8 MyBatis 2.3.x这套组合经过大量项目验证最稳还不挑服务器环境。1.3 功能模块怎么拆最清晰我习惯把系统先拆成几大模块再往每个模块里填页面和接口避免需求在脑子里揉成一团。整个系统的功能模块可以整理成下表模块核心功能涉及角色用户认证模块登录、注册、密码加密、角色权限全部角色项目管理模块项目申报、信息修改、申报书上传、进度查看学生、指导老师、学院管理员审核评审模块指导老师审核、学院初审、专家打分、成绩汇总指导老师、学院管理员、评审专家立项管理模块立项名单生成、立项状态标记、立项通知书下载校级管理员通知公告模块发布通知、置顶、过期下架校级管理员、全部用户可见附件管理模块文件上传、下载、格式校验、大小限制学生、管理员系统管理模块用户管理、角色管理、学院配置、数据统计校级管理员这样拆分之后后端实体和表结构基本也出来了用户表、项目表、项目成员表、审核记录表、评审记录表、公告表、附件表。看到没有核心其实就这几张表根本没有想象中那么复杂。2. 数据库设计与后端核心实现2.1 数据库表结构是系统的地基数据表设计上我坚持一个原则能分离的不要堆字段能用状态字段的不要搞多张表。一套大创管理系统核心其实就是用户、项目、流程记录三块。实际建表时我重点设计了下面这几张表sys_user用户表主键、用户名、密码、真实姓名、角色编码teacher/student/admin/expert、所属学院、手机号、邮箱、创建时间。用户表不要做成一张超级表角色不同用role_code区分即可后续权限判断在代码里处理。project_info项目表主键、项目编号、项目名称、项目类型、项目成员信息、所属学院、指导教师ID、项目周期、项目简介、状态draft/submitted/college_review/expert_review/approved/rejected、创建人ID、创建时间。状态字段是整个业务流程的核心评审到哪一步就看这个字段的值。review_record评审记录表主键、项目ID、评审人ID、评审结果通过/不通过、评分、评审意见、评审时间。这里要处理一个项目多个专家评审的情况所以是单独一张表而不是在项目表里放一个score字段。attachment_info附件表主键、业务类型、业务ID、文件名、文件存储路径、上传人、上传时间。项目申报书、立项任务书都走这张表方便统一管理。notice_info公告表主键、标题、内容、是否置顶、发布时间、发布人、状态。一张表设计出来后先自问三个问题这张表的唯一标识是什么它和业务主表怎么关联谁会往这张表里插数据想清楚这三个问题再建表基本不会出大乱子。字段命名统一用小写下划线风格比如create_time、project_nameJava实体里对应驼峰命名MyBatis里开个驼峰映射开关就能直接对上了。2.2 SpringBoot 三层架构怎么落地后端代码我严格按照Controller、Service、Mapper三层来写不要觉得这老套这种业务系统的核心逻辑就是要容易追查、容易改。Controller只负责接参数和返回结果Service处理业务逻辑Mapper只写数据库操作。以“学生提交项目”为例流程是这样的前端把项目表单数据POST到后端Controller收到请求后先做简单字段校验然后调ServiceService里启动事务先插入项目主记录再插入项目成员信息最后记录一条流程日志全部成功后统一提交事务。RestController RequestMapping(/api/project) public class ProjectController { Autowired private ProjectService projectService; PostMapping(/submit) public ResultString submit(RequestBody ProjectSubmitVO vo) { if (StringUtils.isBlank(vo.getProjectName())) { return Result.error(项目名称不能为空); } projectService.submitProject(vo); return Result.success(提交成功); } }Service层里我习惯把所有涉及多表写入的操作都加上 Transactional 注解。有一个真实场景学生提交项目时要写project_info、project_member、flow_log三张表如果中间某张表插入失败又没有事务就会出现“项目主表有记录但成员表是空的”这种半截数据后边审核的时候特别难排查。加了事务之后要么全部成功要么全部回滚这才是靠谱的做法。2.3 MyBatis 映射和动态SQL是查询灵活性的关键MyBatis这块是整个后端最需要花心思的地方。很多人用MyBatis Generator自动生成Mapper生成完直接改也没问题但一旦业务查询变复杂比如“按项目状态、学院、项目类型、申报时间范围组合过滤”天然就得上动态SQL。我喜欢直接在Mapper XML里手写用 和 标签控制条件拼接。select idselectProjectList resultTypecom.example.entity.ProjectInfo select * from project_info where if testprojectName ! null and projectName ! and project_name like concat(%, #{projectName}, %) /if if testcollege ! null and college ! and college #{college} /if if teststatus ! null and status ! and status #{status} /if /where order by create_time desc /select这里有两个经验第一条件拼接一定用 标签避免写一堆“where 11”的丑代码 会自动去掉多余的and第二传入参数一律用 #{}不要用 ${}。${}是字符串拼接会直接把内容拼进SQL存在SQL注入风险#{}是预编译参数安全得多。虽然系统是校园场景但数据安全这根弦不能松用户输入的东西永远不可信。还有一个小技巧在application.yml里开启MyBatis的驼峰映射mybatis: configuration: map-underscore-to-camel-case: true这样数据库里的create_time 能自动映射到实体类的 createTime不然你还要给每个字段写resultMap手动映射写一次两次还行整个系统十几个实体都这么搞纯纯浪费时间。3. 前端工程搭建与核心页面实现3.1 Vue工程怎么初始化最省事前端这块我推荐用 Vite 来搭建Vue3项目比Webpack那套快很多。命令行两行就能建好一个基础工程npm create vitelatest dachuang-web -- --template vue cd dachuang-web npm install装完基础依赖再把前端必备的几个库一起装上vue-router做路由跳转pinia做全局状态管理axios发HTTP请求Element Plus做UI组件库。Element Plus是Vue3生态里最成熟的组件库表格、表单、分页、弹窗、上传控件都有现成的做管理系统能省大量写CSS的时间。npm install vue-router4 pinia axios element-plus element-plus/icons-vue工程初始化之后先别急着写页面把目录结构定好src/api放接口请求src/views放页面组件src/router放路由配置src/store放全局状态。目录结构清晰了后面页面越写越多也不会乱。3.2 登录状态和路由权限怎么处理“用户登录之后能访问哪些页面”这是前端必须处理的权限问题。做法不复杂但要注意细节登录成功之后后端返回一个token前端把这个token存到localStorage里同时通过pinia把用户信息角色、姓名存到全局。每个接口请求都会通过axios拦截器自动带上请求头后端根据token识别用户身份。// axios拦截器 axios.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer token; } return config; });路由守卫这边我在router.beforeEach里做判断用户没登录就跳转到登录页登录了但访问的不是自己角色该看的页面就跳回首页。角色按钮级别的控制比如“编辑”按钮只有学生在项目状态为草稿时可见我直接用v-if判断用户角色和项目状态简单又直观不用引太复杂的权限框架。3.3 核心页面实现项目申报与项目管理项目申报页面是学生用得最多的主要拆成三块左侧基本信息表单、中间成员列表、底部申报书上传组件。基本信息里项目名称、项目类型、所属学院、项目周期、项目简介这些字段都有对应的表格列提交时做一个非空校验防止用户把空数据传上去。成员信息用动态表格学生可以自己加成员行每行填姓名、学号、专业、年级数据以JSON数组形式绑定提交。项目管理页面则是管理员视角表格展示所有项目信息顶部放搜索栏项目名称、学院、状态右侧放操作按钮查看详情、审核、导出。Element Plus的el-table自带列排序和分页配合后端分页接口数据量大也不卡。前后端联调时我强烈建议把axios请求封装成一个函数统一管理接口路径不然页面一多接口路径散落在各个组件里后期改一个接口名会让你改到怀疑人生。// 封装请求函数示例 export function getProjectPage(params) { return request({ url: /api/project/page, method: get, params }); }4. 环境配置、部署联调与问题排查4.1 后端运行环境到底怎么配本地开发环境建议装 JDK 1.8、Maven 3.8、MySQL 8.0后端项目直接用IDEA打开等Maven把依赖下载完就可以跑。数据库连接配置写在 application.yml 里这是整个后端最容易出问题的地方贴一份我用着没问题的配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/dachuang?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 servlet: multipart: max-file-size: 20MB max-request-size: 50MB mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: trueurl里的 serverTimezoneAsia/Shanghai 是给MySQL 8用的不写的话连接时会报时区错误这是新手最容易卡住的第一关。上传文件大小限制也建议一早就配上不然学生传一个十几MB的申报书后台上传接口直接抛异常用户只会看到“上传失败”根本不知道是自己文件太大。4.2 前后端联调最揪心的跨域问题前端开发服务器默认跑在5173端口后端接口在8080端口浏览器会拦截跨域请求这是所有前后端分离项目的必经之路。最简单的处理方式是在后端加一个CORS配置类允许指定前端地址访问Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(http://localhost:5173); config.addAllowedMethod(*); config.addAllowedHeader(*); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }千万不要在Controller里到处加CrossOrigin注解加一次两次还行接口几十个的时候你会疯掉的。给整个应用配一个全局CORS所有接口一次性解决干干净净。4.3 常用报错信息速查表我把实际开发里最常遇到的几个问题整理成了表格基本覆盖了新手从环境搭建到联调全过程的痛点报错或现象原因解决方案Access denied for user rootlocalhost数据库账号或密码不对检查application.yml里的用户名密码是否与MySQL一致The server time zone value is unrecognizedMySQL时区配置问题url末尾加上serverTimezoneAsia/ShanghaiInvalid bound statement (not found)Mapper接口和XML没绑定检查接口全限定名和XML的namespace是否一致前端请求接口404接口路径没对上查看Controller的RequestMapping和axios里的路径是否一致端口被占用上个项目没停或其它程序占用netstat -ano查端口或改server.port页面能打开但数据不显示跨域或返回结构不一致先F12看Network请求返回再检查CORS配置中文乱码MySQL表字符集不是utf8mb4建表时指定DEFAULT CHARSETutf8mb4这里要再强调一个排查问题的原则先看浏览器Network面板接口返回了什么再判断是前端还是后端的事。很多同学一报错就去翻代码翻半天找不到根因其实F12看一眼响应体问题原因基本就暴露了。4.4 这套系统后续还能怎么扩展做完这套大创管理系统之后我复盘时发现它是很好的“母版系统”加几个模块就能往别的方向扩展。比如加一个结题报告管理模块就能覆盖“立项后管理”的闭环加一个数据可视化页面把各学院申报数量、立项率、专家评分分布做成图表就能给管理决策提供支撑甚至可以把附件从本地存储换成MinIO这类分布式对象存储整个系统的文件管理能力马上提升一个档次。SpringBoot Vue这套组合的扩展性就在这里核心骨架没变加功能的成本很低。如果你在开发中遇到我上面没写到的问题或者想把某个模块做得更复杂欢迎一起交流。我个人的建议是不要一上来就追求功能大而全先把基础的“人、项目、评审”三件套跑通再根据实际需求迭代。系统这东西真正上线用起来之后你才会知道用户最想要的是什么。