一:流程
这里简单讲一下业务流程:没画图就文字简单说吧
前端按钮点击事件调用后端接口--->后端通过携带参数生成二维码其中响应有: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了响应给前端(有需要联系我)