Home > Web Front-end > JS Tutorial > Code implementation of QR code scanning data burying point

Code implementation of QR code scanning data burying point

不言
Release: 2018-08-14 17:26:53
Original
2739 people have browsed it

The content of this article is about the code implementation of QR code scanning data burying points. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Problems encountered in the project: 1. The front desk buries the product scan code data (the link in the QR code is an external link, not its own backend). If it is directly released to the outside For links, the data cannot be counted, so you need to request to your own backend first, and then redirect the external link. 2. If the link in the QR code is too long, the QR code will have many dots, and the scanning and recognition time of the mobile phone will be lengthened. It is necessary to design a short link replacement strategy

Code implementation of QR code scanning data burying point

1. vue front-end

Quoteqrcode-litePackage to generate QR code

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}`)
})
Copy after login

2. Laravel backend

The backend mainly implements 3 functions, generating short links, caching and accessing long links, and redirecting

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);
    }
Copy after login

Recommended related articles:

How to use QR code to log in? Summarize the usage of QR code login examples

QR code online generation of pictures PHP source code

The above is the detailed content of Code implementation of QR code scanning data burying point. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template