如何通过接口实现动态二维码的定时刷新

如何通过接口实现动态二维码的定时刷新？

感觉本篇对你有帮助可以关注一下我的微信公众号（深入浅出谈java），会不定期更新知识和面试资料、技巧！！！

一、需求场景

在Web应用中，动态二维码常用于以下场景：

• 登录验证：微信扫码登录、APP扫码授权
  
• 支付场景：支付宝/微信支付码定时刷新
  
• 票务系统：电子票二维码防截屏盗用
  
• 会员系统：动态会员码累计积分
  

二、技术方案设计

1、 整体流程

三、前端部分

大致流程

1、请求后端接口（按照现有项目格式即可）
2、后端接口的返回类型定义（byte[]）
3、前端接收时定义响应类型（重点：responseType: 'arraybuffer'）
4、对后端返回数据进行转化：arrayBufferToBase64
5、对数据和标签进行绑定
具体实现

1、获取后端 二维码 图片接口

1.         import {
2.                 generateMemberCode
3.         } from '@/api/inter/member-code.js';
5. data() {
6.                         return {
7.                                 codeImg: '',
8.                                 timer: null, // 添加定时器引用,
9.                         }
10.                 },
11.                 onShow() {
12.                         // 立即加载一次
13.                         this.makeMemberCode();
15.                         // 设置定时器（注意保存引用）
16.                         this.timer = setInterval(() => {
17.                                 this.makeMemberCode();
18.                         }, 30000);
19.                 },
20.                 onHide() {
21.                         // 页面隐藏时清除定时器
22.                         if (this.timer) {
23.                                 clearInterval(this.timer);
24.                                 this.timer = null;
25.                         }
26.                 },
27.         methods: {
28.                         async makeMemberCode() {
29.                                 const memberId = 1; // 使用假数据中的 id
30.                                 const memberName = '张三'; // 使用假数据中的 nickname
31.                                 const params = {
32.                                         memberId,
33.                                         memberName
34.                                 };
35.                                 try {
36.                     // 调用后端接口（这里可改成符合你项目的请求方式）
37.                                         const response = await generateMemberCode(params);
38.                                         console.log('完整响应:', response);
40.                                         // 调试数据类型
41.                                         console.log('响应数据类型:', typeof response);
43.                                         // 处理二进制数据（适用于小程序）
44.                                         if (typeof response === 'object' && response instanceof ArrayBuffer) {
45.                                                 const base64 = uni.arrayBufferToBase64(response);
46.                                                 this.codeImg = `data:image/png;base64,${base64}`;
47.                                                 console.log('新的 codeImg:', this.codeImg); // 调试输出
48.                                         } else if (typeof response.data === 'string') {
49.                                                 this.codeImg = `data:image/png;base64,${response.data}`;
50.                                         }
51.                                         // 处理URL
52.                                         else if (response.data.imageUrl) {
53.                                                 this.codeImg = response.data.imageUrl;
54.                                         }
55.                                 } catch (error) {
56.                                         console.error('请求失败:', error);
57.                                         uni.showToast({
58.                                                 title: '会员码加载失败',
59.                                                 icon: 'none'
60.                                         });
61.                                 }
62.                         }
63.         }

复制代码

上面部分用到的代码:  member-code.js

1. import { HttpClient } from '@/api/utils/request.js'; // 确保路径正确
2. import api from '../../config/api.js'; // 导入 API 配置
4. const http = new HttpClient(api.base);
7. /**
8. * 获取后端二维码
9. */
10. export async function generateMemberCode(params) {
11.     try {
12.         const response = await http.getbuffer('/api/wx/generate-qrcode',params);
13.         console.log('Response:', response);
14.         return response; // 返回响应数据
15.     } catch (error) {
16.         console.error('Error:', error);
17.         throw error; // 继续抛出错误以供上层处理
18.     }
19. }

复制代码

请求接口工具类：request.js

1. class HttpClient {
2.         constructor(baseURL) {
3.                 this.baseURL = baseURL;
4.         }
6. async getbuffer(url, params = {}) {
7.                 try {
8.                         //await this.checkTokenAndNavigate(); // 在发送请求前检查 token
9.                         const queryString = this.buildQueryString(params);
10.                         const fullURL = `${this.baseURL}${url}${queryString}`;
11.        
12.                         return new Promise((resolve, reject) => {
13.                                 uni.request({
14.                                         url: fullURL,
15.                                         method: 'GET',
16.                                         header: {
17.                                                 'Content-Type': 'application/json',
18.                                                 'X-Auth-Token': `${uni.getStorageSync('token')}` // 如果需要在 header 中发送 token
19.                                         },
20.                                         responseType: 'arraybuffer', // 指定响应类型为 arraybuffer
21.                                         success: (response) => {
22.                                                 resolve(response.data);
23.                                         },
24.                                         fail: (error) => {
25.                                                 console.error('GET request error:', error);
26.                                                 reject(error);
27.                                         }
28.                                 });
29.                         });
30.                 } catch (error) {
31.                         // 如果 checkTokenAndNavigate 抛出错误（例如没有 token），则这里处理错误
32.                         return Promise.reject(error);
33.                 }
34.         }
35.     buildQueryString(params) {
36.           if (!params || Object.keys(params).length === 0) {
37.             return '';
38.           }
39.           return '?' + Object.keys(params)
40.             .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
41.             .join('&');
42.         }
43. }
45. export {
46.         HttpClient
47. };

