vue+spring boot校验码的实现

今天是个好日子，用vue写了一个校验码来玩玩,样子如下：

1.img标签

<img
              style="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;
	}