項目中遇到的問題: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); }
相關文章推薦:
二維碼登錄如何使用?總結二維碼登錄實例用法
二維碼在線生成圖片PHP源代碼
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com