聊聊 Web 项目二维码生成的最佳姿势
2023-09-27 14:22:34 时间
在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行。
本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势。
文中如有批量,欢迎各位看客老爷拍砖。试运行前5天实现的逻辑是这样的:
- 客户 ajax 请求生成二维码,后端服务洞悉这一请求,生成二维码(可参照我博客:Google Zxing 二维码生成与解析)。
- 并将二维码已用户 ID 进行命名存储在项目工程 /webcontent/qrcode/AAAAAAAAAAAAAA.png 当中。
- 使用用户 ID 是想减少服务器存储压力,一个用户有且只有一张二维码,无论他点击了多少次,项目目录下只保存一张(Java IO 会在写文件前判断,如果存在相同名称的文件,会直接覆盖)。
- 将生成的 二维码 名称返回给前端,Jquery 将图片路径属性精准的放入 Dom 元素中。
var qrcode = $("#qrcode"); qrcode.removeAttr("src"); qrcode.attr("src","${pageContext.request.contextPath}/qrcode/" + data.qrcodeFileName);
实现后出现的问题:
- 当用户在一个业务点击了多次生成二维码时,因为有时效性,导致后续生成的二维码都失效,一边点马上扫都会是失效。
- 查看日志发现,后续的请求链接都是第一次生成的时间戳,查看项目目录发现,二维码确实是实时生成,但扫码后的链接却是第一次的。
- 我想问题应该在浏览器上面,经过反复实验,几乎所有的浏览器在第一次引入相同路径相同名称的图片时,后续如果还需要引入,会读取浏览器缓存当中的图片。
- 你不可能对用户说“每次点生成二维码的时候先清除一下你的浏览器缓存图片”,对吧?。
- 其实项目目录下的图片内容已经发生变化,只是名称和引入路径没变,但并没有被浏览器发现,这确实也不能怪浏览器太笨。
- 那就每张二维码都给一个唯一的ID? 项目路径下的文件肯定会爆炸,到时候会被项目经理叫去喝茶。
- 那就在想想办法,反复搜索和实践,第二种实现逻辑就出现了:
- 用户 ajax 请求生成二维码内容,返回给页面,前端使用第三方生成二维码类库 qrcode.js 在前端生成二维码。
-
new QRCode(document.getElementById("qrcode"), data.Link);
- 想了解 qrcode.js 的到官网:http://davidshimjs.github.io/qrcodejs/。
- 这种流程的实现方式,完全摒弃了后端生成二维码的部分代码、将生成二维码图片放入项目路径的两个过程。
- 前端随用随生成,需要注意的是返回给前端的跳转链接中的参数需要加密处理,毕竟前端是个是非之地。
- 大公司的前端二维码生成,估计和第二种解决方案差不了多少。
相关文章
- 使用SpringBoot创建Web项目
- 淘东电商项目(36) -SSO单点登录(退出功能)
- 20分布式电商项目 - 商家申请入驻
- 如何设计 Go 项目的开发流程?
- ngnix 配置多个前端项目(首次上传vue)
- C++程序设计课程同步项目——选择结构程序设计任务(二)
- .gitignore详解(附上eclipse的java项目的 .gitignore文件)
- mvn创建web项目
- 实用操作--JAVA项目从8升级至17的步骤及填坑记录
- intellij idea 使用Tomcat部署的项目在哪里,为什么不在Tomcat的webapps目录下面
- 基于Python与命令行人脸识别项目(系列一)
- uni app 零基础小白到项目实战
- Maven MyEclipse创建web项目没有src/maim/java
- 【使用pytest重构项目】pytest参数化处理:参数装饰器pytest.mark.parametrize()、解析列表、元组和字典操作
- Eclipse等导入(Web)项目后报错Tomcat报错 注释 乱码问题 等全部解决方法
- 新项目
- 云服务器web项目部署详解
- MyEclipse web项目导入Eclipse,详细说明
- 别再重复造轮子了,几个值得应用到项目中的 Java 开源库送给你
- tornado项目之路由装饰器
- 普通Java Web项目为什么lib包要放在WEB-INF下
- IntelliJ IDEA 2017.3 配置Tomcat运行web项目教程(多图)
- Tomcat中部署WEB项目的四种方法
- Java Web项目整体异常处理机制
- coco2dx新建项目报错,ld: -pie can only be used when targeting iOS 4.2 or later clang: error: linker command
- sonar:查询全部项目的bug和漏洞总数(只查询阻断/严重/主要级别)
- 记录下项目中常用到的JavaScript/JQuery代码一(大量实例)
- Python Web(1):建立第一个Web项目
- 一个优秀开源单点登录项目分布式单点登录框架。只需要登录一次就可以访问所有相互信任的应用系统。拥有“轻量级、分布式、跨域、Cookie+Token均支持、Web+APP均支持“等特性