1. 项目背景与核心价值
去年帮学弟调试毕业设计时，发现市面上很多办公管理系统要么功能冗余要么扩展性差。这个基于SpringBoot+Vue的全栈项目，用最精简的技术栈实现了考勤、审批、文档协同等核心功能模块。特别适合计算机专业学生作为毕业设计参考，也完全具备中小企业直接部署使用的成熟度。
整套代码采用前后端分离架构，后端SpringBoot提供RESTful API接口，前端Vue.js实现动态交互。相比传统JSP方案，这种架构既符合现代开发趋势，又能展示学生的全栈能力。我在代码中特意保留了完整的开发注释和Swagger接口文档，方便理解每个功能点的实现逻辑。
2. 技术选型与架构设计
2.1 后端技术栈解析
SpringBoot 2.7.x作为核心框架，选择这个版本是因为它既有稳定的社区支持，又能兼容最新Java特性。数据库采用MySQL 8.0，配合MyBatis-Plus 3.5.x实现ORM映射，相比原生MyBatis可以节省30%以上的样板代码。
权限控制使用Sa-Token，这个轻量级框架比Shiro配置更简单，通过注解即可实现细粒度控制。比如员工请假审批功能只需在Controller添加@SaCheckPermission("leave:approve")注解。文件存储采用本地磁盘+七牛云双备份策略，在application.yml中通过file.storage-type配置切换。
2.2 前端技术方案
Vue 3组合式API配合Element Plus组件库，相比Options API更利于功能逻辑的封装复用。特别在复杂表单场景下，比如员工信息录入模块，使用<el-form>配合自定义校验规则，代码量减少40%。
前端工程通过Vite构建，启动速度比Webpack快5-8倍。实测在开发环境下，修改代码后热更新仅需200-300ms。路由管理采用动态加载方案，按功能模块拆分chunk文件，首屏加载时间控制在1.2秒内。
2.3 系统架构图
code复制[用户层]
│
├─ Web端(Vue)
├─ 移动端(Uniapp)
│
[接入层]
│
├─ Nginx反向代理
├─ 负载均衡
│
[服务层]
│
├─ SpringBoot应用集群
├─ Redis缓存
├─ MySQL主从
│
[存储层]
│
├─ 本地文件存储
├─ 七牛云OSS
这种分层架构使得系统可以横向扩展，我已在阿里云ECS上实测支持500+并发用户。所有服务都做了Docker化封装，通过docker-compose.yml可一键部署。
3. 核心功能实现细节
3.1 考勤模块设计
采用双校验机制保证数据准确性：前端通过GPS获取定位信息，后端通过IP地址二次验证。核心代码如下：
java复制// 考勤打卡服务层
@Service
public class AttendanceService {
@Transactional
public Result punch(AttendanceDTO dto) {
// 1. 校验地理位置偏差(500米内)
if(!LocationUtils.checkDistance(dto.getLng(), dto.getLat())){
return Result.error("超出有效打卡范围");
}
// 2. 人脸识别验证
if(!FaceRecognition.verify(dto.getFaceImage())){
return Result.error("人脸识别失败");
}
// 3. 保存打卡记录
Attendance record = new Attendance();
BeanUtils.copyProperties(dto, record);
attendanceMapper.insert(record);
return Result.ok();
}
}
3.2 审批流程引擎
使用状态机模式实现多级审批，通过数据库的status字段跟踪流程状态。以请假审批为例：
0-待提交→ 员工填写表单1-部门审批→ 直属领导审批2-人事备案→ HR归档记录3-已完成/4-已驳回
每个状态变更都会触发企业微信通知，审批人可在移动端直接处理。流程配置采用策略模式，方便后期扩展新的审批类型。
3.3 实时消息推送
基于WebSocket实现以下场景的实时通知：
- 审批结果通知
- 会议提醒
- 文档协作@消息
前端建立长连接后，服务端通过心跳检测维持会话。关键配置如下：
yaml复制# WebSocket配置
websocket:
port: 8888
path: /ws
heartbeat-interval: 30000
max-frame-size: 65536
4. 开发环境搭建指南
4.1 后端准备
-
JDK 11+环境配置：
bash复制# 检查Java版本 java -version # 设置JAVA_HOME(Mac示例) export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home -
数据库初始化：
sql复制CREATE DATABASE office_db CHARACTER SET utf8mb4; GRANT ALL PRIVILEGES ON office_db.* TO 'office'@'%' IDENTIFIED BY 'Password123'; -
配置文件修改：
properties复制# application-dev.yml spring: datasource: url: jdbc:mysql://localhost:3306/office_db username: office password: Password123
4.2 前端准备
-
Node.js 16.x安装：
bash复制# 使用nvm管理版本 nvm install 16 nvm use 16 -
依赖安装与启动：
bash复制cd frontend npm install npm run dev -
跨域配置：
javascript复制// vite.config.js server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }
5. 部署与运维方案
5.1 生产环境部署
使用Docker Compose编排服务：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root123
volumes:
- ./mysql/data:/var/lib/mysql
redis:
image: redis:6-alpine
ports:
- "6379:6379"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
启动命令：
bash复制docker-compose up -d --build
5.2 性能优化实践
-
接口缓存策略：
java复制@Cacheable(value = "dept", key = "#id") public Department getDeptById(Long id) { return departmentMapper.selectById(id); } -
前端懒加载方案：
javascript复制// 路由配置 { path: '/document', component: () => import('@/views/document/index.vue') } -
Nginx静态资源缓存：
nginx复制location /static { expires 365d; add_header Cache-Control "public"; }
6. 毕设答辩要点
6.1 技术亮点阐述
- 前后端分离架构：展示Postman接口测试集和Swagger文档
- 权限控制设计：演示不同角色登录后的菜单差异
- 性能优化措施：对比缓存开启前后的接口响应时间
6.2 常见问题准备
-
Q：为什么选择Vue而不是React？
A：Vue的学习曲线更平缓，生态组件丰富，适合快速开发管理类系统 -
Q：系统安全性如何保证？
A：1) JWT令牌加密 2) SQL注入防护 3) XSS过滤 4) 定期备份机制
6.3 扩展方向建议
- 接入企业微信/钉钉开放平台
- 增加BI数据看板模块
- 实现OA流程可视化配置
我在项目里预留了extension分支，包含这些扩展功能的原型实现。如果需要演示视频制作指导，可以找我获取Camtasia的剪辑模板。