关于在校园考勤系统中使用HTML5 QR Code Scanner库的技术咨询

Hey Dan, 刚从PHP转做JavaScript开发，在校园考勤项目里用HTML5 QR Code Scanner确实是个不错的选择！针对你的两个疑问，我整理了具体的实现方案：

1. 收集所有扫码解码值的列表 #

完全可以实现集中收集扫码数据的需求，核心思路是用一个数组来存储每次扫码成功后的学生姓名，同时做去重处理（避免重复扫描同一个学生的二维码）。

实现示例： #

<!-- HTML部分：扫码容器 -->
<div id="qr-reader" style="width: 500px;"></div>
<button id="submit-attendance">提交考勤</button>

// JavaScript部分：初始化扫码器并收集数据
let scannedStudents = [];

// 初始化HTML5 QR Code Scanner
const html5QrcodeScanner = new Html5QrcodeScanner(
    "qr-reader",
    { fps: 10, qrbox: 250 },
    /* verbose= */ false
);

// 扫码成功的回调函数
function onScanSuccess(decodedText, decodedResult) {
    // 检查是否已经扫描过该学生
    if (!scannedStudents.includes(decodedText)) {
        scannedStudents.push(decodedText);
        alert(`已添加学生：${decodedText}`);
        // 你还可以在这里添加UI提示，比如把学生姓名展示在页面的列表里
    }
}

html5QrcodeScanner.render(onScanSuccess);

// 绑定提交按钮事件
document.getElementById('submit-attendance').addEventListener('click', function() {
    if (scannedStudents.length === 0) {
        alert('还没有扫描任何学生的二维码哦');
        return;
    }
    // 调用传递数据给PHP的函数
    sendToPHP(scannedStudents);
});

这样你就能在scannedStudents数组里得到所有不重复的学生姓名列表，等所有学生扫描完成后再统一提交，比逐个处理效率高很多。

2. 将收集到的解码值传递给PHP完成批量写入 #

你可以通过POST请求把数组数据以JSON格式发送给PHP接口，PHP端接收后解析数据，再用预处理语句批量插入数据库，既高效又能防止SQL注入。

第一步：JavaScript端发送数据 #

function sendToPHP(students) {
    fetch('submit_attendance.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ students: students }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('考勤数据批量写入成功！');
            scannedStudents = []; // 清空列表，准备下一次考勤
        } else {
            alert('数据提交失败：' + data.message);
        }
    })
    .catch(error => {
        console.error('提交出错：', error);
        alert('网络错误，请重试');
    });
}

第二步：PHP端处理数据并写入数据库 #

<?php
// submit_attendance.php
header('Content-Type: application/json');

// 接收JSON格式的请求数据
$input = file_get_contents('php://input');
$data = json_decode($input, true);

// 校验数据有效性
if (!isset($data['students']) || !is_array($data['students'])) {
    echo json_encode([
        'success' => false,
        'message' => '无效的考勤数据'
    ]);
    exit;
}

$students = $data['students'];

// 连接数据库（替换成你的数据库信息）
$servername = "localhost";
$username = "your_db_user";
$password = "your_db_pwd";
$dbname = "campus_attendance";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查数据库连接
if ($conn->connect_error) {
    echo json_encode([
        'success' => false,
        'message' => '数据库连接失败：' . $conn->connect_error
    ]);
    exit;
}

// 准备批量插入的预处理语句（防止SQL注入）
$stmt = $conn->prepare("INSERT INTO attendance_records (student_name, scan_time) VALUES (?, NOW())");
$stmt->bind_param("s", $studentName);

// 遍历学生列表执行插入
foreach ($students as $name) {
    $studentName = trim($name);
    $stmt->execute();
}

// 关闭资源
$stmt->close();
$conn->close();

// 返回成功响应
echo json_encode([
    'success' => true,
    'message' => '共成功写入 ' . count($students) . ' 条考勤记录'
]);
?>

额外提示： #

• 确保你的数据库表attendance_records已创建，包含student_name（字符串类型）和scan_time（时间戳类型）字段。
• 生产环境中要添加教师身份验证逻辑，避免未授权提交数据。
• 如果二维码里存储的是学生ID而非姓名，只需要把代码中的student_name替换成student_id即可，逻辑完全通用。

内容的提问来源于stack exchange，提问作者GreenXL