复制代码

接口地址Api 配置类：API.js

1. // 生产环境
2. const prod = {
3.   base: "http://XXXXXX:8099",
4. };
6. // 开发环境
7. const dev = {
8.   base: "http://XXXXXXX:8099",
9. };
11. // 默认生产环境
12. let api = prod;
14. // 如果是开发环境
15. if (process.env.NODE_ENV === "development") {
16.   api = dev;
17. }
19. // 微信小程序和App的打包方式建议为生产环境，所以这块直接条件编译赋值()
20. // #ifdef MP-WEIXIN || APP-PLUS
21. // 这个直接使用的是 dev 地址
22. api = dev;
23. // #endif
25. export default {
26.   ...api,
27. };

复制代码

2、模板进行渲染

1.         <view >
2.                                         <image :src="`${codeImg}`" ></image>
3.                                 </view>

复制代码

四、后端部分

具体实现

1、添加依赖

1.     <dependency>
2.         <groupId>com.google.zxing</groupId>
3.         core</artifactId>
4.         <version>3.4.1</version>
5.     </dependency>
6.     <dependency>
7.         <groupId>com.google.zxing</groupId>
8.         javase</artifactId>
9.         <version>3.4.1</version>
10.     </dependency>

复制代码

2、接口实现controller

1. import com.google.zxing.BarcodeFormat;
2. import com.google.zxing.EncodeHintType;
3. import com.google.zxing.WriterException;
4. import com.google.zxing.client.j2se.MatrixToImageWriter;
5. import com.google.zxing.common.BitMatrix;
6. import com.google.zxing.qrcode.QRCodeWriter;
8. import org.springframework.http.HttpHeaders;
9. import org.springframework.http.HttpStatus;
10. import org.springframework.http.MediaType;
11. import org.springframework.http.ResponseEntity;
12. import org.springframework.web.bind.annotation.GetMapping;
13. import org.springframework.web.bind.annotation.RequestParam;
14. import org.springframework.web.bind.annotation.RestController;
16. import java.io.ByteArrayOutputStream;
17. import java.nio.file.FileSystems;
18. import java.util.HashMap;
19. import java.util.Map;
21. @RestController
22. public class QRCodeController {
24.     @GetMapping("/generate-qrcode")
25.     public ResponseEntity<byte[]> generateQRCode(
26.             @RequestParam String memberId,
27.             @RequestParam String memberName) throws WriterException {
28.         
29.         // 构建二维码内容（内容可根据自己业务动态修改）
30.         // 建议加上唯一标识，安全码、起始时间、状态等，保证二维码安全性
31.         String qrContent = "Member ID: " + memberId + ", Member Name: " + memberName;
33.         // 设置二维码参数
34.         int width = 300;
35.         int height = 300;
36.         String imageFormat = "PNG"; // 图片格式
38.         Map<EncodeHintType, Object> hints = new HashMap<>();
39.         hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
41.         // 生成二维码
42.         QRCodeWriter qrCodeWriter = new QRCodeWriter();
43.         BitMatrix bitMatrix = qrCodeWriter.encode(qrContent, BarcodeFormat.QR_CODE, width, height, hints);
45.         // 将二维码写入字节数组输出流
46.         ByteArrayOutputStream pngOutputStream = new ByteArrayOutputStream();
47.         MatrixToImageWriter.writeToStream(bitMatrix, imageFormat, pngOutputStream);
49.         // 返回二维码图片
50.         HttpHeaders headers = new HttpHeaders();
51.         headers.setContentType(MediaType.IMAGE_PNG);
52.         return new ResponseEntity<>(pngOutputStream.toByteArray(), headers, HttpStatus.OK);
53.     }
54. }

复制代码

接口测试
GET http://localhost:8080/generate-qrcode?memberId=12345&memberName=JohnDoe

前端处理后端的数据时，在一定要指定相应类型：responseType: 'arraybuffer'

五、效果展示

六、安全性设计

风险防御方案二维码盗用30秒短时效性 + 单次有效性验证接口暴力请求限流策略（如Guava RateLimiter）中间人攻击全站HTTPS + 数据签名XSS攻击前端输入过滤 + CSP安全策略七、总结

关键技术栈：

• 前端定时器 + 二进制流处理
  
• 后端二维码生成 + 状态管理
  
• 高效的缓存策略
  

最佳实践建议：

• 始终为二维码添加时效性和唯一性标识
  
• 敏感操作需二次确认（如扫码后的授权确认）
  
• 监控二维码使用率，优化生成策略
  

通过前后端协作，动态二维码既能提升用户体验，又能有效保障系统安全性。
最后文章有啥不对，欢迎大佬在评论区指点！！！
如果感觉对你有帮助就点赞推荐或者关注一下吧！！！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！