springboot+vue实现验证码功能

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

package com.example.demo.Util;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import javax.imageio.ImageIO;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.awt.*;import java.awt.image.BufferedImage;import java.util.HashMap;import java.util.Map;import java.util.Random;//import java.util.logging.Logger;public class CodeUtil {public static final String RANDOMCODEKEY= 'RANDOMVALIDATECODEKEY';//放到session中的key private String randString = '0123456789';//随机产生只有数字的字符串 private String //private String randString = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';//随机产生只有字母的字符串 //private String randString = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';//随机产生数字与字母组合的字符串 private int width = 95;// 图片宽 private int height = 25;// 图片高 private int lineSize = 40;// 干扰线数量 private int stringNum = 4;// 随机产生字符数量 private static final Logger logger = LoggerFactory.getLogger(CodeUtil.class); private Random random = new Random(); /** * 获得字体 */ private Font getFont() {return new Font('Fixedsys', Font.CENTER_BASELINE, 18); } /** * 获得颜色 */ private Color getRandColor(int fc, int bc) {if (fc > 255) fc = 255;if (bc > 255) bc = 255;int r = fc + random.nextInt(bc - fc - 16);int g = fc + random.nextInt(bc - fc - 14);int b = fc + random.nextInt(bc - fc - 18);return new Color(r, g, b); } /** * 生成随机图片 */ public void getRandcode(HttpServletRequest request, HttpServletResponse response) {HttpSession session = request.getSession();// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作g.fillRect(0, 0, width, height);//图片大小g.setFont(new Font('Times New Roman', Font.ROMAN_BASELINE, 18));//字体大小g.setColor(getRandColor(110, 133));//字体颜色// 绘制干扰线for (int i = 0; i <= lineSize; i++) { drowLine(g);}// 绘制随机字符String randomString = '';for (int i = 1; i <= stringNum; i++) { randomString = drowString(g, randomString, i);}logger.info(randomString);//将生成的随机字符串保存到session中session.removeAttribute(RANDOMCODEKEY);session.setAttribute(RANDOMCODEKEY, randomString);g.dispose();try { // 将内存中的图片通过流动形式输出到客户端 ImageIO.write(image, 'JPEG', response.getOutputStream());} catch (Exception e) { e.printStackTrace();// logger.error('将内存中的图片通过流动形式输出到客户端失败>>>> ', e);} } /** * 绘制字符串 */ private String drowString(Graphics g, String randomString, int i) {g.setFont(getFont());g.setColor(new Color(random.nextInt(101), random.nextInt(111), random.nextInt(121)));String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));randomString += rand;g.translate(random.nextInt(3), random.nextInt(3));g.drawString(rand, 13 * i, 16);return randomString; } /** * 绘制干扰线 */ private void drowLine(Graphics g) {int x = random.nextInt(width);int y = random.nextInt(height);int xl = random.nextInt(13);int yl = random.nextInt(15);g.drawLine(x, y, x + xl, y + yl); } /** * 获取随机的字符 */ public String getRandomString(int num) {return String.valueOf(randString.charAt(num)); }}2.Controller层

要跨域！！

