本文實(shí)例為大家分享了vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能的具體代碼，供大家參考，具體內(nèi)容如下

用vue寫了一個(gè)校驗(yàn)碼來玩玩，樣子如下：

1.img標(biāo)簽

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

2.js代碼

/** * 獲取校驗(yàn)碼 */ 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');// 設(shè)置相應(yīng)類型,告訴瀏覽器輸出的內(nèi)容為圖片 response.setHeader('Pragma', 'No-cache');// 設(shè)置響應(yīng)頭信息，告訴瀏覽器不要緩存此內(nèi)容 response.setHeader('Cache-Control', 'no-cache'); response.setDateHeader('Expire', 0); userService.getRandcodedDawTransparent(uuid, request, response);// 輸出驗(yàn)證碼圖片方法 }

4.service

@Override public void getRandcodedDawTransparent(String uuid, HttpServletRequest request, HttpServletResponse response) { try { Map<String, Object> map = CodeUtil.getRandcodedDawTransparent(); // 將生成的隨機(jī)字符串保存到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<>(); // 創(chuàng)建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); } // 繪制隨機(jī)字符 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();// 轉(zhuǎn)換成字節(jié) bytes = Base64.encodeBase64(bytes); rsMap.put('img', bytes); return rsMap; }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。