Vue+spring boot realizes the verification code function

This article example shares the specific code of vue+spring boot to implement the verification code function for your reference. The specific content is as follows

I wrote a verification code using vue to play with it, which looks like this:

1.img tag

<img
     = "height:40px; width: 100px; cursor: pointer;"
     ref="imgIdentifyingCode"
     :src="selectedLogoPicture.imgUrl"
     class="logoImg"
 >

2.js code

/**
     * Get verification code */
    getIdentifyingCode() {
      let selft = this;
      //let pic = this.$refs.imgIdentifyingCode
      selft.loadingChack = true;
      let uuid = Utils.getUuid(32, 16);
      this.$store.state.uuid = uuid;
      this.$api.reader.getVerify(
        { responseType: "arraybuffer", uuid: uuid },
        r => {
          selft.loadingChack = false;
          selft.selectedLogoPicture.imgUrl = "data:image/png;base64," + r;
        }
      );
    },

3.controller

@RequestMapping("/getVerify")
 public void getVerify(@RequestParam String uuid, HttpServletRequest request, HttpServletResponse response) {
  response.setContentType("image/jpeg"); // Set the response type to tell the browser that the output content is a picture response.setHeader("Pragma", "No-cache"); // Set the response header information to tell the browser not to cache this content response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expire", 0);
  userService.getRandcodedDawTransparent(uuid, request, response); // Output verification code image method}

4.service

@Override
 public void getRandcodedDawTransparent(String uuid, HttpServletRequest request, HttpServletResponse response) {
  try {
   Map<String, Object> map = CodeUtil.getRandcodedDawTransparent();
   //Save the generated random string to session log.info("==saved uuid:"+uuid);
   log.info("==saved code:"+map.get("code"));
   sessionUtil.saveCode(uuid, map.get("code"));

   response.setContentType("image/png");
   OutputStream out = response.getOutputStream();

   out.write((byte[]) map.get("img"));
   out.flush();
   out.close();
  } catch (IOException e) {
   log.error(e.getMessage());
  }
 }

5.util

public static Map<String, Object> getRandcodedDawTransparent() throws IOException {
  Map<String, Object> rsMap = new HashMap<>();
  // Create a BufferedImage object BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  // Get Graphics2D
  Graphics2D g2d = image.createGraphics();

  // Add the following code to make the background transparent image = g2d.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
  g2d.dispose();
  g2d = image.createGraphics();

  g2d.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// Font size g2d.setColor(getRandColor(110, 133));// Font color // Draw interference lines for (int i = 0; i <= lineSize; i++) {
   drowLine(g2d, width, height);
  }
  // Draw random characters String randomString = "";
  for (int i = 1; i <= stringNum; i++) {
   randomString = drowString(g2d, randomString, i);
  }
  log.info(randomString);
  rsMap.put("code", randomString);
  g2d.dispose();
  ByteArrayOutputStream baos = new ByteArrayOutputStream(); // io stream ImageIO.write(image, "png", baos); // write to stream byte[] bytes = baos.toByteArray(); // convert to bytes bytes = Base64.encodeBase64(bytes);
  rsMap.put("img", bytes);

  return rsMap;
 }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: