技术架构
系统概述
沐霖工时管理系统是一个基于 Java + Go 双引擎 的企业级工时管理平台,支持项目工时 tracking、审核流程、数据统计等核心功能。
系统采用前后端分离架构,前端基于 Vue 3 + Element Plus,后端提供 Go 和 Java 两套实现,确保系统的高可用性和可维护性。
技术栈
前端技术栈
| 技术 | 版本 | 说明 |
|---|---|---|
| Vue | 3.5.16 | 渐进式 JavaScript 框架 |
| Vite | 6.3.5 | 下一代前端构建工具 |
| Element Plus | 2.9.9 | Vue 3 组件库 |
| Vue Router | 4.5.1 | Vue 官方路由管理器 |
| Pinia | 3.0.2 | Vue 官方状态管理库 |
| Axios | 1.9.0 | HTTP 客户端 |
| ECharts | 5.6.0 | 可视化图表库 |
| Sass | 1.89.1 | CSS 预处理器 |
核心依赖
- @element-plus/icons-vue: 2.3.1 - Element Plus 图标库
- vue-cropper: 1.1.1 - 图片裁剪组件
- vuedraggable: 4.1.0 - 拖拽组件
- moment: 2.30.1 - 日期处理库
- jsencrypt: 3.3.2 - RSA 加密库
后端技术栈(Go 版本)
| 技术 | 版本 | 说明 |
|---|---|---|
| Go | 1.21 | 编程语言 |
| Gin | 1.10.0 | Web 框架 |
| GORM | 1.25.12 | ORM 框架 |
| MySQL | - | 关系型数据库 |
| Redis | v8.11.5 | 缓存数据库 |
| JWT | v4.5.1 | 身份认证 |
核心依赖
- gin-gonic/gin: 1.10.0 - HTTP Web 框架
- gorm.io/gorm: 1.25.12 - ORM 框架
- gorm.io/driver/mysql: 1.5.7 - MySQL 驱动
- go-redis/redis/v8: 8.11.5 - Redis 客户端
- golang-jwt/jwt/v4: 4.5.1 - JWT 认证
- xuri/excelize/v2: 2.8.0 - Excel 处理
- robfig/cron/v3: 3.0.1 - 定时任务
- mojocn/base64Captcha: 1.3.6 - 验证码
后端技术栈(Java 版本)
| 技术 | 说明 |
|---|---|
| Spring Boot | 应用框架 |
| Spring Security | 安全框架 |
| MyBatis | ORM 框架 |
| MySQL | 关系型数据库 |
| Redis | 缓存数据库 |
| JWT | 身份认证 |
系统架构
整体架构
┌─────────────────────────────────────────────────────┐
│ 前端层 (Vue 3) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 工时管理 │ │ 项目管理 │ │ 数据统计 │ ... │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────┘
↓ HTTP/HTTPS
┌─────────────────────────────────────────────────────┐
│ API 网关层 (Nginx) │
│ 反向代理 / 负载均衡 / 静态资源 │
└─────────────────────────────────────────────────────┘
↓
┌──────────────────┬──────────────────────────────────┐
│ Go 后端服务 │ Java 后端服务 │
│ (mulin-go) │ (mulin-server) │
│ │ │
│ ┌────────────┐ │ ┌────────────┐ │
│ │ Gin 路由 │ │ │ Controller │ │
│ ├────────────┤ │ ├────────────┤ │
│ │ 中间件 │ │ │ Service │ │
│ ├────────────┤ │ ├────────────┤ │
│ │ Controller │ │ │ Mapper │ │
│ ├────────────┤ │ └────────────┘ │
│ │ Service │ │ │
│ ├────────────┤ │ │
│ │ DAO/GORM │ │ │
│ └────────────┘ │ │
└──────────────────┴──────────────────────────────────┘
↓
┌──────────────────┬──────────────────────────────────┐
│ MySQL │ Redis │
│ (主数据库) │ (缓存/会话) │
└──────────────────┴──────────────────────────────────┘前端架构
mulin-ui/
├── src/
│ ├── api/ # API 接口层
│ │ ├── hour/ # 工时相关接口
│ │ ├── project/ # 项目相关接口
│ │ ├── task/ # 任务相关接口
│ │ └── system/ # 系统管理接口
│ ├── views/ # 页面组件
│ │ ├── hour/ # 工时管理页面
│ │ │ ├── week/ # 周报页面
│ │ │ └── review/ # 审核页面
│ │ ├── project/ # 项目管理页面
│ │ └── task/ # 任务管理页面
│ ├── components/ # 公共组件
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理 (Pinia)
│ ├── utils/ # 工具函数
│ └── assets/ # 静态资源
├── vite.config.js # Vite 配置
└── package.json # 依赖配置前端特色
- 三种部署模式:
- 独立部署 (
dev) - 生产环境 (
build:prod) - 嵌入式部署 (
build:embedded)
- 独立部署 (
- 按需加载: 路由懒加载,提升首屏性能
- 响应式设计: 适配多种屏幕尺寸
Go 后端架构
mulin-go/
├── main.go # 应用入口
├── config/ # 配置文件
│ ├── config.go # 配置加载
│ └── application.yaml # 应用配置
├── framework/ # 框架层
│ ├── dal/ # 数据访问层
│ ├── middleware/ # 中间件
│ ├── router/ # 路由配置
│ ├── security/ # 安全模块
│ └── response/ # 统一响应
├── internal/ # 业务层
│ ├── mulin/ # 工时业务
│ │ ├── controller/ # 控制器
│ │ ├── service/ # 服务层
│ │ ├── dao/ # 数据访问
│ │ ├── dto/ # 数据传输对象
│ │ └── model/ # 数据模型
│ └── app/ # 应用模块
├── common/ # 公共模块
│ ├── captcha/ # 验证码
│ ├── notify/ # 通知服务
│ ├── upload/ # 文件上传
│ └── utils/ # 工具函数
└── logs/ # 日志目录Go 后端特色
- Gin 框架: 高性能 HTTP 框架
- GORM: 强大的 ORM 支持
- 分层架构: Controller → Service → DAO
- 中间件: JWT 认证、日志记录、CORS 等
- 定时任务: cron 定时调度
数据库架构
MySQL 数据库
数据库: mulin_cost
核心表:
├── mh_project # 项目表
├── mh_task # 任务表
├── mh_hour # 工时记录表
├── mh_hour_review # 工时审核表
├── mh_user # 用户表
├── mh_department # 部门表
└── mh_dict # 字典表Redis 缓存
用途:
├── Session 存储 # 用户会话
├── Token 黑名单 # JWT Token 管理
├── 验证码缓存 # Captcha 存储
├── 配置缓存 # 系统配置
└── 分布式锁 # 并发控制核心模块
1. 工时管理模块
功能:
- 工时填报(普通工时/任务工时)
- 工时审核(通过/驳回)
- 周报/月报查看
- 工时统计
技术实现:
- 前端:
views/hour/目录 - 后端:
internal/mulin/目录 - 接口: RESTful API
2. 项目管理模块
功能:
- 项目创建与配置
- 项目成员管理
- 项目状态跟踪
- 项目工时统计
技术实现:
- 前端:
views/project/目录 - 后端:
internal/mulin/目录
3. 任务管理模块
功能:
- 任务创建与分配
- 任务状态管理
- 任务工时统计
- 任务日记
技术实现:
- 前端:
views/task/目录 - 后端:
internal/mulin/目录
4. 数据统计模块
功能:
- 个人工时统计
- 项目工时统计
- 团队工时统计
- 图表展示(ECharts)
技术实现:
- 前端: ECharts 可视化
- 后端: 聚合查询接口
安全机制
1. 身份认证
- JWT Token: 无状态认证
- Token 刷新: 自动续期机制
- Token 黑名单: 注销管理
2. 权限控制
- RBAC: 基于角色的访问控制
- 菜单权限: 动态菜单加载
- 按钮权限: 细粒度权限控制
3. 数据安全
- 密码加密: bcrypt 加密存储
- SQL 防护: GORM 参数化查询
- XSS 防护: 输入过滤
4. 接口安全
- CORS: 跨域资源共享
- 限流: 接口频率限制
- 验证码: 防止暴力破解
部署架构
1. 独立部署
前端 (Nginx) + 后端 (Go/Java) + MySQL + Redis2. Docker 部署
yaml
services:
frontend: # 前端 Nginx
backend: # Go 后端
mysql: # MySQL 数据库
redis: # Redis 缓存3. 嵌入式部署
单程序部署 (Go 二进制 + 嵌入式前端资源)性能优化
前端优化
- 路由懒加载: 按需加载页面
- 组件懒加载: 动态导入组件
- Gzip 压缩: 减少传输体积
- CDN 加速: 静态资源加速
后端优化
- 数据库索引: 查询优化
- Redis 缓存: 热点数据缓存
- 连接池: 数据库连接复用
- 分页查询: 避免全表扫描
开发规范
前端规范
- Vue 3 Composition API: 组合式 API
- ESLint: 代码质量检查
- Prettier: 代码格式化
- 组件命名: PascalCase
后端规范
- 分层架构: Controller → Service → DAO
- 统一响应: 标准响应格式
- 错误处理: 统一异常处理
- 日志记录: 结构化日志
技术亮点
1. 双后端架构
- Go 版本: 高性能、轻量级
- Java 版本: 功能完善、生态丰富
- 接口对齐: 统一的 API 规范
2. 多种部署方式
- 独立部署: 传统部署方式
- Docker 部署: 容器化部署
- 嵌入式部署: 单程序部署
3. 完善的权限体系
- 角色管理: 灵活的权限配置
- 数据权限: 数据范围控制
- 操作审计: 操作日志记录
4. 强大的统计功能
- 多维度统计: 个人/项目/团队
- 可视化图表: ECharts 展示
- 数据导出: Excel 导出支持
技术演进
v1.0 - 初始版本
- Java 后端实现
- 基础工时管理功能
v2.0 - Go 版本
- Go 后端迁移
- 性能优化
v3.0 - 功能增强
- 审核流程完善
- 统计功能增强
- 多种部署方式
v4.0 - 当前版本
- 前端 Vue 3 升级
- 嵌入式部署支持
- 文档体系完善
相关资源
文档站点: VitePress 驱动
技术支持
如有技术问题,请通过以下方式联系:
- 💬 微信公众号: wuyusoft
- 📝 问题反馈: Gitee Issues
