一:流程

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

前端按钮点击事件调用后端接口--->后端通过携带参数生成二维码其中响应有: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"code>

v-model="dialogVisible"code>

title=""code>

width="516"code>

:before-close="handleClose"code>

>

<div>

<QRCode :value="qrCode" :size="256" level="H" class="qrcode"/>code>

<!-- <img :src="qrCode" alt="二维码生成失败或解析失败"> -->code>

<div class="promote-tip"> 扫描二维码 分享 </div>code>

</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库会自动转换为二维码)

四:后端