Spring验证码实例

Spring验证码实例

登录界面

  • 首先,创建一个表单提交页面,如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
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));

测试界面

  • 此时先运行项目,如下:

Spring验证码实例_第1张图片

  • 经过测试之后发现此时验证码已经展示出来,但是我们点击看不清时,发现验证码并不会重新生成。
  • 此时我们需要自定义一个脚本,如下:
<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			//浏览器带有缓存功能,不会多次请求相同数据,所以后面加一个时间戳。
			$("img").attr("src", "validcode?date=" + new Date());
			return false;
		})
	})
script>
  • 以上这段代码放到index页面中,如下:

Spring验证码实例_第2张图片

你可能感兴趣的:(spring,spring)