【筆記3】二維碼掃碼數據埋點

項目中遇到的問題：1.前臺爲商品掃碼數據埋點（二維碼中的連接是外鏈，不是本身的後臺），若是直接放外鏈的話，是統計不到數據的，因此須要先請求到本身後臺，而後重定向外鏈。2. 二維碼中連接若是太長，二維碼的點會不少，手機掃碼識別時間加長，須要設計短連接替換策略

1. vue前端

引用qrcode-lite包生成二維碼

import { toDataURL } from 'qrcode-lite'
...
const longUrl = 'http://h5.m.taobao.com/app/smg/index.html?a=1&b=2&c=3...'
this.shortUrl = this.getShortUrl(longUrl)  // 由長連接獲取短連接
const qrOption = {
    width: 200,
    margin: 1,
    quality: 0.3
}
this.getQrcodeImgURL(this.shortUrl, qrOption).then(url => {
    this.qrcodeImg = url
}).catch((err) => {
    console.log(`Create qrcode img failed, ${err}`)
})

2. laravel後臺

後臺主要實現3個功能，生成短連接、長連接的緩存和取用、重定向

public function shortUrl(Request $request)
    {
        $url = $request->input('long_url');
        if (!$url) {
            return response()->json([
                'code' => '-1',
                'message' => 'The long_url is required!'
            ]);
        }

        $key =  Carbon::now()->timestamp; // 以當前時間戳做爲緩存的key
      
        $expiresAt = Carbon::now()->addDays(10); // 短連接的有效時間爲10天
        Cache::put($key, $url, $expiresAt);

        return response()->json([
            'code' => '0',
            'message' => 'Success short the url',
            'data' => $key
        ]);
    }
    
 public function redirect($shortCode)
    {
        $key = $shortCode;
        if (!$key) {
            return view("common.error", [
                "errorTitle" => "掃碼錯誤",
                "errorMessage" => "二維碼錯誤,請跟管理員確認!"]);
        }

        $redirectUrl = Cache::get($key, 'expiration');
        if ($redirectUrl == 'expiration') {
            return view("common.error", [
                "errorTitle" => "掃碼錯誤",
                "errorMessage" => "二維碼過時,請從新生成二維碼後再掃碼!"]);
        }

        // 記錄埋點數據
        ...
        
        return redirect()->away($redirectUrl);
    }