使用Vue3.0和qrcode-generator库实现的二维码登录界面

使用Vue3.0和qrcode-generator库实现的二维码登录界面

首先我们需要解决的是获取二维码信息并创建二维码的问题

• 首先我们可以使用v-if和v-else来完成条件渲染，用户未登录时显示二维码，登陆后显示欢迎界面

<template>
  <div>
    <div v-if="!isLogin">
      <h2>请扫描二维码登录</h2>
      <div ref="qrcode"></div>
      <div ref="qrcodeRef"></div>
    </div>
    <div v-else>
      <h2>登录成功</h2>
      <p>欢迎使用本系统</p>
    </div>
  </div>
</template>

• 然后使用了qrcode-generator库来生成二维码，并使用ref指令将一个空的
  元素与qrcodeRef关联，以便在组件的onMounted生命周期函数中将生成的二维码插入到这个

  元素中。

import QRCode from 'qrcode-generator'
const isLogin = ref(false)
const qrcodeUrl = 'http://example.com/login'
 const qrcodeRef = ref<HTMLElement>()

• 在组件的setup函数中，我们首先使用QRCode类创建了一个QRCode对象，并将登录URL添加到QRCode对象中。然后调用make函数生成二维码，createImgTag函数生成一个标签的字符串，最后将这个字符串插入到qrcodeRef.value中。

onMounted(() => {
  // 生成二维码
  const qrcode = QRCode(0, 'L')
  qrcode.addData(qrcodeUrl)
  qrcode.make()
  const qrcodeImage = qrcode.createImgTag(4, 8)
  if (qrcodeRef.value) {
    qrcodeRef.value.innerHTML = qrcodeImage
  }

• 为了模拟登录成功，我们使用了setTimeout函数将isLogin.value设置为true。由于isLogin是响应式变量，当其值发生变化时，页面会自动重新渲染，此时条件渲染会切换到“登录成功”的状态，显示欢迎信息。

 // 模拟登录成功
  setTimeout(() => {
    isLogin.value = true
  }, 5000)

下一步我们考虑将二维码的定时刷新的功能添加进去

初步思路如下

• 首先添加了一个timestamp变量，用于保存当前的时间戳。

const timestamp = ref(Date.now())

 let intervalId: number | null = null

• 在updateQRCode函数中，我们使用将时间戳添加到登录URL中，从而为生成的二维码添加了时间戳。

function updateQRCode() {
   const qrcode = QRCode(0, 'L')
   //将时间戳信息添加到URL信息中去
   qrcode.addData(`${qrcodeUrl}?t=${timestamp.value}`)
   //创建二维码
   qrcode.make()
   const qrcodeImage = qrcode.createImgTag(4, 8)
   if (qrcodeRef.value) {
     qrcodeRef.value.innerHTML = qrcodeImage
   }
 }

• 在startTimer函数中，我们使用setInterval函数定时更新时间戳，并在二维码过期时显示刷新按钮。

  function startTimer() {
   //首先判断是否存在，如果存在则清除之前的计时器，防止多个计时器同时计数
   if (intervalId) clearInterval(intervalId)
   
   intervalId = setInterval(() => {
     timestamp.value = Date.now()
     if (!showRefreshButton.value) {
   	showRefreshButton.value = true
     }
   }, 5000)

 }

• 在stopTimer函数中，我们使用clearInterval函数停止定时器。

 function stopTimer() {
   if (intervalId) clearInterval(intervalId)
 }

• 使用v-if指令判断是否需要显示刷新按钮，如果需要则显示一个“刷新”按钮，并在按钮被点击时调用refreshQRCode函数。

<p v-if="showRefreshButton">
   	  二维码已过期，请点击刷新
   	  <button @click="refreshQRCode">刷新</button>
   	</p>

需要注意的是，在组件销毁时需要调用stopTimer函数停止定时器，以避免内存泄漏。可以在组件的onUnmounted生命周期函数中调用stopTimer函数实现这个功能。

 onUnmounted(()=>{
   stopTimer()
 })

以下是一个使用Vue3.0和qrcode-generator库实现的二维码登录界面的示例代码：
首先，安装qrcode-generator库：

npm install qrcode-generator

最后完整代码如下

<template>
	<div>
	  <div v-if="!isLogin">
		<h2>请扫描二维码登录</h2>
		<div ref="qrcode"></div>
		<div ref="qrcodeRef"></div>
		<p v-if="showRefreshButton">
		  二维码已过期，请点击刷新
		  <button @click="refreshQRCode">刷新</button>
		</p>
	  </div>
	  <div v-else>
		<h2>登录成功</h2>
		<p>欢迎使用本系统</p>
	  </div>
	</div>
  </template>
  <script setup lang="ts">
  import QRCode from 'qrcode-generator'
  import { ref, onMounted ,onUnmounted} from 'vue'
  //定义一个登录的状态
  const isLogin = ref(false)
  //获取二维码接口的url信息
  const qrcodeUrl = 'https://music.163.com/login?codekey=a9997558-88a6-4c26-a415-6a8e7b2b9893'
  //定义一个响应式DOM元素用于存放二维码
  const qrcodeRef = ref<HTMLElement>()
  //定义刷新二维码按钮  初始值为false  不显示出来
	const showRefreshButton = ref(false)
	//定义一个时间戳获取当前时间
  const timestamp = ref(Date.now())

  let intervalId: number | null = null
  //刷新时间戳
  function refreshQRCode() {
	timestamp.value = Date.now()
  }
  //更新时间戳函数
  function updateQRCode() {
	const qrcode = QRCode(0, 'L')
	//将时间戳信息添加到URL信息中去
	qrcode.addData(`${qrcodeUrl}?t=${timestamp.value}`)
	//创建二维码
	qrcode.make()
	const qrcodeImage = qrcode.createImgTag(4, 8)
	if (qrcodeRef.value) {
	  qrcodeRef.value.innerHTML = qrcodeImage
	}
  }
  //更新时间戳函数
  function startTimer() {
	//首先判断是否存在，如果存在则清除之前的计时器，防止多个计时器同时计数
	if (intervalId) clearInterval(intervalId)
	
	intervalId = setInterval(() => {
	  timestamp.value = Date.now()
	  if (!showRefreshButton.value) {
		showRefreshButton.value = true
	  }
	}, 5000)

  }

  function stopTimer() {
	if (intervalId) clearInterval(intervalId)
  }
  
  onMounted(() => {
	updateQRCode()
	startTimer()
  })
//   另外，在组件销毁时应该停止计时器，以避免内存泄漏。可以在组件的onUnmounted生命周期函数中调用stopTimer函数来实现这个功能。
  onUnmounted(()=>{
	stopTimer()
  })
  </script>