SpringBoot2+Vue3构建大学生考勤系统实战-代码聚汇网

SpringBoot2+Vue3构建大学生考勤系统实战

楚予微茫

1. 项目概述

这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0技术栈的大学生考勤系统，是我在高校信息化建设项目中实际落地的一个典型案例。系统采用前后端分离架构，后端使用SpringBoot2框架提供RESTful API接口，前端采用Vue3组合式API开发管理界面，通过MyBatis-Plus简化数据库操作，MySQL8.0作为数据存储引擎。整套系统从技术选型到功能实现都针对高校考勤场景做了深度优化，包含完整的源码和开发文档，特别适合计算机专业学生作为毕业设计参考或企业快速构建同类系统。

2. 技术架构解析

2.1 后端技术栈选型

SpringBoot2作为基础框架的选择主要基于：

内嵌Tomcat服务器，简化部署流程
自动配置机制减少XML配置
丰富的Starter依赖库（如spring-boot-starter-web）
与MyBatis-Plus完美集成

关键依赖示例（pom.xml片段）：

xml复制<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.2</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

2.2 前端技术方案

Vue3组合式API的优势体现：

更好的TypeScript支持
更灵活的逻辑复用
更小的打包体积
使用Pinia替代Vuex进行状态管理

典型组件结构：

javascript复制// AttendanceTable.vue
<script setup>
import { ref } from 'vue'
const attendanceList = ref([])
// 获取考勤数据逻辑...
</script>

3. 核心功能实现

3.1 考勤记录模块

数据库表设计要点：

sql复制CREATE TABLE `attendance` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `student_id` varchar(20) NOT NULL COMMENT '学号',
  `course_id` int NOT NULL COMMENT '课程ID',
  `check_time` datetime NOT NULL COMMENT '打卡时间',
  `status` tinyint NOT NULL COMMENT '0正常 1迟到 2早退 3缺勤',
  `location` point DEFAULT NULL COMMENT 'GPS坐标',
  PRIMARY KEY (`id`),
  KEY `idx_student_course` (`student_id`,`course_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 数据统计看板

使用MyBatis-Plus实现复杂查询：

java复制// AttendanceMapper.java
@Select("SELECT DATE(check_time) as date, COUNT(*) as total, " +
       "SUM(CASE WHEN status = 0 THEN 1 ELSE 0 END) as normal " +
       "FROM attendance WHERE course_id = #{courseId} " +
       "GROUP BY DATE(check_time)")
List<AttendanceStatVO> getCourseStat(@Param("courseId") Long courseId);

4. 系统特色功能

4.1 动态考勤规则引擎

采用策略模式实现不同考勤规则：

java复制public interface CheckRule {
    int check(AttendanceDTO dto);
}

// 严格模式实现
@Service
@RuleType("strict")
public class StrictRule implements CheckRule {
    @Override
    public int check(AttendanceDTO dto) {
        // 实现逻辑...
    }
}

4.2 可视化数据分析

ECharts集成示例：

javascript复制// 使用setup语法
const initChart = () => {
  const chart = echarts.init(dom.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: [{ data: attendanceData }]
  })
}

5. 部署与运维

5.1 多环境配置

SpringBoot多环境配置示例：

yaml复制# application-dev.yml
server:
  port: 8080
datasource:
  url: jdbc:mysql://localhost:3306/attendance_dev

5.2 前端部署优化

Vite生产构建配置：

javascript复制// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

6. 开发经验总结

6.1 前后端联调技巧

推荐使用OpenAPI规范：

java复制// SpringDoc配置
@Bean
public OpenAPI customOpenAPI() {
    return new OpenAPI()
            .info(new Info().title("考勤系统API"));
}

6.2 性能优化实践

MySQL查询优化建议：

sql复制-- 添加复合索引
ALTER TABLE attendance ADD INDEX idx_time_status (check_time, status);

-- 使用覆盖索引
EXPLAIN SELECT student_id FROM attendance 
WHERE check_time > '2023-09-01' AND status = 0;

7. 扩展方向建议

移动端适配：开发微信小程序版本
生物识别集成：对接人脸识别设备
数据分析增强：加入机器学习预测模型
微服务改造：拆分为课程服务、考勤服务等

实际开发中发现，GPS定位考勤需要特别注意Android和iOS的位置获取策略差异，建议使用高德地图SDK统一处理。在教室密集区域，建议设置蓝牙信标辅助定位，精度可达1-3米。