System Overview

This student attendance system integrates a Spring Boot backend, a Vue-based web management interface, and a UniApp-powered WeChat Mini Program for mobile check-ins. The architecture supports real-time location verification, optional facial recognition, and role-based access control for administrators, teachers, and students.

Technology Stack

• Backand: Spring Boot with MyBatis-Plus for ORM, JWT for authentication, and RESTful APIs.
• Web Frontend: Vue 3 with Element Plus UI components and Axios for API communication.
• Mobile Frontend: UniApp compiled to WeChat Mini Program, leveraging native APIs for geolocation and camera access.
• Data base: MySQL 8.0 with UTF-8 encoding and InnoDB engine.

Core Features

• Role-based user management (admin, teacher, student)
• QR code or GPS-based attendance initiation
• Real-time attendance records with timestamps and coordinates
• Optional face verification using Baidu AI API
• Attendance statistics and export functionality

Database Schema

Key tables include:

CREATE TABLE `student` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `student_id` VARCHAR(50) UNIQUE NOT NULL,
  `name` VARCHAR(100) NOT NULL,
  `class_id` BIGINT,
  `phone` VARCHAR(20),
  PRIMARY KEY (`id`)
);

CREATE TABLE `attendance_session` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `teacher_id` BIGINT NOT NULL,
  `course_name` VARCHAR(100) NOT NULL,
  `latitude` DECIMAL(10, 8),
  `longitude` DECIMAL(11, 8),
  `valid_radius` INT DEFAULT 100,
  `start_time` DATETIME NOT NULL,
  `end_time` DATETIME NOT NULL,
  PRIMARY KEY (`id`)
);

CREATE TABLE `attendance_record` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `session_id` BIGINT NOT NULL,
  `student_id` BIGINT NOT NULL,
  `check_in_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
  `latitude` DECIMAL(10, 8),
  `longitude` DECIMAL(11, 8),
  `status` ENUM('present', 'late', 'absent') DEFAULT 'present',
  PRIMARY KEY (`id`),
  UNIQUE KEY `unique_attendance` (`session_id`, `student_id`)
);

Backend API Example

The following endpoint validates a student's check-in request against an active session:

@RestController
@RequestMapping("/api/attendance")
public class AttendanceController {

    @Autowired
    private AttendanceService attendanceService;

    @PostMapping("/check-in")
    public ResponseEntity<Result> checkIn(@RequestBody CheckInRequest request) {
        try {
            boolean success = attendanceService.processCheckIn(
                request.getSessionId(),
                request.getStudentId(),
                request.getLatitude(),
                request.getLongitude()
            );
            return success ? 
                ResponseEntity.ok(Result.success("Check-in successful")) :
                ResponseEntity.badRequest().body(Result.error("Invalid session or location"));
        } catch (Exception e) {
            return ResponseEntity.status(500).body(Result.error("Server error"));
        }
    }
}

Frontend Integration

The UniApp mini program requests geolocation permission and submits coordinates to the backend:

// pages/checkin/checkin.vue
methods: {
  async submitAttendance() {
    const location = await uni.getLocation({ type: 'gcj02' });
    const res = await this.$http.post('/api/attendance/check-in', {
      sessionId: this.currentSession.id,
      studentId: this.studentId,
      latitude: location.latitude,
      longitude: location.longitude
    });
    if(res.success) {
      uni.showToast({ title: '签到成功' });
    }
  }
}

Testing Strategy

Functional testing covered critical workflows:

Deployment Requirements

• Java 17+ runtime environment
• Nginx reverse proxy configuration for Vue frontend
• WeChat Mini Program account with domain whitelisting
• MySQL databace with initialized schema