vue+spring boot实现校验码功能

本文实例为大家分享了vue+spring boot实现校验码功能的具体代码，供大家参考，具体内容如下

用vue写了一个校验码来玩玩，样子如下：

1.img标签

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

2.js代码

/**
     * 获取校验码
     */
    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\");// 设置相应类型,告诉浏览器输出的内容为图片
  response.setHeader(\"Pragma\", \"No-cache\");// 设置响应头信息，告诉浏览器不要缓存此内容
  response.setHeader(\"Cache-Control\", \"no-cache\");
  response.setDateHeader(\"Expire\", 0);
  userService.getRandcodedDawTransparent(uuid, request, response);// 输出验证码图片方法
 }

4.service

@Override
 public void getRandcodedDawTransparent(String uuid, HttpServletRequest request, HttpServletResponse response) {
  try {
   Map<String, Object> map = CodeUtil.getRandcodedDawTransparent();
   // 将生成的随机字符串保存到session中
   log.info(\"==保存的uuid:\"+uuid);
   log.info(\"==保存的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<>();
  // 创建BufferedImage对象
  BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  // 获取Graphics2D
  Graphics2D g2d = image.createGraphics();

  // 增加下面代码使得背景透明
  image = g2d.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
  g2d.dispose();
  g2d = image.createGraphics();

  g2d.setFont(new Font(\"Times New Roman\", Font.ROMAN_BASELINE, 18));// 字体大小
  g2d.setColor(getRandColor(110, 133));// 字体颜色

  // 绘制干扰线
  for (int i = 0; i <= lineSize; i++) {
   drowLine(g2d, width, height);
  }
  // 绘制随机字符
  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流
  ImageIO.write(image, \"png\", baos);// 写入流中
  byte[] bytes = baos.toByteArray();// 转换成字节
  bytes = Base64.encodeBase64(bytes);
  rsMap.put(\"img\", bytes);

  return rsMap;
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。