qrCode前端生成二维码扫描跳转H5(vue3+Java+H5)

一:流程

这里简单讲一下业务流程:没画图就文字简单说吧

前端按钮点击事件调用后端接口--->后端通过携带参数生成二维码其中响应有:qrUrl-->返回响应至前端-->前端通过响应的数据字符串生成二维码-->扫描跳转

二:安全问题

其中这个业务的安全问题主要在于生成二维码之后携带跳转的信息,是否为敏感信息,会不会中间人抓到

处理方式

        最简单的方法就是直接使用Base64图片+AES加密就完事了,服务端和客户端有一个相同的密钥,不过服务端最后处理不使用相同的这个密钥使用的是对应的value密钥.以及使用https加密

        我这里做个测试就不需要这么麻烦了

三:前端 

        (1)安装qrcode库生成二维码

npm install qrcode.vue --save
pnpm install qrcode.vue --save

        (2)引入

import QRCode from 'qrcode.vue';

        (3)html显示二维码

<el-dialog
    class="weui-desktop-dialog"
    v-model="dialogVisible"
    title=""
    width="516"
    :before-close="handleClose"
    >
    <div>
        <QRCode :value="qrCode" :size="256" level="H" class="qrcode"/>
        <!-- <img :src="qrCode" alt="二维码生成失败或解析失败"> -->
        <div class="promote-tip"> 扫描二维码 分享 </div>
    </div>
</el-dialog>

        (4)按钮点击触发事件

const qrUrl = ref(null);
const qrCode = ref(null);

function generateQrCode(id, noticeId) {
    //给qrUrl.value赋值就行链接
  if (id === null || noticeId === null) {
    ElMessage.error('参数错误');
    dialogVisible.value = false;
    return;
  }
  const liveParam = {
    id: id,
    noticeId: noticeId
  };

  axiosInstance.post('/generateQrCode', liveParam)
    .then(response => {
      if (response.data.code === 200) {
        qrUrl.value = response.data.qrUrl;
        if(qrUrl.value === null){
          return;
        }
        dialogVisible.value = true;
      } else {
        ElMessage.error(response.data.message);
      }
    })
    .catch(error => {
      console.error('二维码生成失败', error);
      ElMessage.error('二维码生成失败');
    });
}

        (5)效果(我放的百度链接,大家只需要把对应的链接放入qr库会自动转换为二维码)

四:后端

后端简单很多就讲id和预告id加密后端解密一下就OK了响应给前端(有需要联系我)