web前端页面账号密码登录加验证码生成和校验功能

最新推荐文章于 2024-06-16 23:04:02 发布

樂小伍

最新推荐文章于 2024-06-16 23:04:02 发布

阅读量4.8k

点赞数 1

分类专栏： JavaWeb 文章标签：验证码前端用户登录

本文链接：https://blog.csdn.net/lexiaowu/article/details/100902011

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参考 hutool 工具：https://www.hutool.club

使用需要下载 jar 包放入工程下的 lib 中：
https://repo1.maven.org/maven2/cn/hutool/hutool-all/4.6.5/hutool-all-4.6.5.jar
/
具体还可参考参考文档或 API文档

一、创建一个servlet，类

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.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;

/**
 * @ClassName: CheckCodeServlet 
 * @Description: 验证码Servlet
 * @author: lexiaowu
 * @date: 2019年9月12日 下午3:41:03
 */
@WebServlet(urlPatterns = {"/checkCode.do"})
public class CheckCodeServlet extends HttpServlet {

	private static final long serialVersionUID = 6757587943622901427L;

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		CircleCaptcha checkCode = CaptchaUtil.createCircleCaptcha(200, 100);
		//编码  随机字符串
		System.out.println(checkCode.getCode());
		//具体的验证码字符串
		String code = checkCode.getCode();
		//将产生的验证码存储在session中
		req.getSession().setAttribute("checkCode", code);
		/**
		 * 如果使用IO流的形式 ,将图片输出到浏览器
		 * 浏览器显示什么:图片
		 * 	
		 * 利用 response  获取 与客户端的连接输出流,
		 * 	此时将产生的图片的字节数据,利用response对象,向浏览器进行输出.
		 * 	浏览器,获取到数据后,进行解析.解析成图片
		 */
		checkCode.write(resp.getOutputStream());
	}	
}

二、JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="login.do" method="get">
<!-- 使用EL表达式  填充 用户名和密码 的值    -->
用户名:<input type="text"  name="userName"  /><br>
密码:<input type="text"  name="password"  /><br>
验证码:<input type="text"  name="checkCode"  /><img id="codeImg" onclick="getCode()"  src="checkCode.do" style="width: 100px;height: 40px"><br>
<!-- 使用EL表达式 为标签添加属性  checked -->
<input type="submit"  value="提交"/>
</form>
<script type="text/javascript">
	function getCode(){
		//注意:当url地址,一样时,浏览器默认不会重复请求,所以使用随机数的策略,修改URL地址,让浏览器不走缓存,发送新的请求
		document.getElementById("codeImg").src = "checkCode.do?"+Math.random();
	}
</script>
</body>
</html>

在这里插入图片描述

樂小伍

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端页面账号密码登录加验证码生成和校验功能

参考 hutool 工具：https://www.hutool.club使用需要下载 jar 包放入工程下的 lib 中：https://repo1.maven.org/maven2/cn/hutool/hutool-all/4.6.5/hutool-all-4.6.5.jar/////////////////////////////////////////////////////////...
复制链接

扫一扫