目录
一、准备环境
首先,进入下载地址: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文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background:rgb(210,222,232);
margin: 100px auto;
width:400px;
height:150px;
text-align: center;
}
h2{
padding-top: 10px;
font-family:simsun;
}
img{
height:30px;
width:100px;
}
input{
padding-top:10px;
font-family:simsun;
text-align: center;
}
.btn{
width:50px;
padding:5px 0;
cursor: pointer;
background: rgb(242,245,248);
border:none;
}
</style>
</head>
<body>
<div class="container">
<h2>登录</h2>
<input type="text" class="code" placeholder="请输入验证码">
<img src="#" alt="验证码">
<input type="button" value="登录" class="btn" >
</div>
</body>
</html>
得到一个简易的登录界面:
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文件的路径
<img src="../CodeCSDN" alt="验证码">
在前端得到:
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等动作属性,懂得这个道理后,可以直接在元素身上绑定实现点击更新验证码
<img src="../CodeCSDN" alt="验证码" onclick="this.src=this.src+'?'">
六、完整Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background:rgb(210,222,232);
margin: 100px auto;
width:400px;
height:150px;
text-align: center;
}
h2{
padding-top: 10px;
font-family:simsun;
}
img{
height:30px;
width:100px;
}
input{
padding-top:10px;
font-family:simsun;
text-align: center;
}
.btn{
width:50px;
padding:5px 0;
cursor: pointer;
background: rgb(242,245,248);
border:none;
}
</style>
<script src="../jQuery/jq.js"></script> <!-- 导入jQuery文件,不是路径自行更改 -->
<script>
$(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("请求失败!")
}
})
})
})
</script>
</head>
<body>
<div class="container">
<h2>登录</h2>
<input type="text" class="code" placeholder="请输入验证码">
<img src="../CodeCSDN" alt="验证码" onclick="this.src=this.src+'?'">
<input type="button" value="登录" class="btn" >
</div>
</body>
</html>
以上即是前、后端实现验证码全过程。
标签:搞定,lineCaptcha,验证码,write,captcha,session,input,一招 From: https://blog.csdn.net/m0_74977981/article/details/143429284