Let's talk about the best way to generate a QR code for a Web project.

Source: Internet
Author: User

Let's talk about the best way to generate a QR code for a Web project.

After the design and implementation process, you never know what kind of posture the deployed program will run.

This article describes the correct posture of QR code generation in a Web project by using different implementations of the QR code generation logic.

In this article, we would like to invite you to take a brick. The logic implemented five days before the trial run is as follows:

  • The client ajax request generates a QR code. The backend service can understand this request and generate a QR code (refer to my blog: Google Zxing QR code generation and resolution ).
  • The QR code has been named by the user ID and stored in the project/webcontent/qrcode/AAAAAAAAAAAAAA.png.
  • The User ID is used to reduce the storage pressure on the server. A user has only one QR code, no matter how many times he clicks, only one file is saved in the project directory (Java IO judges before writing the file, and overwrites the file with the same name ).
  • Return the generated QR code name to the front-end. Jquery accurately places the image path attribute into the Dom element.
var qrcode = $("#qrcode");qrcode.removeAttr("src");qrcode.attr("src","${pageContext.request.contextPath}/qrcode/" + data.qrcodeFileName);

Problems after implementation:

  • When a user clicks on a business to generate a QR code multiple times, due to the timeliness, the subsequent generated QR code becomes invalid, and scanning immediately at one side will become invalid.
  • Check the log and find that the subsequent request links are the timestamp generated for the first time. Check the project directory and find that the QR code is indeed generated in real time, but the link after scanning the Code is the first time.
  • I think the problem should be solved in the browser. After repeated experiments, when almost all browsers introduce images with the same path and name for the first time, will read the images cached in the browser.
  • Haha, you can't say to users, "Clear your browser cache image every time you click to generate a QR code", right ?.
  • In fact, the image content in the project directory has already occurred, but the name and import path have not changed, but are not found by the browser. This is indeed not to blame the browser for being too stupid.
  • Then each QR code is assigned a unique ID? The files under the project path will surely pop up, and the Project Manager will ask for tea.
  • Then we can find a way to repeat the search and practice, and the second implementation logic will appear:

  • The user ajax requests to generate the QR code content and returns it to the page. The front-end uses a third-party QR code library qrcode. js to generate a QR code on the front-end.
  •  new QRCode(document.getElementById("qrcode"), data.Link);
  • To learn more about qrcode. js, visit the official website: http://david shimjs.github.io/qrcodejs /.
  • The implementation of this process completely abandons part of the code generated by the backend and puts the generated QR code image into the project path.
  • When the frontend is generated, it is important to note that the parameters in the jump link returned to the frontend need to be encrypted. After all, the frontend is an incorrect place.
  • It is estimated that the front-end QR code generated by large companies is not much different from the second solution. (Haha, only when you hit the south wall will you know that there is a wall on it)

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.