Penjelasan terperinci tentang cara melaksanakan fungsi log masuk kod QR pada bahagian PC Vue

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Vue Ia terutamanya memperkenalkan prinsip melaksanakan pengimbasan kod pada bahagian PC? Bagaimana untuk menjana imej kod QR? Bagaimana untuk menggunakan Vue untuk melaksanakan log masuk kod QR bahagian hadapan? Bagi yang berminat, mari kita lihat di bawah ini semoga bermanfaat untuk semua.

Penerangan Keperluan

Pada masa ini, kebanyakan aplikasi PC mempunyai APP mudah alih yang menyokong, seperti WeChat, Taobao, dll. Dengan menggunakan imbasan pada APP mudah alih The fungsi imbasan membolehkan anda mengimbas imej kod QR pada halaman untuk log masuk, menjadikan operasi log masuk pengguna lebih mudah, selamat dan pantas.

Analisis Idea

Prinsip pengimbasan PC?

Fungsi log masuk kod imbasan melibatkan halaman web, pelayan dan telefon mudah alih Langkah-langkah umum interaksi antara tiga hujung adalah seperti berikut:

• Halaman web dipaparkan. kod QR dan terus Hantar permintaan kepada pelayan untuk bertanya tentang status kod QR; akan melompat ke halaman log masuk pengesahan Jika pengguna Selepas mengesahkan log masuk, pelayan akan mengubah suai status kod QR dan mengembalikan maklumat log masuk pengguna; halaman selepas log masuk selepas menerima perubahan status kod QR bahagian pelayan; dan kod QR baharu perlu dimuat semula dan dijana.

• Pelaksanaan fungsi bahagian hadapan

Bagaimana untuk menjana imej kod QR?

• Kandungan kod QR ialah rentetan, dan uuid boleh digunakan sebagai pengecam unik kod QR
• Gunakan pemalam qrcode import QRCode daripada 'qrcode; '; untuk menukar uuid kepada dua Kod QR dipaparkan kepada pengguna

Bagaimana untuk mengawal ketepatan masa kod QR?

Gunakan setInterval pemasa bahagian hadapan, mulakan masa berkesan masa berkesan dan muat semula kod QR selepas undur detik tamat

Bagaimanakah bahagian hadapan memperoleh status pelayan Kod QR?
• Halaman hadapan menghantar permintaan pertanyaan status kod QR ke pelayan, biasanya menggunakan tinjauan pendapat
• • 定时轮询：间隔1s 或特定时段发送请求，通过调用setInterval(), clearInterval()来停止；
  • 长轮询：前端判断接收到的返回结果，若二维码仍未被扫描，则会继续发送查询请求，直至状态发生变化（失效或扫码成功）
  • Websocket：前端在生成二维码后，会与后端建立连接，一旦后端发现二维码状态变化，可直接通过建立的连接主动推送信息给前端。

  使用长轮询实现：

   // 获取后台状态
      async checkQRcodeStatus() {
         const res = await checkQRcode({
           uid: this.uid,
           time: this.time
         })
         if(res && res.code == 200) {
           let codeStatus - res.codeStatus
           this.codeStatus =  codeStatus
           let loginData = res.loginData
           switch(codeStatus) {
             case 3:
                console.log("二维码过期")
                clearInterval(this.qsCodeTimer)
                this.qsCodeTimer = null
                this.effectiveTime = 0
              break;
              case 2:
                console.log("扫码通过")
                clearInterval(this.qsCodeTimer)
                this.qsCodeTimer = null
                this.$emit("login", loginData)
              break;
              case 1:
                console.log("未扫码")
                this.effectiveTime > 0  && this.checkQRcodeStatus()
              break;
              default:
              break;
           }
         } 
      },

  推荐学习：《vue.js视频教程》
  

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara melaksanakan fungsi log masuk kod QR pada bahagian PC Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!