一招帮你搞定验证码设置
目录
一、准备环境
编辑 二、配置环境
三、基础方法
四、验证码的一些常用类别
1.LineCaptcha线段干扰的验证码（Java）
2.CircleCaptcha圆圈干扰的验证码（Java）
3.ShearCaptcha扭曲干扰验证码
4.写出到浏览器输出
5.自定义验证码 CodeGenerator
五、通过实例来简述过程
1.一个简易html文件
2.创建生成验证码图片的Java文件
① 定义图形验证码的长、宽、验证码字符数、干扰线宽度
②将得到的验证码图片生成到浏览器
③存储生成验证码图片内的值
完整版本生成验证码图片
3.将图片放入前端
4.验证码登录判断
5.html中的jQuery部分
6.最后完善
六、完整Html代码
一、准备环境
首先，进入下载地址：Central Repository: cn/hutool/hutool-all/5.8.16
下载jar包，（选择如下标蓝的进行下载）：
二、配置环境
将下载好的jar包放到eclipse的lib目录 (这里是eclipse软件中存放jar包的目录)：
【WebContent-->WEB-INF-->lib】
三、基础方法
（验证码实现的核心就是以下四条方法）
- createCode 创建验证码，实现类需同时生成随机验证码字符串和验证码图片
- getCode 获取验证码的文字内容
- verify 验证验证码是否正确，建议忽略大小写
- write 将验证码写出到目标流中
四、验证码的一些常用类别
1.LineCaptcha线段干扰的验证码（Java）
//定义图形验证码的长和宽
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
//图形验证码写出，可以写出到文件，也可以写出到流
lineCaptcha.write("d:/line.png");
//输出code
Console.log(lineCaptcha.getCode());
//验证图形验证码的有效性，返回boolean值
lineCaptcha.verify("1234");
//重新生成验证码
lineCaptcha.createCode();
lineCaptcha.write("d:/line.png");
//新的验证码
Console.log(lineCaptcha.getCode());
//验证图形验证码的有效性，返回boolean值
lineCaptcha.verify("1234");2.CircleCaptcha圆圈干扰的验证码（Java）
//定义图形验证码的长、宽、验证码字符数、干扰元素个数
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
//CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);
//图形验证码写出，可以写出到文件，也可以写出到流
captcha.write("d:/circle.png");
//验证图形验证码的有效性，返回boolean值
captcha.verify("1234");3.ShearCaptcha扭曲干扰验证码
//定义图形验证码的长、宽、验证码字符数、干扰线宽度
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
//ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);
//图形验证码写出，可以写出到文件，也可以写出到流
captcha.write("d:/shear.png");
//验证图形验证码的有效性，返回boolean值
captcha.verify("1234");4.写出到浏览器输出
ICaptcha captcha = ...;
captcha.write(response.getOutputStream());
//Servlet的OutputStream记得自行关闭！5.自定义验证码 CodeGenerator
自定义纯数字的验证码（随机4位数字，可重复）
RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
lineCaptcha.setGenerator(randomGenerator);
// 重新生成code
lineCaptcha.createCode();自定义验证码内容为四则运算方式
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 45, 4, 4);
captcha.setGenerator(new MathGenerator());
// 重新生成code
captcha.createCode();五、通过实例来简述过程
1.一个简易html文件
Document
登录
得到一个简易的登录界面：
2.创建生成验证码图片的Java文件
（这里给出一个扭曲干扰验证码的例子，并且采用浏览器获得的途径）
① 定义图形验证码的长、宽、验证码字符数、干扰线宽度
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);②将得到的验证码图片生成到浏览器
captcha.write(response.getOutputStream());③存储生成验证码图片内的值
（这里需要借用session存储；不了解session的可以先去看一眼这篇文章-->会话管理-帮你搞懂cookie&session（Java版本）-CSDN博客）
//创建session存储
HttpSession session=request.getSession();
//用getCode()方法获取图片验证码的值并存入session
session.setAttribute("answer",captcha.getCode());完整版本生成验证码图片
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//定义图形验证码的长、宽、验证码字符数、干扰线宽度
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
//创建session存储
HttpSession session=request.getSession();
//用getCode()方法获取图片验证码的值并存入session
session.setAttribute("answer",captcha.getCode());
//将得到的验证码图片生成到浏览器
captcha.write(response.getOutputStream());
}3.将图片放入前端
更改html文件中img的src部分，使之填写2.步骤Java文件的路径
在前端得到：
4.验证码登录判断
注意这里：
此处获取的session值是Object类型的，但是需要的是String类型，所以需要(String)强转一下：
//强转一下
String answer= (String) session.getAttribute("answer");
完整版本：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//防乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//获取数据
String input=request.getParameter("input");
//获取session中正确的验证码值
HttpSession session=request.getSession();
//强转一下
String answer= (String) session.getAttribute("answer");
String res="";
if(input.equals(answer)) {
res="成功！";
}else {
res="失败！";
}
//后端给前端返回数据
response.getWriter().write(res);
}5.html中的jQuery部分
$(function(){
$(".btn").on("click",function(){
//获取输入框中的用户输入
var input=$(".code").val().trim()
//切入后端
$.ajax({
url:"../CodeAnswerCSDN", //请求路径
type:"get", //请求方式
data:{
input
},
success:function(value){
alert(value)
//刷新
location.reload()
},
error:function(){
alert("请求失败！")
}
})
})
})
6.最后完善
（点击图片刷新功能）
元素身上可以绑属性，并不限于onclick等动作属性，懂得这个道理后，可以直接在元素身上绑定实现点击更新验证码
六、完整Html代码
Document
登录
以上即是前、后端实现验证码全过程。