項目中遇到的問題：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);}

總結

以上是生活随笔為你收集整理的【笔记3】二维码扫码数据埋点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。