javaweb 图片验证码实现登录功能

小谭の努力

已于 2024-02-02 18:56:27 修改

阅读量440

点赞数 8

于 2024-01-31 23:24:52 首次发布

本文链接：https://blog.csdn.net/weixin_57689217/article/details/135956131

版权

java 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javaweb

5 篇文章 0 订阅

订阅专栏

图片验证码

1 篇文章 0 订阅

订阅专栏

展示

在这里插入图片描述

项目结构

在这里插入图片描述

jar包

主要用到是第一个和第二个
在这里插入图片描述

CodeServlet类

验证码请求（会创建二维码并保存）

package com.tmg.code;
import javax.imageio.ImageIO;
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.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/code.do")
public class CodeServlet extends HttpServlet {
    public static final int WIDTH = 110;
    public static final int HEIGHT = 42;
    public static final int FONT_SIZE = 25;
//    验证码设置为数字，字母
    public static final String CHARS = "1234567890abc";
    public static final Color[] COLORS = {Color.PINK,Color.YELLOW,Color.MAGENTA,Color.GREEN,Color.BLACK,Color.RED};

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        doGet(req,resp);
//        System.out.println("-------+++--------");
        String code = req.getParameter("doPost-》code");
//        System.out.println(code);
        //获得Session中的验证码
//        String code2 = (String) req.getSession().getAttribute("code");
//        if(code2 == null || !code2.equals(code)){
            //验证码错误
//            resp.getWriter().print("n");
//
//            return;
//        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("----------------");
        //创建图片对象
        BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_ARGB);
        //获得绘图对象
        Graphics graphics = image.getGraphics();
        //设置背景色
        graphics.setColor(Color.GRAY);
        //填充长方形
        graphics.fillRect(0,0,WIDTH,HEIGHT);
        //设置字体
        graphics.setFont(new Font("宋体", Font.ITALIC,FONT_SIZE));
        Random random = new Random();
        StringBuilder stringBuilder = new StringBuilder();
        //随机生成4个文字，绘制到图片上
        for (int i = 0; i < 4; i++) {
            char c = CHARS.charAt(random.nextInt(CHARS.length()));
            stringBuilder.append(c);
            //颜色随机
            graphics.setColor(COLORS[random.nextInt(COLORS.length)]);
            //绘制字母
            graphics.drawString(String.valueOf(c),FONT_SIZE * i + 10 ,FONT_SIZE);
        }
        //保存验证码到Session中
        req.getSession().setAttribute("code",stringBuilder.toString());
        //设置不缓存图片的响应头
        resp.addHeader("Cache-Control","no-cache");
        //将图片通过输出流发给浏览器
        ImageIO.write(image,"PNG",resp.getOutputStream());
    }
}

login.jsp

页面显示二维码，设置点击事件刷新验证码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>爱购登录页面</title>
		<link rel="icon" type="image/x-icon" href="img/title-icon.jpg"/>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body>
		<!--登录/注册的头部-->
		<div class="lr-top w1230">
			<a href="index.jsp"><img src="img/logo.png" width="150px" height="60px"/></a>
			<div class="top-link">
				<a href="#"class="top-link1"></a>
				<a href="#" class="top-link2"></a>
				<a href="#" class="top-link3"></a>
			</div>
		</div>
		<!--登录/注册的中部-->
		<div class="lr-main">
			<div class="w1230">
				<div class="reg-div">
					<h3 class="login-title">登录爱购</h3>
					<p class="go-reg">还没有爱购账号？<a href="register.html">在此注册</a></p>
					<form action="/user.do?m=adduser" method="post">
<%--						<input type="hidden" name="m" value="adduser">--%>
						<p><span class="icon-account"></span><input type="text" name="username" placeholder="请输入已注册的账号"/></p>
						<p><span class="icon-pwd"></span><input type="password" name="password" placeholder="请输入密码"/></p>
						<p class="clear-float"><input type="text" placeholder="验证码" name="code" class="code"/>
							<img src="/code.do" id="code" width="110px" onclick="changeCode()" height="42px" class="code-img"/>
<%--							<img src="img/code.jpg" width="110px" height="42px" class="code-img"/>--%>
						</p>
<%--						<p><input type="checkbox" class="chk-login"/><span>7天免登录</span></p>--%>
						<input type="submit" value="登录" class="sum-btn" />
					</form>
				</div>
			</div>	
		</div>
		<!--登录/注册的底部-->
		<div class="lr-footer footer">
			<p class="w1230">
				<a href="#">关于爱购</a>
				<a href="#">合作伙伴</a>
				<a href="#">营销中心</a>
				<a href="#">廉正举报</a>
				<a href="#">联系客服</a>
				<a href="#">开发平台</a>
				<a href="#">诚征英才</a>
				<a href="#">联系我们</a>
				<a href="#">网站地图</a>
				<a href="#">知识产权</a><span>|</span>
				<span>&copy;2018-2020 igo.com 版权所有</span>
			</p>
		</div>
	</body>
<script>
	function changeCode() {
		document.getElementById("code").src = "/code.do?x="+Math.random();
	}
</script>
</html>