javaWeb--验证码的实现

效果展示:
在这里插入图片描述

代码展示:

项目结构:
在这里插入图片描述
img.jsp:
    生成一个验证码的图片,然后把正确的值存放再session中,方便以后验证对比

<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %>
<%@ page import="static java.awt.Font.BOLD" %>
<%@ page contentType="image/jpeg;charset=UTF-8" language="java" %>
<%!
    //随机生成颜色
    public Color getcolor(){
        Random ran=new Random();
        int r=ran.nextInt(256);
        int g=ran.nextInt(256);
        int b=ran.nextInt(256);
        return new Color( r,g,b );       //rgb每一个的取值是0-255
    }
    //产生随机数字
    public String getnu(){
        //0-8999   1000-9999
        int ran =(int)(Math.random()*9000)+1000;
        return String.valueOf( ran );
    }
%>
<%
    //禁止缓存
    response.setHeader("pragma","no-cache");
    response.setHeader( "Cache-Control","no-cache" );
    response.setHeader( "Expires","0" );


    //绘制验证码
    BufferedImage bufferedImage=new BufferedImage( 80,30, BufferedImage.TYPE_INT_RGB);
    //画笔
    Graphics graphics=bufferedImage.getGraphics();
    graphics.fillRect( 0,0,80,30 );
    //绘制干扰线条
    for (int i=0;i<60;i++){
        Random ran=new Random(  );
        int xBegin=ran.nextInt(80);        //产生小于80的随机整数
        int yBegin=ran.nextInt(30);
        int xEnd=ran.nextInt(xBegin+10);
        int yEnd=ran.nextInt(yBegin+10);

        graphics.setColor( getcolor() );
        //绘制线条
        graphics.drawLine( xBegin,yBegin,xEnd,yEnd );
    }
    graphics.setFont( new Font( "seif",BOLD,20 ) );
    //绘制验证码
    graphics.setColor( Color.black  );
    String checkCode=getnu();
    StringBuffer sb=new StringBuffer(  );
    for(int i=0;i<checkCode.length();i++){
        sb.append(  checkCode.charAt( i )+"");          //验证码的每一个数字

    }
    //绘制验证码
    graphics.drawString( sb.toString(),15,20 );
    //将验证码真实值保存在session中,供使用时比较真实性
    session.setAttribute( "CKECKCODE",checkCode );
    //真实的产生图片
    ImageIO.write(bufferedImage,"jpeg",response.getOutputStream());


    //清理操作:
    out.clear();
    out=pageContext.pushBody();         //<input type="image" src="xxx">
%>

index.jsp:
    前端展示页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <script type="text/javascript" src="jquery-3.5.0.js">
    </script>
    <script type="text/javascript">
      function reloadCheckImg(){
          // 强制刷新
          $("img").attr("src","img.jsp?t="+(new Date().getTime()));
      }
        $(document).ready(function () {
          $("#checkcodeId").blur(function () {
              var $checkcode=$("#checkcodeId").val();
              //校验:文本框输入的值发送到服务端
              //服务端:  获取文本框的值,和真实验证码图片的值对比,并返回验证结果
              $.post(
                  "checkCodeServlet",
                  "checkcode="+$checkcode,
                  function (result) {//图片地址
                      var resultHtml=$("<img src='"+result+"'height='15'width='15px'>")
                      $("#tip").html();
                  }
              )
          })
      })
    </script>
    <title>验证码</title>
  </head>
  <%--验证码--%>
  验证码
  <input type="text" name="checkcode" id="checkcodeId" size="4">
  <a href="javascript:reloadCheckImg();">
      <img src="img.jsp" />
  </a>
  <span id="tip"></span>
  </body>
</html>

checkCodeServlet.java:
    实现验证码的比较并且返回结果

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/checkCodeServlet")
public class checkCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String resultTip="imags/error.jpg";
        //用户输入的验证码的值
        String checkcodeClient=request.getParameter( "checkcode" );
        //真实的验证码值
        String checkcodeServer=(String) request.getSession().getAttribute("CKECKCODE");
        if(checkcodeServer.equals( checkcodeClient )){
            resultTip= "imags/right.jpg";
        }
        response.setContentType( "text/html;charset=UFT-8" );
        PrintWriter writer=response.getWriter();
        writer.write( resultTip );
        writer.flush();     //刷新
        writer.close();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost( request,response );
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现图片验证码主要需要以下几个步骤: 1. 生成随机字符串:使用 Java 的随机数生成器生成指定长度的随机字符串,可以使用 UUID、SecureRandom等类实现。 2. 将随机字符串绘制到图片上:使用 Java 的 Graphics2D 类将随机字符串绘制到一个 BufferedImage 对象上,可以设置字体、字号、颜色等参数。 3. 添加干扰元素:为了防止机器识别验证码,需要在图片上添加干扰元素,例如噪点、曲线等。 4. 输出图片:使用 Java 的 ImageIO 类将 BufferedImage 对象输出为图片文件或者直接输出到响应流中。 以下是一个简单的示例代码: ```java public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置响应类型为图片 response.setContentType("image/jpeg"); // 生成随机字符串 String code = generateCode(); // 将随机字符串绘制到图片上 BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_RGB); Graphics2D g = image.createGraphics(); g.setColor(Color.WHITE); g.fillRect(0, 0, 100, 30); g.setColor(Color.BLACK); g.setFont(new Font("Arial", Font.BOLD, 20)); g.drawString(code, 10, 20); // 添加干扰元素 Random random = new Random(); for (int i = 0; i < 20; i++) { int x = random.nextInt(100); int y = random.nextInt(30); g.drawOval(x, y, 1, 1); } // 输出图片 ImageIO.write(image, "JPEG", response.getOutputStream()); } private String generateCode() { StringBuilder builder = new StringBuilder(); Random random = new Random(); for (int i = 0; i < 6; i++) { int code = random.nextInt(10) + 48; // ASCII码值范围:48-57 builder.append((char) code); } return builder.toString(); } ``` 在 Servlet 中调用 doGet 方法即可生成图片验证码,可以在 HTML 表单中添加一个图片标签,设置 src 属性为 Servlet 的 URL,然后用户在提交表单时同时提交验证码,进行验证

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值