【JSP学习笔记】使用Servlet实现网页验证码

最新推荐文章于 2022-02-17 20:43:13 发布

彩笔程序猿

最新推荐文章于 2022-02-17 20:43:13 发布

阅读量896

点赞数 1

分类专栏： JSP学习笔记文章标签： JSP servlet web应用验证码

本文链接：https://blog.csdn.net/u011795293/article/details/28249573

版权

JSP学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Servlet是一种独立于平台和协议的服务器端的Java技术，Servlet对象主要封装了对HTTP请求的处理，并且它的运行需要Servlet容器（Tomcat和JBoss等）的支持。其实Servlet实质就是按Servlet规范编写的Java类，但它可以处理Web应用中的相关请求。

先给出Servlet的UML图：

下面，我们将通过Servlet实现网页上的验证码进一步了解Servlet。

1、Servlet创建

如果是使用IDE中Servlet直接生成的这就简单了，因为IDE会自动帮你创建你所选择的方法以及进行了注解配置（Servlet配置），但是新手的话我建议大家是直接新建一个Java类，按照Servlet的规范逐一将想要的代码实现，因为这样能帮我们加深对Servlet的认识的同时，也让我们更熟悉Servlet的使用。

2、要求

1. 编写一个Servlet，实现以下功能：

（1）能够响应来自客户端的GET请求，不响应POST和其他请求；

（2）请求的url-pattern为“/checkcode”；

（3）响应请求时，向浏览器改善验证码图片，验证码由4位字符组成，字符可以是26个英文字母和10个数字。

（4）同时将验证码字符串放入session中，以便将来客户端提交验证码时检查是否一致。

生成验证码的Java类：

public class Verifycode {

	String code = "";
	public static final char[] chars = {'0','1','2','3','4','5','6','7','8',
		'9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q',
		'R','S','T','U','V','W','X','Y','Z'}; //定义随机字符字典，可随意添加
	public static Random random = new Random(); //随机数类
	
	public static String getRandomString() {
		//获取随机字符串，即验证码
		StringBuffer sb = new StringBuffer();
		for (int i=0;i<4;i++)  //生成4位随机的验证码
			sb.append(chars[random.nextInt(chars.length)]);
		return sb.toString();
	}
	
	public static Color getRandomColor() {
		return new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)); //渲染方法
	}
	
	public static Color getReverseColor(Color c) {
		return new Color(255-c.getRed(),255-c.getGreen(), 255-c.getBlue()); //渲染方法

	}
	
	public void getCode(HttpServletRequest request,
            HttpServletResponse response) {
		code = getRandomString();
		HttpSession session = request.getSession();
		session.setAttribute("code", code); //将生成的验证码字符串放到session当中，便于与客户端输入的信息匹配
		int width = 100, height = 30; //定义图片的宽和高
		Color color = getRandomColor();
		Color reverse = getReverseColor(color);
		BufferedImage imgbuf = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics2D g = imgbuf.createGraphics();
		g.setFont(new Font(Font.SANS_SERIF,Font.BOLD,16));//设置字体
		g.setColor(color);//设置颜色
		g.fillRect(0, 0, width, height);//绘制背景
		g.setColor(reverse);//设置颜色
		g.drawString(code, 18, 20);//绘制随机字符
		for(int i=0,n=random.nextInt(100);i<n;i++) {//画最多100个噪音点
			g.drawRect(random.nextInt(width), random.nextInt(height), 1, 1);//随机噪音点
		}
		try {
            ImageIO.write(imgbuf, "JPEG", response.getOutputStream());//将内存中的图片通过流动形式输出到客户端
        } catch (Exception e) {
            e.printStackTrace();
        }
	}
}

接收客户端请求的Servlet：

@WebServlet("/checkcode") //注解配置Servlet，非常重要!!!
public class checkcode extends HttpServlet{
	
	private static final long serialVersionUID = 1L;
	
	public checkcode() {
		super();
	}

	public void init(ServletConfig config) throws ServletException {
		super.init();
	}
	
	public void destory() {
		
	}
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		response.setContentType("image/jpeg");  //将服务器的响应类型设置为image
		Verifycode vc = new Verifycode();
		try {
			vc.getCode(request, response); //将客户端的请求传递到生成验证码的Java类中，并且成功后返回响应
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
	}
}

2. 编写一个login.jsp（见下图），测试验证码是否有效。

（1）用户输入正确的验证码，则提示验证码正确；否则提示错误。然后继续显示一个新的验证码。

（2）用户点击验证码图片时，更换一个新的验证码。

网页代码：

<%@ 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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>

<script type="text/javascript"> <!--该JavaScript脚本用于当用户点击图片时换一张图片 -->
	$(function() {
		$("#vcode").bind("click", function() {
			this.src = "checkcode?time=" + (new Date()).getTime();
		});
	});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证码</title>
</head>
<body>

	<form action="login.jsp" name="form1" id="form1" method="get">
		输入验证码：<input type="text" name="verifycode" id="verifycode" maxlength="4" />
		<img alt="验证码" src="checkcode" id="vcode" style="cursor: pointer;"  > 
		<input type="submit" value="check">
	</form>

<% 
	String code = (String)session.getAttribute("code"); 
	String code1 = request.getParameter("verifycode");
%>
<!--获取session中的验证码字符串，并与客户端输入的字符串作比较 -->
<%
	if (code != null)
		if (code.equals(code1)) //这里必须是用String的equals方法，Java的基本常识
			out.print("验证码正确！");
		else
			out.print("验证码不正确！请重新输入");
%>

</body>
</html>

输入错误的效果：