基于springboot+vue的微信小程序的学生定位考勤系统
·
技术栈设计
后端技术栈
- 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>
以上设计可根据实际需求扩展,例如加入请假审批流程或与学校教务系统对接课程表数据。























更多推荐



所有评论(0)