@RestController@RequestMapping('/Code')public class CodeController { private final static Logger logger = LoggerFactory.getLogger(CodeController.class); /** * 生成验证码 */ @GetMapping('getVerify') @CrossOrigin(origins = '*')// @RequestMapping(value = '/getVerify') public void getVerify(HttpServletRequest request, HttpServletResponse response) {try { response.setContentType('image/jpeg');//设置相应类型,告诉浏览器输出的内容为图片 response.setHeader('Pragma', 'No-cache');//设置响应头信息，告诉浏览器不要缓存此内容 response.setHeader('Cache-Control', 'no-cache'); response.setDateHeader('Expire', 0); CodeUtil randomValidateCode = new CodeUtil(); randomValidateCode.getRandcode(request, response);//输出验证码图片方法} catch (Exception e) { e.printStackTrace();// logger.error('获取验证码失败>>>> ', e);} } /** * 校验验证码 */ @RequestMapping(value = '/checkVerify',headers = 'Accept=application/json') @CrossOrigin(origins = '*',allowCredentials='true') public boolean checkVerify(@RequestParam String verifyInput, HttpSession session) {try{ //从session中获取随机数 String inputStr = verifyInput; String random = (String) session.getAttribute('RANDOMVALIDATECODEKEY'); if (random == null) {return false; } if (random.equals(inputStr)) {return true; } else {return false; }}catch (Exception e){ e.printStackTrace();// logger.error('验证码校验失败', e); return false;} }}3.前台vue方式：

页面部分

<template> <div> <el-row :gutter='0'> <el-formref='elForm':model='formData':rules='rules'size='medium'label- label-position='left' ><img :src='https://www.haobala.com/bcjs/imgUrl' alt='更换验证码' @click='getVerify(this)' /><el-col :span='6'> <el-form-item label='验证码' prop='code'> <el-input v-model='formData.code' placeholder='请输入验证码' clearable : > </el-input> </el-form-item></el-col><el-col :span='24'> <el-form-item size='large'> <el-button type='primary' @click='aVerify()'>提交</el-button> <el-button @click='resetForm'>重置</el-button> </el-form-item></el-col> </el-form> </el-row> </div></template>

js部分：

vue方法：

data() { return { imgUrl: '/api/Code/getVerify', formData: {code: undefined, }, rules: {code: [ { required: true, message: '请输入验证码', trigger: 'blur', },], }, }; },

methods: { aVerify() { var that = this; var data = Qs.stringify({verifyInput: this.formData.code, }); that.axios({ method: 'post', url: '/api/Code/checkVerify', data: data,}).then((response) => { console.log(response); if ( response.data) { alert('success!'); } else { alert('failed!'); } getVerify();}); }, getVerify(obj) { console.log(obj); // obj.src = 'https://www.haobala.com/api/Code/getVerify?' + Math.random(); this.imgUrl = '/api/Code/getVerify?' + Math.random(); }, resetForm() { this.$refs['elForm'].resetFields(); },},

原生js方法：

function getVerify(obj) { // obj.src = 'https://www.haobala.com/api/Code/getVerify' obj.src = 'https://www.haobala.com/api/Code/getVerify?' + Math.random(); //原生js方式 console.log(obj.src); // this.imgCode= '/api/Code/getVerify?'+Math.random();}// function getVerify() {// // $('#imgCode').on('click', function() {// $('#imgVerify').attr('src', ’Code/getVerify?’ + Math.random());//jquery方式// // });// }function aVerify() { var value = $('#verify_input').val(); // alert(value); $.ajax({ async: false, type: 'post', url: '/api/Code/checkVerify', dataType: 'json', data: { verifyInput: value, }, success: function (result) { if (result) {alert('success!'); } else {alert('failed!'); } // window.location.reload(); getVerify(); }, });}

实际应用中：

防止页面跳回不重新加载：

imgUrl直接绑定随机数

imgUrl: '/api/Code/getVerify?' + Math.random(),

aVerify() { var that = this; var data = Qs.stringify({verifyInput: this.formData.code, }); that.axios({ method: 'post', url: '/api/Code/checkVerify', data: data,}).then((response) => { console.log(response);this.result=response.data;console.log(this.result); if ( response.data) { this.submitForm(); // alert('success!'); } else { this.$message({ type: 'warning', message: '验证码错误',}); this.getVerify(); } // this.reload();}); }, getVerify() { console.log('hhhhh'); // var timestmp = (new Date()).valueOf(); // obj.src = 'https://www.haobala.com/api/Code/getVerify?' + Math.random(); this.imgUrl = '/api/Code/getVerify?' + Math.random(); // this.imgUrl = '/api/Code/getVerify?' + '&t=' +timestmp; },

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