vue+spring boot如何实现校验码功能

这篇文章将为大家详细讲解有关Vue+Spring Boot如何实现校验码功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

img标签

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

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;        }      );    },

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);// 输出验证码图片方法 }

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());  } }

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; }

关于“vue+spring boot如何实现校验码功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。