Servlet验证码功能

最新推荐文章于 2024-10-07 14:12:46 发布

Switchvov

最新推荐文章于 2024-10-07 14:12:46 发布

阅读量1k

点赞数

分类专栏： Servlet 文章标签： servlet 验证码

如需转载，请联系本人获取许可且必须注明出处，详见联系方式。

本文链接：https://blog.csdn.net/q547550831/article/details/52782393

版权

Servlet 专栏收录该内容

22 篇文章

订阅专栏

Servlet验证码功能

创建验证码生成Servlet

package com.pc.verifycode;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class VerifyServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 使用java图形界面技术绘制一张图片
        int charNum = 4;
        int width = 20 * 4;
        int height = 28;

        // 1. 创建一张内存图片
        BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        // 2.获得绘图对象
        Graphics graphics = bufferedImage.getGraphics();

        // 3、绘制背景颜色
        graphics.setColor(Color.YELLOW);
        graphics.fillRect(0, 0, width, height);

        // 4、绘制图片边框
        graphics.setColor(Color.GRAY);
        graphics.drawRect(0, 0, width - 1, height - 1);

        // 5、输出验证码内容
        graphics.setColor(Color.RED);
        graphics.setFont(new Font("宋体", Font.BOLD, 22));

        // 随机输出4个字符
        String s = "ABCDEFGHGKLMNPQRSTUVWXYZ23456789";
        Random random = new Random();

        // session中要用到
        String msg = "";

        int x = 5;
        for (int i = 0; i < charNum; i++) {
            int index = random.nextInt(32);
            String content = String.valueOf(s.charAt(index));

            msg += content;
            graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));
            graphics.drawString(content, x, 22);
            x += 20;
        }

        // 6、绘制干扰线
        graphics.setColor(Color.GRAY);
        for (int i = 0; i < 5; i++) {
            int x1 = random.nextInt(width);
            int x2 = random.nextInt(width);

            int y1 = random.nextInt(height);
            int y2 = random.nextInt(height);
            graphics.drawLine(x1, y1, x2, y2);
        }

        // 释放资源
        graphics.dispose();

        // 图片输出 ImageIO
        ImageIO.write(bufferedImage, "jpg", response.getOutputStream());

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

修改web.xml

<servlet>
    <servlet-name>VerifyServlet</servlet-name>
    <servlet-class>com.pc.verifycode.VerifyServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>VerifyServlet</servlet-name>
    <url-pattern>/VerifyServlet</url-pattern>
</servlet-mapping>

创建登录jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8">
        <title>Login</title>
    </head>
    <body>
        <%-- 演示验证码功能 --%>
        <form action="#" method="post">
                用户名：<input type="text" name="username" /><br /><br />
                密码：<input type="password" name="password" /><br /><br />
                验证码：<input type="text" name="verifyCode" />
                <img src="${pageContext.servletContext.contextPath }/VerifyServlet" id="verifyImg"><br />
                <input type="submit" value="登录" />
        </form>
    </body>
</html>

head标签后加入js实现点击刷新验证码

    <!-- 引入jquery库 -->
    <script type="text/javascript" src="${pageContext.servletContext.contextPath }/resource/js/jquery-1.11.0.js"></script>
    <!-- 写一个验证码点击刷新功能 -->
    <script type="text/javascript">
        $(function() {
            $("#verifyImg").click(function() {
                $(this).prop("src", "${pageContext.servletContext.contextPath }/VerifyServlet?t=" + new Date().getTime());
            });
        });
    </script>