挑战100道编程题（第8道）【Java实现验证码功能】

Myth丶恋晨 2021-09-23 19:10 242阅读 0赞

### 01-需求 ###

用Java实现验证码功能。

### 02-思路 ###

1）编写一个生成代码的工具类。

2）在编写一个登录页面（验证码通过后，跳转到该登录页面）

3）编写一个jsp页面，用于校验验证码。

### 03-代码 ###

**ImageCodeServlet**

package com.eleven;
    
    import java.awt.Color;
    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;
    
    @WebServlet("/servlet/ImageCodeServlet")
    public class ImageCodeServlet extends HttpServlet { 
    
    	/** * */
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    		req.setCharacterEncoding("UTF-8");
    		resp.setCharacterEncoding("UTF-8");
    
    		/** * 生成带字符串的文本图片 */
    		// 01创建图片缓存区
    		BufferedImage image = new BufferedImage(68, 22, BufferedImage.TYPE_INT_BGR); // 宽、高和图片类型
    		// 02创建绘制环境
    		Graphics paint = image.getGraphics();
    		Color c = new Color(200, 150, 255);
    		// 设置画笔
    		paint.setColor(c);
    		// 画背景
    		paint.fillRect(0, 0, 68, 22);
    
    		StringBuffer codes = new StringBuffer();
    		// 设置文本
    		char[] ch = "QWERTYUIOPASDFGHJKLZXCVBNM1234567890".toCharArray();
    		Random r = new Random(); // 随机数
    		int index;
    		for (int i = 0; i < 4; i++) { 
    			index = r.nextInt(ch.length);
    			paint.setColor(new Color(r.nextInt(88), r.nextInt(150), r.nextInt(255))); // 设置文本颜色
    			paint.drawString(ch[index] + "", (i * 16) + 3, 18);
    			codes.append(ch[index]);
    		}
    		req.getSession().setAttribute("codes", codes);
    		//
    		// 03输出图片
    		ImageIO.write(image, "JPG", resp.getOutputStream());
    	}
    
    }

**LoginServlet**

package com.eleven;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/servlet/LoginServlet")
    public class LoginServlet extends HttpServlet { 
    	/** * */
    	private static final long serialVersionUID = 1L;
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    		String codes = req.getSession().getAttribute("codes").toString();
    		String mycode = req.getParameter("checkcode");
    		resp.setCharacterEncoding("UTF-8");
    		req.setCharacterEncoding("UTF-8");
    		
    		PrintWriter out = resp.getWriter();
    		if (mycode.toUpperCase().equals(codes)) { 
    			out.println("验证码输入正确!");
    		} else { 
    			out.println("验证码输入错误!");
    		}
    		out.flush();
    		out.close();
    	}
    }

**index.jsp**

<%@ 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>
    <script type="text/javascript">
    function reloadcode(){ 
    	var time = new Date().getTime();
    	document.getElementById("imagecode").src="servlet/ImageCodeServlet?d="+time;
    }
    
    
    </script>
    </head>
    <body>
    <form action="servlet/LoginServlet" method="get">
    	验证码：<input type="text" name="checkcode">
    	<img alt="验证码" src="servlet/ImageCodeServlet" id="imagecode">
    	<a href="javascript:reloadcode();">看不清楚</a>
    <input type="submit" value="验证">
    </form> 
    </body>
    </html>

### 04-演示 ###

**验证失败：**

![在这里插入图片描述][20200120170150833.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzODk2_size_16_color_FFFFFF_t_70]  
**验证成功：**

![在这里插入图片描述][20200120170212288.png]

![在这里插入图片描述][20200120170223149.png]

[20200120170150833.png]: /images/20210923/64cc8a06fe4d438486c191240e869202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzODk2_size_16_color_FFFFFF_t_70]: /images/20210923/a8ec732571644e7180944034cf130576.png
[20200120170212288.png]: /images/20210923/89ef4d2ac49c4a4c923c4e1e1a7ccba6.png
[20200120170223149.png]: /images/20210923/c453526882514567a873315217495800.png