vue+spring boot实现校验码功能

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

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

1.img标签

<img ='height:40px; width: 100px; cursor: pointer;' ref='imgIdentifyingCode' :src='https://www.haobala.com/bcjs/selectedLogoPicture.imgUrl' >

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

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