最近在做一个项目,就是先完成登陆的一个验证码简单验证,一开始使用了js前端完成,但是项目不允许,我去!很纳闷前端生成验证码,进行验证也能完成功能呀,并且很简单,只要一个插件几行代码的事情,非要后端使用session验证,尴尬了,显示用前端完成的代码先上。
纯前端完成验证码的生成和获取:
<canvas width="240" height="90" id="captcha2"></canvas>
</body>
<script src="./captcha.js"></script>
<script>
/*不传值,统一走默认值*/
let captcha1 = new Captcha();
captcha1.draw(document.querySelector('#captcha1'), r => {
console.log(r, '验证码1');
});
/*传值,参数配置值,选择性配置*/
let captcha2 = new Captcha({
lineWidth: 1, //线条宽度
lineNum: 6, //线条数量
dotR: 2, //点的半径
dotNum: 25, //点的数量
preGroundColor: [10, 80], //前景色区间
backGroundColor: [150, 250], //背景色区间
fontSize: 30, //字体大小
fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'], //字体类型
fontStyle: 'stroke', //字体绘制方法,有fill和stroke
content: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示', //验证码内容
length: 6 //验证码长度
}); // 传值
captcha2.draw(document.querySelector('#captcha2'), r => {---------r就是我们获取的验证码的值,直接获取r就可以直接验证
console.log(r, '验证码2');
});
</script>
</html>
不让使用前端代码,那就只能使用后端生成喽,从网上借鉴了大神,完成了前后端分离session存储的验证码的生成以及获取和验证
1、先上html和js文件
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!-- Mirrored from www.zi-han.net/theme/hplus/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:23 GMT -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台登录</title>
<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
<script>if(window.top !== window.self){ window.top.location = window.location;}</script>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>