Spring验证码实例

最新推荐文章于 2023-02-16 15:28:17 发布

i白

最新推荐文章于 2023-02-16 15:28:17 发布

阅读量337

点赞数

分类专栏： spring 文章标签： spring

本文链接：https://blog.csdn.net/weixin_41384860/article/details/103544914

版权

spring 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Spring验证码实例

登录界面

首先，创建一个表单提交页面，如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    ${error }
	<form action="login" method="post">
		用户名:<input type="text" name="username" /><br /> 密码:<input
			type="password" name="password" /><br /> 验证码:<input type="text"
			size="1" name="code" /><img src="validcode" width="80" height="40" /><a
			href="">看不清</a><br /> <input type="submit" value="登录" /><input
			type="reset" value="重置" />
	</form>
</body>
</html>

上方标签放置验证码图片，src 后跟的即为 Servlet。

创建ValidCodeServlet类

因此，创建 ValidCodeServlet 类，如下：

@WebServlet("/validcode")
public class ValidCodeServlet extends HttpServlet{
	protected void service(HttpServletRequest req,HttpServletResponse resp) throws IOException {
		//使用 BufferedImage 创建一个图片，单位为像素。
		BufferedImage image = new BufferedImage(200, 100, BufferedImage.TYPE_INT_RGB);
		
		//使用 Graphics2D 绘图工具，设置画布颜色及区域。
		Graphics2D gra = image.createGraphics();
		gra.setColor(Color.WHITE);
		//x和y为坐标，width和height是矩形区域。
		gra.fillRect(0, 0, 200, 100);
		//创建一个 List 集合用以存随机数。
		List<Integer> randList = new ArrayList<Integer>();
		//使用 Random 类创建随机数。
		Random random = new Random();
		
		for(int i = 0;i<4;i++) {
            //存入到 List 集合中。
			randList.add(random.nextInt(10));
		}
		
		//设置验证码图片中的字体
        //其中 Font.ITALIC 为斜体，Font.BOLD 为加粗，40 为大小。
		gra.setFont(new Font("宋体",Font.ITALIC|Font.BOLD,40));
		//设置字体颜色
		Color[] colors = new Color[]{Color.RED,Color.YELLOW,Color.BLUE,Color.GREEN,Color.PINK,Color.GRAY};
		
        //将验证码画到画布中
        //随机颜色范围为 colors.length ，获取随机数字为 randList.get(i)，横坐标为i*40，纵坐标为 70+(random.nextInt(21)-10))。
		for(int i = 0;i < randList.size();i++) {
			gra.setColor(colors[random.nextInt(colors.length)]);
			gra.drawString(randList.get(i)+"",i*40,70+(random.nextInt(21)-10));
		}
		
        //在验证码下加横线
		for (int i = 0; i < 2; i++) {
			gra.setColor(colors[random.nextInt(colors.length)]);
			gra.drawLine(0, random.nextInt(101), 200, random.nextInt(101));
		}
		
        //最终获取输出流
		ServletOutputStream outputStream = resp.getOutputStream();
		
		//使用工具类将图片写入到输出流
		ImageIO.write(image,"jpg", outputStream);
		
		//把验证码放入到session中
		HttpSession session = req.getSession();
		session.setAttribute("code",""+randList.get(0)+randList.get(1)+randList.get(2)+randList.get(3));
	}
}

实现步骤：
- 使用 BufferedImage 创建一个图片，单位为像素。
- 使用 Graphics2D 绘图工具，设置画布颜色及区域，如：
  
  gra.setColor(Color.WHITE);gra.fillRect(0, 0, 200, 100);
- 创建一个 List 集合用以存随机数，如：
  
  List randList = new ArrayList();
- 使用 Random 类创建随机数，并存入到 List 集合中如：
  
  for(int i = 0;i<4;i++) {
  randList.add(random.nextInt(10));
  }
- 设置验证码图片中的字体，如下：
  
  gra.setFont(new Font(“宋体”,Font.ITALIC|Font.BOLD,40));
  
  其中 Font.ITALIC 为斜体，Font.BOLD 为加粗，40 为大小。
- 设置验证码字体颜色，如下：
  Color[] colors = new Color[]{Color.RED,Color.YELLOW,Color.BLUE,Color.GREEN,Color.PINK,Color.GRAY};
- 将验证码画到画布中，如下：
  
  for(int i = 0;i < randList.size();i++) {
  gra.setColor(colors[random.nextInt(colors.length)]);
  gra.drawString(randList.get(i)+"",i*40,70+(random.nextInt(21)-10));
  }
  
  随机颜色范围为 colors.length ，获取随机数字为 randList.get(i)，横坐标为i*40，纵坐标为 70+(random.nextInt(21)-10))。
- 在验证码下加横线，如下：
  
  for (int i = 0; i < 2; i++) {
  gra.setColor(colors[random.nextInt(colors.length)]);
  //画横线
  gra.drawLine(0, random.nextInt(101), 200, random.nextInt(101));
  }
- 最终获取输出流，如下：
  
  ServletOutputStream outputStream = resp.getOutputStream();
- 使用工具类将图片写入到输出流，如下：
  
  ImageIO.write(image,“jpg”, outputStream);
- 把验证码放入到session中，如下：
  
  HttpSession session = req.getSession();
  session.setAttribute(“code”,""+randList.get(0)+randList.get(1)+randList.get(2)+randList.get(3));

测试界面

此时先运行项目，如下：

validcode01

经过测试之后发现此时验证码已经展示出来，但是我们点击看不清时，发现验证码并不会重新生成。
此时我们需要自定义一个脚本，如下：

<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			//浏览器带有缓存功能,不会多次请求相同数据,所以后面加一个时间戳。
			$("img").attr("src", "validcode?date=" + new Date());
			return false;
		})
	})
</script>

以上这段代码放到index页面中，如下：

validcode02

i白

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Spring验证码实例

Spring验证码实例首先，创建一个表单提交页面，如下：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://...
复制链接

扫一扫