本文实例为大家分享了springboot+vue实现验证码功能的具体代码，供大家参考，具体内容如下
1.工具类 直接用不用改
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
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层
要跨域！！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
@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方式：
页面部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
< template > < div > < el-row :gutter = "0" > < el-form ref = "elForm" :model = "formData" :rules = "rules" size = "medium" label-width = "83px" label-position = "left" > < img :src = "imgUrl" alt = "更换验证码" @ click = "getVerify(this)" /> < el-col :span = "6" > < el-form-item label = "验证码" prop = "code" > < el-input v-model = "formData.code" placeholder = "请输入验证码" clearable :style = "{ width: '100%' }" > </ 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方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
data() { return { imgUrl: "/api/Code/getVerify" ,
formData: { code: undefined, }, rules: { code: [ { required: true , message: "请输入验证码" , trigger: "blur" , }, ], }, }; }, |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 = "/api/Code/getVerify?" + Math.random(); this .imgUrl = "/api/Code/getVerify?" + Math.random(); }, resetForm() { this .$refs[ "elForm" ].resetFields(); }, }, |
原生js方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
function getVerify(obj) { // obj.src = "/api/Code/getVerify" obj.src = "/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直接绑定随机数
|
1 |
imgUrl: "/api/Code/getVerify?" + Math.random(), |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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 = "/api/Code/getVerify?" + Math.random(); this .imgUrl = "/api/Code/getVerify?" + Math.random(); // this.imgUrl = "/api/Code/getVerify?" + "&t=" +timestmp; }, |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
原文链接：https://blog.csdn.net/weixin_47385334/article/details/113601305
查看更多关于springboot+vue实现验证码功能的详细内容...