登入界面添加验证码

最新推荐文章于 2024-10-01 11:28:17 发布

别摆了，张同学

最新推荐文章于 2024-10-01 11:28:17 发布

阅读量1.7k

点赞数

分类专栏： JavaWeb 文章标签： java-ee

本文链接：https://blog.csdn.net/qq_51363161/article/details/124667486

版权

JavaWeb 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

这篇博客展示了如何运用Ajax技术实现图形验证码的生成和登录验证过程。在Servlet中，CheckCode.java生成验证码并存储在session中，logcheck.java负责接收用户输入并验证用户名、密码和验证码的正确性。登录界面login.jsp通过Ajax异步更新验证码图像，并在用户提交时发送数据到服务器进行验证。文章内容包括Servlet和JSP的详细代码示例。

摘要由CSDN通过智能技术生成

一、效果展示：

二、代码实现

运用了Ajax的编程技术，实现浏览器和服务器异步交互的的技术，对用户请求的响应不需要刷新整个页面，只需要刷新局部页面即可。

1、servlet

CheckCode .java

主要是生成验证码，并把验证码的正确答案用session存储，在logcheck 中与客户端传来的数据进行匹配。

package servelt;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
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.awt.*;
import java.awt.image.BufferedImage;
import java.io.BufferedInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

@WebServlet("/checkcode")
public class CheckCode extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("image/jpeg");
        HttpSession session =req.getSession();
        int width=60;
        int height=20;
        //设置浏览器不要缓存此图片
        resp.setHeader("Pragma","No-cache");
        resp.setHeader("Cache-Control","no-cache");
        resp.setDateHeader("Expires",0);
        // 创建内存图像并获得其图形上下文
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        // 产生随机验证码
        // 定义验证码的字符表
        String chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        char[] rands = new char[4];
        for (int i = 0; i < 4; i++) {
            int rand = (int) (Math.random() * 36);
            rands[i] = chars.charAt(rand);
        }
        // 产生图像
        // 画背景
        g.setColor(new Color(0xDCDCDC));
        g.fillRect(0, 0, width, height);
        // 随机产生120个干扰点
        for (int i = 0; i < 120; i++) {
            int x = (int) (Math.random() * width);
            int y = (int) (Math.random() * height);
            int red = (int) (Math.random() * 255);
            int green = (int) (Math.random() * 255);
            int blue = (int) (Math.random() * 255);
            g.setColor(new Color(red, green, blue));
            g.drawOval(x, y, 1, 0);
        }
        g.setColor(Color.BLACK);
        g.setFont(new Font(null, Font.ITALIC | Font.BOLD, 18));
        // 在不同的高度上输出验证码的不同字符
        g.drawString("" + rands[0], 1, 17);
        g.drawString("" + rands[1], 16, 15);
        g.drawString("" + rands[2], 31, 18);
        g.drawString("" + rands[3], 46, 16);
        g.dispose();
        // 将图像输出到客户端
        ServletOutputStream sos = resp.getOutputStream();
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(image, "JPEG", baos);
        byte[] buffer = baos.toByteArray();
        resp.setContentLength(buffer.length);
        sos.write(buffer);
        baos.close();
        sos.close();
        // 将验证码放到 session 中
        session.setAttribute("checkCode", new String(rands));
    }
}

logcheck.java

用来接收login.jsp传来和CheckCode .java的数据，判断用户名和密码以及验证码是否正确。（未调用数据库，只是一组固定的数据，用户名：张三，密码：123）

package servelt;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
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;

@WebServlet("/logcheck")

public class logcheck extends HttpServlet {

    public logcheck() {
        super();
    }

    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }


    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String userid = request.getParameter("userid");
        String userpwd = request.getParameter("userpwd");
        String usercheckcode = request.getParameter("checkcode");
        String info = "";
        HttpSession session = request.getSession();
        String servercheckcode = (String) session.getAttribute("checkCode");
        if (!servercheckcode.equalsIgnoreCase(usercheckcode)) {
            info = "验证码不正确，请重新输入";
        } else if ("张三".equals(userid) && "123".equals(userpwd)) {
            info = "登录成功";
        } else {
            info = "用户名或密码不正确";
        }

        request.setAttribute("info", info);
        RequestDispatcher rd = request.getRequestDispatcher("/login.jsp");
        rd.forward(request, response);
    }


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


    public void init() throws ServletException {
        // Put your code here
    }

}

2、jsp

<%@ page pageEncoding="UTF-8"%>
<html>
<head>
    <title>带图形验证码的登录</title>
</head>
<script>
    function refresh(){
        document.getElementById("img1").src="checkcode?a="+Math.random();
    }
</script>
<body>
<form method="post" name="form1">
    用户名
    <input type="text" name="userid" onclick="mes.innerHTML=''"
           value="${param.userid }" />
    <br />
    密码
    <input type="password" name="userpwd" value="${param.userpwd }" />
    <br />
    验证码
    <input type="text" name="checkcode" />
    <img border="0" src="checkcode" />
    <input type="submit" value="换一张"
           onclick="refresh()" />
    <br />
    <input type="submit" value="登录" onclick="form1.action='logcheck'" />
    <input type="reset" value="重置" />
    <div id="mes">
        ${info}
    </div>
</form>
</body>
</html>