Laravel Jetstream中如何扫描生成的二维码并实现数据存储与展示？

1. 修正二维码生成逻辑 #

你当前的二维码未包含可触发操作的有效链接，导致扫描后无反应。需要让二维码指向一个能处理扫描请求的路由，传递预约ID作为核心参数。

首先确保安装二维码生成包（以simplesoftwareio/simple-qrcode为例），未安装则执行：

composer require simplesoftwareio/simple-qrcode

修改AdminController.php中的方法：

// AdminController.php
use SimpleSoftwareIO\QrCode\Facades\QrCode;

public function emailview_approved($id)
{
    $appointment = Appointment::findOrFail($id);

    // 生成扫描后跳转的处理路由链接
    $scanUrl = route('appointment.scan', ['id' => $appointment->id]);
    
    // 生成base64格式的二维码，方便视图直接渲染
    $qrCode = base64_encode(QrCode::format('png')->size(200)->generate($scanUrl));

    // 更新预约状态
    $appointment->status = 'Approved';
    $appointment->save();

    return view('admin.email_view_approved', compact('appointment', 'qrCode'));
}

2. 搭建扫描处理与数据存储体系 #

2.1 创建扫描记录模型 #

生成模型及迁移文件：

php artisan make:model ScanRecord -m

在迁移文件中添加扫描记录字段：

// database/migrations/xxxx_xx_xx_create_scan_records_table.php
public function up()
{
    Schema::create('scan_records', function (Blueprint $table) {
        $table->id();
        $table->foreignId('appointment_id')->constrained()->onDelete('cascade');
        $table->string('scanned_by')->nullable(); // 可选：记录扫描者ID（需登录态支持）
        $table->timestamp('scanned_at')->useCurrent();
        $table->timestamps();
    });
}

执行迁移：

php artisan migrate

2.2 添加路由 #

在routes/web.php中新增路由：

// 处理二维码扫描请求
Route::get('/appointment/scan/{id}', [App\Http\Controllers\ScanController::class, 'handleScan'])->name('appointment.scan');
// 展示扫描记录列表
Route::get('/scan-records', [App\Http\Controllers\ScanController::class, 'index'])->name('scan.records');

2.3 编写扫描处理控制器 #

生成控制器并实现逻辑：

php artisan make:controller ScanController

填充控制器代码：

// app/Http/Controllers/ScanController.php
use App\Models\Appointment;
use App\Models\ScanRecord;

class ScanController extends Controller
{
    public function handleScan($id)
    {
        $appointment = Appointment::findOrFail($id);

        // 保存扫描记录到数据库
        ScanRecord::create([
            'appointment_id' => $appointment->id,
            // 若需记录扫描者，可添加：'scanned_by' => auth()->id()
        ]);

        // 扫描成功后跳转提示页，也可返回JSON接口
        return view('scan.success', compact('appointment'));
    }

    // 加载扫描记录表格
    public function index()
    {
        $scanRecords = ScanRecord::with('appointment')->latest()->paginate(10);
        return view('scan.records', compact('scanRecords'));
    }
}

3. 修正视图渲染与创建展示页面 #

3.1 二维码视图渲染 #

在admin.email_view_approved视图中正确展示二维码：

<!-- resources/views/admin/email_view_approved.blade.php -->
<div class="qr-container">
    <h3>预约验证二维码</h3>
    <img src="data:image/png;base64,{{ $qrCode }}" alt="扫描验证预约">
</div>

3.2 扫描记录表格视图 #

创建scan.records视图展示数据：

<!-- resources/views/scan/records.blade.php -->
<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h2 class="text-xl font-bold mb-4">扫描验证记录</h2>
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预约人</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">科室</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预约日期</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">扫描时间</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($scanRecords as $record)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $record->appointment->name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $record->appointment->department_name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $record->appointment->date }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $record->scanned_at->format('Y-m-d H:i:s') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="mt-4">
                        {{ $scanRecords->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

4. 测试流程 #

1. 访问生成二维码的页面，扫描二维码将触发路由请求，自动保存扫描记录。
2. 访问/scan-records即可查看所有扫描数据的表格展示。

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