基于springbootvue高校请假审批系统一、项目概述1.1 项目背景传统高校学生请假依靠纸质单据线下提交、辅导员人工登记审批存在流程繁琐、审批进度不透明、请假数据难以统计归档、师生信息互通效率低等问题。为实现请假流程线上化、审批数字化、数据可视化管理开发本高校请假管理系统覆盖学生请假申请、管理员审批、通知推送、数据统计全流程。1.2 项目目标区分管理员、学生两类角色实现权限隔离学生端账号注册、登录、提交请假申请、查看审批进度管理员端学生信息管理、请假申请审核、审批结果通知、请假数据图表统计提供可视化数据报表直观展示学生请假频次、课程请假分布实现完整的 CRUD 操作、条件搜索、文件头像上传、手机验证码注册功能。1.3 功能概述系统分为前端 Vue 展示层、后端 SpringBoot 服务层、MySQL 数据存储层核心模块登录注册模块、首页模块、请假申请管理模块、请假审批管理模块、学生管理模块、结果通知模块、数据统计可视化模块。二、技术栈介绍2.1 后端技术SpringBoot核心框架SpringBoot 2.7.x快速搭建后端服务自动配置简化开发持久层框架MyBatis/MyBatis-Plus简化 MySQL 增删改查支持分页、条件查询数据库MySQL 8.0存储学生、请假、通知、用户账号数据工具依赖Lombok简化实体类 get/set/ 构造方法Hutool工具类验证码生成、手机号校验、文件上传处理Druid数据库连接池监控 SQL 执行Validation表单参数校验学号、手机号、密码格式文件处理本地文件存储支持学生注册头像上传接口规范RESTful API统一返回 JSON 格式安全控制基于 Session/Token 登录校验区分管理员、学生角色访问权限。2.2 前端技术Vue核心框架Vue2/Vue3 Element UI页面弹窗、表单、表格、按钮组件与截图界面匹配路由VueRouter实现页面标签页多开、侧边栏菜单跳转网络请求Axios封装统一请求拦截、响应拦截处理登录失效可视化图表ECharts实现折线图学生请假次数统计、柱状图课程请假分布统计页面组件登录 / 注册弹窗表单侧边导航菜单栏数据分页表格支持搜索、批量删除、单条详情 / 操作新增请假弹窗、统计图表弹窗UI 布局经典后台管理布局顶部导航栏 左侧菜单栏 主内容区域和截图页面布局完全匹配。2.3 开发 部署工具开发工具IDEA后端、VSCode前端、Navicat数据库构建工具Maven后端打包、npm/yarn前端打包部署环境JDK1.8、Tomcat 内置、Nginx前端静态资源部署版本管理Git。三、系统需求分析3.1 用户角色分析1学生角色注册账号填写学号、姓名、密码、头像、性别、手机号、验证码完成注册登录系统选择学生身份输入账号密码登录提交请假申请填写请假日期、请假天数、课程名称、请假原因查看个人所有请假记录查看审批状态接收管理员审批结果通知。2管理员角色登录系统选择管理员身份登录后台学生管理查看、修改、删除所有学生账号信息请假申请管理查看全量学生请假单搜索筛选、新增、修改、删除请假申请请假审批管理对未审批请假单执行通过 / 驳回操作填写审批时间通知管理审批完成后一键推送审批结果通知给对应学生数据统计打开可视化图表查看各学生请假次数折线图、各课程请假柱状图查看所有审批记录、批量操作数据。3.2 功能性需求登录注册功能登录区分管理员 / 学生单选框账号密码校验注册学生专用学号唯一校验、两次密码一致性校验、手机号格式校验、验证码发送校验、头像图片上传页面跳转注册完成跳转登录登录成功进入系统首页。首页功能左侧固定菜单栏首页、请假申请管理、请假审批管理、结果通知管理、学生管理顶部系统标题栏、右上角登录用户信息主页面展示系统欢迎文字。请假申请管理列表展示序号、学号、学生姓名、请假日期、请假天数、课程名称、请假原因、审批状态搜索根据学生姓名模糊查询操作按钮详情、审批新增弹窗填写请假必填信息默认审批状态为「未审批」批量操作修改、删除、打开请假统计图表。请假审批管理列表展示包含审批情况、审批时间字段操作按钮详情、通知审批逻辑管理员操作后更新审批状态、记录当前系统时间为审批时间通知功能点击通知推送审批结果给学生。数据可视化统计学生请假折线统计图X 轴学号Y 轴请假总天数课程请假柱状统计图X 轴课程名称Y 轴请假数量弹窗展示图表支持关闭弹窗返回表格页面。学生管理模块维护所有注册学生基础信息学号、姓名、性别、手机号、头像支持修改、删除、条件搜索。通知管理存储所有审批推送消息学生登录可查看个人通知3.3 非功能性需求易用性弹窗式表单、清晰按钮区分操作菜单层级简单无需培训即可操作性能分页加载请假数据千条数据无卡顿图表加载 1 秒内完成兼容性支持 Chrome、Edge 主流浏览器安全性密码后端加密存储未登录用户禁止访问后台页面角色权限隔离可扩展性预留教师角色、请假类型、学期筛选扩展接口。四、数据库设计4.1 数据库整体说明数据库命名school_leave_system共 4 张核心数据表用户表区分管理员 / 学生、学生信息表、请假申请表、审批通知表。4.2 数据表结构1. user 用户账号表登录账号字段名字段类型主键非空说明idint是是自增主键usernamevarchar(30)否是登录账号学生为学号管理员自定义账号passwordvarchar(100)否是加密存储密码roletinyint否是角色1 管理员2 学生create_timedatetime否是账号创建时间2. student 学生信息表注册信息字段名字段类型主键非空说明idint是是自增主键stu_idvarchar(30)否是学号唯一约束关联 user.usernamestu_namevarchar(20)否是学生姓名avatarvarchar(255)否否头像文件存储路径gendervarchar(5)否否性别男 / 女phonevarchar(11)否是手机号码codevarchar(6)否否注册验证码3. leave_apply 请假申请表字段名字段类型主键非空说明idint是是自增主键stu_idvarchar(30)否是关联学生学号stu_namevarchar(20)否是学生姓名leave_datedate否是请假日期leave_daysint否是请假天数course_namevarchar(50)否是请假对应课程leave_reasonvarchar(200)否是请假原因audit_statusvarchar(10)否是审批状态未审批 / 已通过 / 已驳回audit_timedatetime否否管理员审批时间4. notice 审批通知表字段名字段类型主键非空说明idint是是自增主键stu_idvarchar(30)否是接收通知学生学号leave_idint否是关联请假单 IDmsg_contentvarchar(300)否是通知内容审批结果create_timedatetime否是通知推送时间is_readtinyint否是0 未读1 已读4.3 表关系说明user 1 对 1 student学生账号对应一条学生详细信息管理员无学生信息student 1 对多 leave_apply一名学生可提交多条请假申请leave_apply 1 对多 notice一条请假审批记录可生成一条通知消息推送给学生。五、系统架构设计5.1 整体分层架构前后端分离三层架构前端表现层 → 后端服务层 → 数据持久层前端表现层Vue视图层登录页、注册页、后台首页、各功能表格弹窗页面控制层Vue methods 处理按钮点击、表单提交、图表渲染请求层Axios 封装接口调用后端 REST API。后端服务层SpringBootController 控制层接收前端请求参数校验返回 JSONService 业务层封装核心业务逻辑注册验证码、审批流程、文件上传、统计计算Mapper 持久层MyBatis 操作数据库提供 CRUD 接口Entity 实体层对应数据库表实体类Utils 工具层文件工具、验证码工具、返回结果封装工具。数据持久层MySQL存储所有业务数据通过 Druid 连接池与 MyBatis 交互。5.2 后端接口分层示例com.leave ├── config // 配置类跨域、文件上传、MyBatis、拦截器 ├── controller // 控制器 │ ├── LoginController // 登录注册接口 │ ├── StudentController // 学生管理接口 │ ├── LeaveController // 请假申请接口 │ ├── AuditController // 请假审批接口 │ ├── NoticeController // 通知接口 │ └── EchartsController // 统计图表数据接口 ├── entity // 数据库实体 ├── mapper // Mapper接口XML映射文件 ├── service // 业务接口 │ └── impl // 业务实现类 ├── util // 工具类 └── LeaveApplication.java // 启动类5.3 前端目录结构src ├── api // 所有后端接口请求封装 │ ├── login.js │ ├── student.js │ ├── leave.js │ ├── audit.js │ └── echarts.js ├── components // 公共组件侧边栏、顶部导航、弹窗封装 ├── views // 页面视图 │ ├── login.vue // 登录页面 │ ├── register.vue // 注册弹窗页面 │ ├── index.vue // 后台首页布局 │ ├── home.vue // 首页欢迎页 │ ├── student.vue // 学生管理页 │ ├── leaveApply.vue // 请假申请列表页 │ ├── leaveAudit.vue // 请假审批列表页 │ └── notice.vue // 通知管理页 ├── router // Vue路由配置 ├── utils // axios封装、工具函数 └── App.vue main.js // 项目入口六、核心功能模块详细设计6.1 登录注册模块6.1.1 登录页面截图 1页面元素系统标题基于 spring boot 的高校请假管理系统登录输入框账号、密码角色单选框管理员默认选中、学生登录按钮、注册学生跳转按钮业务逻辑前端校验账号密码非空请求登录接口传递账号、密码、角色后端校验根据角色查询 user 表密码匹配成功后保存登录 Session登录成功跳转后台首页失败弹窗提示账号密码错误。6.1.2 学生注册页面截图 2页面表单项学号、密码、确认密码、学生姓名、头像上传框、性别下拉、手机号码、验证码输入框 发送验证码按钮、注册按钮校验规则学号唯一不能重复注册密码与确认密码必须一致手机号 11 位数字格式校验头像必须上传图片文件验证码有效期 5 分钟后端比对注册流程点击发送验证码后端生成 6 位数字验证码存入 student 临时字段填写完整表单点击注册后端校验全部参数校验通过新增 user 账号角色 学生、新增 student 信息注册成功返回登录页面提示注册完成。6.2 后台首页布局截图 3顶部栏系统名称、右上角登录用户名左侧侧边导航菜单首页、请假申请管理、请假审批管理、结果通知管理、学生管理主内容区默认显示欢迎文字路由标签页打开多个功能页面生成顶部标签支持切换关闭权限控制管理员可查看全部菜单学生登录仅可见请假申请、通知菜单。6.3 请假申请管理模块截图 4、截图 5列表页面展示所有学生请假单支持学生姓名搜索新增请假弹窗自动填充当前登录学生学号、姓名必填项请假日期、请假天数、课程名称、请假原因审批状态默认「未审批」提交按钮保存数据到 leave_apply 表列表操作详情弹窗展示完整请假单信息审批跳转请假审批页面处理该单据批量功能修改、删除选中请假记录打开学生请假统计图表。6.4 请假审批管理模块截图 6、截图 9列表额外字段审批情况、审批时间管理员审批操作修改 audit_status 为「已通过 / 已驳回」自动填充当前时间作为 audit_time通知按钮点击后自动生成 notice 通知记录推送给对应学生支持搜索筛选学生请假审批记录。6.5 数据可视化统计模块截图 7、截图 10基于 ECharts 实现两类图表学生请假折线图X 轴为学号Y 轴为该学生总请假天数直观对比各学生请假频次课程请假柱状图X 轴为课程名称Y 轴为该课程请假总次数分析热门请假课程业务逻辑前端点击「学生请假统计」按钮弹窗渲染图表请求后端 Echarts 接口后端统计聚合请假数据返回图表所需数组。6.6 学生管理模块管理员专用功能维护所有注册学生信息分页表格展示学号、姓名、性别、手机号、头像新增 / 修改弹窗可编辑学生基础信息重新上传头像删除功能删除学生同步删除 user 账号、关联请假单、通知按学生姓名模糊搜索。6.7 结果通知管理模块存储所有审批推送消息管理员查看全部通知记录学生仅查看本人未读 / 已读通知点击标记已读。七、核心业务流程7.1 学生完整请假流程学生注册账号 → 登录系统进入请假申请管理点击新增请假填写信息提交请假单存入数据库状态为「未审批」管理员登录后台在请假申请列表查看该单据点击审批管理员选择通过 / 驳回系统记录审批时间管理员点击通知按钮生成审批结果通知学生登录系统在通知模块查看审批结果。7.2 管理员数据统计流程管理员进入请假申请 / 审批页面点击「学生请假统计」按钮前端调用后端统计接口后端聚合 leave_apply 表数据统计每个学生请假总天数、每门课程请假次数后端返回图表 X、Y 轴数据数组ECharts 渲染折线 / 柱状图表弹窗展示。八、接口设计RESTful 示例8.1 登录注册接口POST /api/login用户登录参数 username,password,role返回 token / 登录状态POST /api/register/code发送注册验证码参数 stuId,phonePOST /api/register/add学生注册完整表单参数 头像文件8.2 请假申请接口GET /api/leave/list分页查询请假列表参数 stuName搜索、pageNum、pageSizePOST /api/leave/add新增请假申请GET /api/leave/detail/{id}单条请假详情PUT /api/leave/update修改请假单DELETE /api/leave/del删除请假单8.3 请假审批接口GET /api/audit/list查询审批列表PUT /api/audit/doAudit执行审批参数 leaveId,auditStatusPOST /api/audit/sendNotice推送审批通知8.4 统计图表接口GET /api/echarts/studentLeave获取学生请假折线图数据GET /api/echarts/courseLeave获取课程请假柱状图数据8.5 学生管理接口GET /api/student/list学生分页查询POST /api/student/uploadAvatar头像文件上传接口POST/PUT/DELETE学生新增、修改、删除。九、系统测试9.1 功能测试登录测试空账号 / 空密码前端弹窗提示必填错误账号密码后端返回登录失败管理员 / 学生角色区分登录菜单权限正常隔离注册测试重复学号注册后端返回学号已存在两次密码不一致、手机号格式错误、无验证码注册拦截头像图片上传成功文件路径入库请假流程测试学生新增请假数据库新增记录状态未审批管理员审批后状态更新审批时间自动填充点击通知通知表生成对应消息图表测试无请假数据时图表显示空存在数据正常渲染折线、柱状图搜索测试输入学生姓名表格精准模糊匹配过滤数据。9.2 兼容性测试浏览器Chrome、Edge、360 浏览器页面布局、按钮功能正常分辨率19201080、1366768 后台布局自适应无错位。9.3 性能测试分页查询 1000 条请假数据接口响应 300msECharts 图表渲染耗时 1s头像图片上传 2M 以内图片无卡顿。十、项目部署流程10.1 后端部署步骤本地执行 Maven 打包clean package -DskipTests生成 jar 包服务器安装 JDK1.8、MySQL8.0创建数据库school_leave_system执行项目 sql 脚本初始化表修改 application.yml 数据库连接地址、账号密码、文件上传路径服务器执行命令启动 jarjava -jar leave-system.jar 开放后端服务端口默认 8080防火墙。10.2 前端部署步骤前端执行打包npm run build生成 dist 静态文件夹服务器安装 Nginx配置 Nginx 站点指向 dist 文件夹修改 Nginx 代理配置将 /api 请求转发至后端 8080 端口启动 Nginx访问前端域名进入系统登录页。十一、系统优缺点与优化方向11.1 系统优点前后端分离架构代码解耦维护简单完整覆盖高校请假全业务流程贴合真实校园场景可视化数据统计方便管理员分析请假情况角色权限清晰学生、管理员功能隔离数据安全支持文件上传、验证码、条件搜索、批量操作等实用功能。11.2 可优化扩展方向角色扩展新增辅导员、教师角色分级审批消息推送接入短信、微信小程序通知替代站内通知请假规则校验后端增加请假天数上限、节假日禁止请假逻辑导出功能支持请假记录 Excel 导出打印权限细化基于 RBAC 权限框架精细化菜单按钮权限存储优化头像图片改用 OSS 云存储替代本地文件存储登录优化替换 Session 为 JWT Token支持分布式部署。十二、总结本高校请假管理系统基于 SpringBootVue 前后端分离技术开发解决传统线下请假流程低效、数据难以管理的痛点。系统区分管理员与学生两类核心角色实现注册登录、请假申请、线上审批、消息通知、数据可视化统计全套业务功能。项目架构分层清晰、接口规范、数据库设计合理适配高校日常教务请假管理需求同时具备良好的扩展性可在此基础上迭代增加分级审批、Excel 导出、第三方消息推送等高级功能适合高校实训、毕业设计、小型校园信息化场景落地使用。十三、项目资料 精彩专栏推荐订阅 在下方专栏不然下次找不到哟《Java精品推荐项目》《springbootvue项目100套》《ssm项目100套》《微信小程序合集》