技术栈设计

后端技术栈

  • Spring Boot:核心框架,提供快速开发、自动配置和依赖管理。
  • Spring Security:用于身份认证和权限控制。
  • MyBatis/MyBatis-Plus:数据库ORM框架,支持动态SQL和代码生成。
  • Redis:缓存高频数据(如考勤记录、学生信息),提升响应速度。
  • WebSocket:实时推送考勤状态变更或通知。
  • 微信小程序API:集成微信登录、地理位置获取、消息模板推送等功能。

前端技术栈

  • Vue.js:构建管理后台的单页面应用。
  • Element UI/Ant Design Vue:UI组件库,快速搭建管理界面。
  • 微信小程序原生开发:使用WXML、WXSS和JavaScript开发小程序端。
  • ECharts:可视化考勤数据统计(如缺勤率、打卡热力图)。

数据库

  • MySQL:主数据库,存储学生信息、考勤记录等结构化数据。
  • MongoDB(可选):存储非结构化数据,如打卡时的照片或日志。

部署与运维

  • Nginx:反向代理和静态资源托管。
  • Docker:容器化部署,简化环境配置。

详细功能设计

小程序端功能

  • 学生身份认证:通过微信OpenID绑定学号,支持人脸识别二次验证。
  • 实时定位打卡:调用微信wx.getLocationAPI获取经纬度,与预设考勤点比对。
  • 异常申诉:提交缺勤/误判证明,支持图片上传。
  • 考勤记录查询:按日期范围查看个人打卡状态(正常/迟到/缺勤)。

管理后台功能

  • 考勤规则配置:设置考勤时间、有效距离范围(如200米内有效)。
  • 数据统计:按班级、课程生成出勤率报表,支持导出Excel。
  • 人工补签:管理员手动修正异常考勤记录。
  • 消息推送:通过微信模板消息通知学生缺勤预警。

教师端功能

  • 课堂管理:创建临时考勤任务(如突击点名)。
  • 批量处理:一键导出未打卡学生名单。

数据库设计(核心表)

学生表(student)

CREATE TABLE student (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    openid VARCHAR(64) UNIQUE COMMENT '微信OpenID',
    student_no VARCHAR(32) NOT NULL COMMENT '学号',
    name VARCHAR(32) NOT NULL,
    class_id BIGINT COMMENT '班级ID',
    face_data TEXT COMMENT '人脸特征数据(Base64)'
);

考勤记录表(attendance)

CREATE TABLE attendance (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    student_id BIGINT NOT NULL,
    course_id BIGINT NOT NULL,
    check_in_time DATETIME COMMENT '打卡时间',
    status TINYINT COMMENT '0正常 1迟到 2缺勤',
    location POINT COMMENT '经纬度坐标',
    image_url VARCHAR(255) COMMENT '打卡照片URL'
);

课程表(course)

CREATE TABLE course (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(64) NOT NULL,
    teacher_id BIGINT,
    start_time TIME COMMENT '每日上课时间',
    valid_radius INT DEFAULT 200 COMMENT '有效打卡半径(米)'
);


系统测试设计

接口测试

  • 定位精度测试:模拟不同经纬度,验证距离计算的正确性。
  • 并发打卡:使用JMeter模拟100+学生同时打卡,检查响应时间和数据一致性。

安全测试

  • 越权访问:验证学生角色无法访问管理接口。
  • 位置伪造:尝试修改前端传递的经纬度参数,后端应拒绝异常坐标。

小程序兼容性测试

  • 微信版本覆盖:测试iOS/Android下不同微信版本的定位API兼容性。
  • 网络环境:弱网环境下考勤提交的重试机制。

源码结构示例

后端目录

/src/main/java/com/attendance/
├── config/       # Spring安全、Redis配置
├── controller/   # 考勤、学生管理API
├── service/      # 业务逻辑(考勤规则计算)
├── mapper/       # MyBatis接口
└── entity/       # 数据库实体类

小程序端核心代码

// 打卡逻辑
wx.getLocation({
  type: 'gcj02',
  success: (res) => {
    const distance = calculateDistance(res.latitude, res.longitude, targetLat, targetLng);
    if (distance < validRadius) {
      submitAttendance(); // 调用后端API
    }
  }
});

管理后台Vue组件

<template>
  <el-table :data="attendanceList">
    <el-table-column prop="studentName" label="姓名"/>
    <el-table-column prop="status" label="状态">
      <template #default="{row}">
        <el-tag :type="row.status === 0 ? 'success' : 'danger'">
          {{ statusMap[row.status] }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>


以上设计可根据实际需求扩展,例如加入请假审批流程或与学校教务系统对接课程表数据。

更多推荐