简单的验证码实现

最新推荐文章于 2021-05-18 20:23:08 发布

我是小郭啊

最新推荐文章于 2021-05-18 20:23:08 发布

阅读量210

点赞数

分类专栏： JavaWeb学习笔记文章标签： servlet java jsp

本文链接：https://blog.csdn.net/qq_41193133/article/details/104385717

版权

JavaWeb学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

编写image.jsp，由该jsp页面产生验证码图片，如下所示：

<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %>
<%@ page contentType="image/jpeg" language="java" %>
<%!
    //获取随机颜色
    public Color getColor() {
        Random random = new Random();
        int r = random.nextInt(256);
        int g = random.nextInt(256);
        int b = random.nextInt(256);
        return new Color(r, g, b);
    }
    //获取随机字符串  这里仅仅是获取4位随机整数
    public String getString() {
        Random random = new Random();
        return String.valueOf((random.nextInt(9000) + 1000));
    }
%>
<%
    //禁止缓存
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Expires", "0");   //缓存0秒后过期
    //绘制验证码
    BufferedImage image = new BufferedImage(80, 30, BufferedImage.TYPE_INT_RGB);
    //获得画笔
    Graphics2D g2d = (Graphics2D) image.getGraphics();
    //填充背景
    g2d.setFont(new Font("seif", Font.BOLD, 20));
    g2d.fillRect(0, 0, 80, 30);
    //绘制随机线条
    Random random = new Random();
    for (int i = 0; i < 60; i++) {
        //起始坐标
        int b_x = random.nextInt(80);
        int b_y = random.nextInt(30);
        //终点坐标
        int e_x = random.nextInt(b_x + 20);
        int e_y = random.nextInt(b_y + 20);
        //设置画笔颜色
        g2d.setColor(getColor());
        //绘制线条
        g2d.drawLine(b_x, b_y, e_x, e_y);
    }
    String checkCode = getString();
    StringBuffer sb = new StringBuffer();
    for (int i = 0; i < checkCode.length(); i++) {
        sb.append(checkCode.charAt(i) + " ");   //拼接验证码的每一位，空格分开;
    }
    g2d.setColor(Color.black);
    g2d.drawString(sb.toString(), 13, 25);  //绘制验证码
    //保存验证码 到 session中
    session.setAttribute("checkCode", checkCode);
    //产生真实图片
    ImageIO.write(image, "jpeg", response.getOutputStream());
    //关闭
    out.clear();
    out = pageContext.pushBody();
%>

在前端页面通过<img />标签的src属性请求该jsp页面（本质上是请求jsp编译后的servlet，即

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>验证码Demo</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //点击验证码刷新
        function reloadImg() {
            // 强制刷新 ，如果不携带参数，则服务器会认为请求过相同文件不予更新
            $("img").attr("src", "image.jsp?t=" + (new Date().getTime()));

        }
        //验证
        function checkCode() {
            let checkCode = $("#checkcodeId").val();
            if (checkCode.length != 0) {
                $.ajax({
                    url: "CheckCodeServlet",
                    type: "post",
                    data: "checkCode=" + checkCode,
                    dataType: "text",
                    success: function (data, statusCode) {
                        if (data == "error") {
                            $("#tip").text("验证失败！").addClass("warnning");
                        }
                        if (data == "success") {
                            $("#tip").text("验证通过！").addClass("success");
                        }
                    },
                    error: function () {
                       alert("服务器异常！");
                    }
                });
            }
        }
    </script>
    <style>
        .warnning {
            color: red;
        }
        .success {
            color: green;
        }
    </style>
</head>
<body>
验证码：<input type="text" name="checkcode" id="checkcodeId" onblur="checkCode()" size="4"/>
<a href="javascript:reloadImg()"><img src="image.jsp" alt="验证码"></a><br/>
<span id="tip"></span>
</body>
</html>

要注意的是：要想实现点击图片刷新，在重新绑定img的src属性时需要携带一个参数（随机数字或者时间都可以），该参数不影响请求。

$("img").attr("src", "image.jsp?t=" + (new Date().getTime()));

接着，客户端提交验证码到相应的Servlet去校验
比如这里是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 javax.servlet.http.HttpSession;
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 {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Content-Type","text/html;charset=UTF-8");
        //获取客户端提交的验证码
        String checkCode = request.getParameter("checkCode");
        
        HttpSession session =request.getSession();
        PrintWriter writer = response.getWriter();
        //校验是否和保存在session中的验证码一致
        if (checkCode.equals(session.getAttribute("checkCode"))) {
            writer.write("success");
        } else {
            writer.write("error");
        }
        //从session中移除该验证码
        session.removeAttribute("checkCode");
        writer.flush();
        writer.close();
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

最终效果如下图所示：
在这里插入图片描述

我是小郭啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的验证码实现

编写image.jsp，由该jsp页面产生验证码图片，如下所示：<%@ page import="java.awt.*" %><%@ page import="java.util.Random" %><%@ page import="java.awt.image.BufferedImage" %><%@ page import="javax.ima...
复制链接

扫一扫