SpringBoot+Vue3开发轻量级疫情居家办公系统

1. 项目背景与技术选型

这个疫情居家办公系统是我在2022年疫情期间开发的一个全栈项目，当时很多企业突然面临远程办公的需求，但市面上的商业系统要么太贵，要么功能冗余。我决定用当时最新的技术栈开发一个轻量级解决方案。

技术选型上，后端采用SpringBoot 2.7 + MyBatis 3.5的组合，主要考虑点是：

• SpringBoot的自动配置能快速搭建RESTful API
• MyBatis的灵活性适合复杂业务查询
• 两者都有完善的文档和社区支持

前端选择Vue3 + Element Plus，看中的是：

• Composition API带来的代码组织优势
• 更好的TypeScript支持
• 比Vue2更优的性能

数据库使用MySQL 8.0，主要因为：

• JSON字段支持便于存储动态表单数据
• 窗口函数简化了考勤统计查询
• 企业环境中部署成本低

2. 系统架构设计

2.1 前后端分离架构

采用标准的B/S架构：

code复制前端服务器(Nginx)
  ↓
Vue3 SPA → 后端API(SpringBoot)
              ↓
           MySQL 8.0

前端通过axios与后端通信，配置了：

• 请求拦截器(添加JWT)
• 响应拦截器(统一错误处理)
• API模块化封装

2.2 核心功能模块

1. 考勤管理

   • 地理围栏打卡
   • 异常考勤审批流
   • 月度统计报表

2. 任务协同

   • 甘特图任务分配
   • 文件共享(七牛云集成)
   • 实时消息(WebSocket)

3. 健康上报

   • 每日体温填报
   • 异常情况预警
   • 核酸检测记录

3. 关键技术实现

3.1 后端关键代码

1. JWT认证实现

java复制// Security配置类
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSe