后端java——如何为你的网页设置一个验证码

目录

1、工具的准备

2.基本方法

3.实现类

4.实践

HTML文件:

 Java文件1:创建验证码

 Java文件2:验证验证码


本文通过HUTOOL实现:Hutool参考文档Hutool,Java工具集icon-default.png?t=O83Ahttps://hutool.cn/docs/#/

1、工具的准备

如果我们通过hutool来实现这个功能,我们需要提前安装hutool的jar包。

下载地址:Central Repository: cn/hutool/hutool-all/5.8.16 

将下载好的jar包放到eclipse的lib目录,我们project所有的jar包在这里放置:

 至此,工具准备完毕。

2.基本方法

在hutool里,验证码功能位于cn.hutool.captcha包中,核心接口为ICaptcha,此接口定义了以下方法:

  • createCode 创建验证码,实现类需同时生成随机验证码字符串和验证码图片
  • getCode 获取验证码的文字内容
  • verify 验证验证码是否正确,建议忽略大小写
  • write 将验证码写出到目标流中

 其中write方法只有一个OutputStreamICaptcha实现类可以根据这个方法封装写出到文件等方法。

3.实现类

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");

验证码图片会输出的上面代码中定义的路径("d:/line.png"),效果如下: 

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.写出到浏览器输出 (servlet)

html:(在图片src传入)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><img alt="" src="Test"></body>
</html>

servlet(get请求): 

ICaptcha captcha = ...;
captcha.write(response.getOutputStream());
//Servlet的OutputStream记得自行关闭哦!

  注意:servlet自己的output stream要关闭

4.实践

我们来实现一个让用户输入验证码,判断是否正确。

HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">div{background: #e8f2fe;}img{height:25px;width:90px;}input{height:25px;width:120px;text-align: center;}.btn{width:50px;padding:3px;cursor: pointer;background: #ddd;}
</style>
<script type="text/javascript">$(function(){$(".btn").on("click",function(){//获取输入框中的用户输入var input=$(".captcha").val().trim()//切入后端$.ajax({url:"Login", //请求路径type:"get", //请求方式data:{input},success:function(value){alert(value)//刷新location.reload()},error:function(){alert("请求失败!")}})})
})
</script>
</head>
<body><div class="yzm"><h3>登录</h3><input type="text" placeholder="请输入验证码" class="captcha"><img src="Test" alt="" onclick="this.src=this.src+'?'"> <input type="button" value="登录" class="btn" >          </div></body>
</html>

对于验证码的处理,我设置了验证码点击更新的功能:

 <img src="Test" alt="" onclick="this.src=this.src+'?'"> 

  onclick="this.src=this.src+'?'" 属性是一个事件处理器,它定义了当用户点击图片时应该执行的动作。在这个例子中,当图片被点击时,它的 src 属性会被修改为当前的值加上一个问号(get请求申请),使浏览器重新加载图片。

        同时也连接了Login.java SERVLET

<script type="text/javascript">$(function(){$(".btn").on("click",function(){//获取输入框中的用户输入var input=$(".captcha").val().trim()//切入后端$.ajax({url:"Login", //请求路径type:"get", //请求方式data:{input},success:function(value){alert(value)//刷新location.reload()},error:function(){alert("请求失败!")}})})
})
</script>

 Java文件1:创建验证码
// 定义一个处理GET请求的doGet方法  
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  // 创建一个圆形验证码对象,指定宽度为200像素,高度为100像素,字符数为4,干扰线数为20  CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);  // 将验证码的图像数据写入到响应的输出流中,这样客户端就可以接收到并显示验证码图像  captcha.write(response.getOutputStream());  // 获取当前请求的会话(如果会话不存在,则创建一个新的会话)  HttpSession session = request.getSession(true);    // 将会话中的"captchaCode"属性设置为验证码的字符序列,以便后续验证用户输入的验证码是否正确  // 这里captcha.getCode()返回的是验证码图像中显示的字符序列  session.setAttribute("captchaCode", captcha.getCode());    
}

  1. doGet方法:这是一个Servlet中处理HTTP GET请求的方法。当客户端(如浏览器)发送一个GET请求到服务器时,这个方法会被调用。

  2. 创建验证码:通过调用CaptchaUtil.createCircleCaptcha方法创建一个圆形验证码对象。这个方法接受四个参数:验证码图像的宽度、高度、字符数和干扰线数。

  3. 发送验证码到客户端:通过调用captcha.write方法,将验证码的图像数据写入到响应的输出流中。这样,当这个Servlet被访问时,客户端(如浏览器)就可以接收到并显示这个验证码图像。

  4. 获取会话:通过调用request.getSession(true)获取当前请求的会话。如果会话不存在,则创建一个新的会话。这里的true参数表示如果会话不存在,则创建一个新的会话。

  5. 保存验证码到会话:通过调用session.setAttribute方法,将会话中的"captchaCode"属性设置为验证码的字符序列。这样,在后续处理用户提交的表单时,可以从会话中获取这个验证码,并与用户输入的验证码进行比较,以验证用户输入的正确性。

 Java文件2:验证验证码
// 定义一个处理GET请求的doGet方法  
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  // 设置请求和响应的字符编码为UTF-8,以支持中文等多字节字符集  request.setCharacterEncoding("utf-8");  response.setCharacterEncoding("utf-8");  // 从请求中获取名为"Catchcode"的参数值,这通常是用户在表单中输入的值  String input = request.getParameter("captchaCode");  // 获取当前请求的会话对象,如果会话不存在,则创建一个新的会话  HttpSession session = request.getSession();  // 从会话中获取名为"input"的属性值,这通常是在用户提交表单之前设置的正确答案  String answer = (String) session.getAttribute("input");  // 定义一个字符串变量res,用于存储登录结果  String res = "";  // 比较用户输入的值与会话中存储的正确答案  if (input.equals(input)) {  // 如果两者相等,则登录成功  res = "登录成功";  } else {  // 如果不相等,则登录失败  res = "登录失败";  }  // 将登录结果写入到响应的输出流中,这样前端就可以接收到这个结果并显示给用户   response.getWriter().write(res);  
}

 其中:

 // 从会话中获取名为"input"的属性值,这通常是在用户提交表单之前设置的正确答案  String input = (String) session.getAttribute("input");  

(String):这是一个强制类型转换操作。getAttribute方法返回的是一个Object类型的对象,因为会话中的属性值可以是任何类型的对象。在这个例子中我们需要“input“属性存储的是一个字符串类型的值,因此我们需要将它从Object类型强制转换为String类型。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/464269.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1、Qt6 Quick 简介

一、Qt6 Quick 简介 1、Qt Quick简介 Qt Quick 是 Qt 6 中使用的用户界面技术的总称。它是在 Qt 4 中引入的&#xff0c;现在在 Qt 6 中进行了扩展。Qt Quick 本身是几种技术的集合&#xff1a; QML——用户界面标记语言JavaScript - 动态脚本语言Qt C - 高度可移植的增强型…

微服务系列二:跨微服务请求优化,注册中心+OpenFeign

目录 前言 一、纯 RestTemplate 方案存在的缺陷 二、注册中心模式介绍 三、注册中心技术&#xff1a;Nacos 3.1 Docker部署Nacos 3.2 服务注册 3.3 服务发现 四、代码优化&#xff1a;OpenFeign工具 4.1 OpenFeign快速入门 4.2 连接池的必要性 4.3 抽取服务、最佳实…

andrular输入框input监听值传递

效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html <button mat-button (click)“openDialog()”>Open dialog step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts import {Component, inject}…

像`npm i`作为`npm install`的简写一样,使用`pdm i`作为`pdm install`的简写

只需安装插件pdm-plugin-i即可&#xff1a; pdm plugin add pdm-plugin-i 然后就可以愉快地pdm i了&#xff0c;例如&#xff1a; git clone https://github.com/waketzheng/fast-dev-cli cd fast-dev-cli python -m pip install --user pipx pipx install pdm pdm plugin a…

qt QTabWidget详解

1、概述 QTabWidget是Qt框架中的一个控件&#xff0c;它提供了一个标签页式的界面&#xff0c;允许用户在不同的页面&#xff08;或称为标签&#xff09;之间切换。每个页面都可以包含不同的内容&#xff0c;如文本、图像、按钮或其他小部件。QTabWidget非常适合用于创建具有多…

关于wordpress instagram feed 插件 (现更名为Smash Balloon Social Photo Feed)

插件地址&#xff1a; Smash Balloon Social Photo Feed – Easy Social Feeds Plugin – WordPress 插件 | WordPress.org China 简体中文 安装后&#xff0c;配置教程&#xff1a; Setting up the Instagram Feed Pro WordPress Plugin - Smash Balloon 从这里面开始看就…

初始JavaEE篇——多线程(5):生产者-消费者模型、阻塞队列

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 文章目录 阻塞队列生产者—消费者模型生产者—消费者模型的优势&#xff1a;生产者—消费者模型的劣势&#xff1a; Java标准库中的阻…

用ChatGPT提升工作效率:从理论到实际应用

伴人工智能技术的迅速演进&#xff0c;像ChatGPT这类语言模型已成为提升工作效率的关键工具。这类模型不仅具备处理海量数据的能力&#xff0c;还能自动化许多日常任务&#xff0c;从而提高决策的准确性。本文将深入探讨如何在工作中利用ChatGPT等AI工具提升效率&#xff0c;涵…

如何修改网络ip地址:一步步指南‌

在当今这个数字化时代&#xff0c;网络已成为我们日常生活与工作中不可或缺的一部分。无论是浏览网页、在线办公还是享受流媒体服务&#xff0c;稳定的网络连接和适当的IP地址管理都是确保良好体验的关键。然而&#xff0c;出于隐私保护、绕过地理限制或测试网络环境等需要&…

ENSP (虚拟路由冗余协议)VRRP配置

VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;是一种用于提高网络可用性和可靠性的协议。它通过在多个路由器之间共享一个虚拟IP地址&#xff0c;确保即使一台路由器发生故障&#xff0c;网络依然能够正常运行&#xff0c;防止…

SpringCloud Alibaba-05 Seata分布式事务处理

一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题。但是关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 1.四大模式&#xff1a; Seata AT模式(主…

非线性数据结构之图

一、有向图&#xff08;Directed Graph&#xff09; 1. 定义 有向图是一个由顶点&#xff08;节点&#xff09;和有方向的边&#xff08;弧&#xff09;组成的图。在有向图中&#xff0c;每条边都有一个起点和一个终点&#xff0c;表示从一个顶点到另一个顶点的关系。 2. 特…

大数据之Hadoop集群

Hadoop集群介绍&#xff1f;Hadoop集群的优缺点及应用场景&#xff1f;Hadoop集群搭建&#xff1f;Hadoop架构&#xff1f; Hadoop集群介绍 Hadoop集群是由多台计算机&#xff08;节点&#xff09;组成的一个分布式计算系统&#xff0c;主要用于处理大规模的数据集。以下是对Ha…

云原生+AI核心技术&最佳实践

以下内容是我在陕西理工大学2023级人工智能专业和网络专业的演讲内容&#xff0c;分享给大家。 各位老师、同学们&#xff0c;大家好啊&#xff01;能在这里跟大家一起聊聊咱们计算机专业那些事儿&#xff0c;我真的觉得超级兴奋&#xff01; 首先&#xff0c;自我介绍一下&am…

数字信号处理Python示例(5)使用实指数函数仿真PN结二极管的正向特性

文章目录 前言一、二极管的电流-电压关系——Shockley方程二、PN结二极管正向特性的Python仿真三、仿真结果分析写在后面的话 前言 使用Python代码仿真了描述二极管的电流-电压关系的Shockley方程&#xff0c;对仿真结果进行了分析&#xff0c;说明在正向偏置区域&#xff0c;…

真·香!深度体验 zCloud 数据库云管平台 -- DBA日常管理篇

点击蓝字 关注我们 zCloud 作为一款业界领先的数据库云管平台&#xff0c;通过云化自治的部署能力、智能巡检和诊断能力、知识即代码的沉淀能力&#xff0c;为DBA的日常管理工作带来了革新式的简化与优化。经过一周的深度体验&#xff0c;今天笔者与您深入探讨 zCloud 在数据库…

ICPC区域赛成都站【赛后回顾+总结】

传送门 前言赛后总结赛后回顾赛后感悟 前言 首先&#xff0c;这是本人本赛季第一场XCPC区域赛&#xff0c;也是本人算竞生涯中第一场XCPC区域赛&#xff08;之前只打过邀请赛和省赛&#xff09;。 赛后总结 然后赛后总结一下&#xff1a;我队天崩开局&#xff0c;我队出师不利…

Linux和,FreeRTOS 任务调度原理,r0-r15寄存器,以及移植freertos(一)

目录、 1、r0-r15寄存器&#xff0c;保护现场&#xff0c;任务切换的原理 2、freertos移植 3、freertos的任务管理。 一、前言 写这篇文章的目的&#xff0c;是之前面试官&#xff0c;刚好问到我&#xff0c;移植FreeRTOS 到mcu&#xff0c;需要做哪些步骤&#xff0c;当时回…

如果 MySQL 主库出现了问题,从库该何去何从呢?

🚀 博主介绍:大家好,我是无休居士!一枚任职于一线Top3互联网大厂的Java开发工程师! 🚀 🌟 在这里,你将找到通往Java技术大门的钥匙。作为一个爱敲代码技术人,我不仅热衷于探索一些框架源码和算法技巧奥秘,还乐于分享这些宝贵的知识和经验。 💡 无论你是刚刚踏…

基于Matlab 模拟停车位管理系统【源码 GUI】

系统对进入停车位的车辆进行车牌识别&#xff0c;将识别出来的车牌号显示出来&#xff1b;然后对车主进行人脸识别&#xff0c;框出车主照片的人脸部分作为车主信息的标记&#xff0c;记录在系统库中。车辆在库期间&#xff0c;系统使用者可以随意查看车辆与车主信息的获取过程…