利用JavaWeb中的Servlet技术实现验证码图片的随机生成及验证登录

引言

最近博客停更了一段时间，我发现坚持每天写博客真的是一件很累人的事情，尤其是在技术还没学到家的情况下每天写上这么一两千字的博客再加上又没有太多自身对技术的理解，面对这么一张白板有时显得有些苍白。但是作为一个正在努力中的小黑猫最近看到之前整理的两篇文章竟然也有了将近1000的访问量内心难免还是有些欢喜，也激发了我重新拾起博客的热情和动力。上一次写博客时才刚接触Java，在这段时间中，也基本学完了JavaSE部分(当然，只是很粗浅的学完)，对前端技术HTML,CSS,JavaScript以及MySQL数据库部分也有了一定的接触，最近在学习Web后端服务器相关的知识，今天想在博客里就自己学习到的Servlet技术实现验证码的随机生成及验证登录这个问题进行一个记录，这里贴出来的源码都是得到实际验证可以运行的，有些地方注意改一下路径就行。

运行结果展示

首先我先放一波这个程序的运行结果:

验证界面:

每一次的页面刷新(访问)都会发送一个Servlet请求到后台程序，后台随机返回一个验证码图片，此外，由于页面中JavaScript程序产生的效果单机验证码图片也会实现验证码图片更新。

验证结果:

验证码匹配正确：

验证码匹配错误:

验证失败之后由于我在程序中设置了重定向，所以三秒后会自动跳转回到验证界面。当然，返回的界面由于仅仅使用了 response的write方法所以有点丑，随着以后的学习可以利用jsp制作完动态网页将其返回，在此只是一个小demo作为程序逻辑的验证。

工程目录介绍

其中，我的工程项目名称为26-Servlet,由于之前写过的一些文件也放在这个工程中，所以我用矩形框作了一个标识，这个项目用到的一个包就是com.sjq.code,其中的两个java文件一个用于后台服务器返回验证码图片(CheckCodeServlet.java)，一个用来对输入的内容进行验证(RegistServlet.java)。需要注意的是，这两个文件都不是普通的java类文件，而是Servlet文件，在创建的时候需要注意。

在WEB-INF下，有一个专门用于存放一条条成语数据的txt文件(new_words.txt)，当然该文件可以放在任意位置，只要在程序中注意路径问题即可，该文件还有一个非常重要且容易忽视注意点就是在用记事本保存的时候一定要用UTF-8进行保存，否则程序在读取的时候可能会出现中文乱码问题。

code.html文件是验证界面，我用css对表单内容简单进行了布局修饰，当然，直男审美还望见谅。

以上用红色标注的就是大概就是用到的所有工程或者文件名称，可适当对其进行修改

项目源代码

code.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java随机生成验证码图片 --敲代码的小黑猫</title>
<style>
	*{
	    padding: 0;
		margin: 0;
	}
	h3{
		text-align: center;
		font-size: 20px;
		color: blue;
		font-family: 楷体;
		margin-bottom: 20px;
    	margin-top: 50px;
		}
	form{
		width: 500px;
		height: 500px;
		display: block;
		margin: 0 auto;
	}
	form .code{
		width: 410px;
		height: 30px;
		margin-bottom: 10px;
		margin-left: 50px;
	}
	form .code input{
		width: 280px;
		height: 29px;
		display: block;
		border: 1px solid #666666;
		float: left;
	}
	form .code img{
		width: 120px;
		height: 30px;
		display: block;
		float: left;
	}
	form .submit{
		width: 200px;
		height: 40px;
		margin-left: 150px;
	}
	form .submit input{
		width: 200px;
		height: 40px;
		background-color: orangered;
		color: white;
		font-size: 18px;
		border: none;
		cursor: pointer;
	}
</style>
</head>
<body>
	<h3>欢迎来到棋哥servlet验证码验证界面</h3>
	<form action="http://localhost:8090/26-Servlet/RegistServlet">
		<div class="code">
			<input type="text" placeholder="请输入验证码..." name="code">
			<img src="/26-Servlet/CheckCodeServlet" alt="验证码失效" οnclick="changeCode(this)">
		</div>
		<div class="submit">
			<input type="submit" value="提交验证码">
		</div>
	</form>

	<script type="text/javascript">
	    function changeCode(obj){
	        obj.src = "/26-Servlet/CheckCodeServlet?time="+new Date().getTime();
	    }
	</script>
</body>
</html>

CheckCodeServlet

package com.sjq.code;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// 集合中保存所有成语
	private List<String> words = new ArrayList<String>();

	@Override
	public void init() throws ServletException {
		// 初始化阶段，读取new_words.txt
		// web工程中读取 文件,必须使用绝对磁盘路径
		String path = getServletContext().getRealPath("/WEB-INF/new_words.txt");
		try {
			BufferedReader reader = new BufferedReader(new FileReader(path));
			String line;
			//把读的成语全部添加到一个集合当中
			while ((line = reader.readLine()) != null) {
				words.add(line);
			}
			reader.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 禁止缓存
		response.setHeader("Cache-Control", "no-cache");
		//设置过期时间为立即过期
		response.setDateHeader("Expires", 0);
		
		int width = 120;
		int height = 30;
		// 步骤一 绘制一张内存中图片
		BufferedImage bufferedImage = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
		// 步骤二 图片绘制背景颜色 ---通过绘图对象
		Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔
		// 绘制任何图形之前 都必须指定一个颜色
		graphics.setColor(getRandColor(200, 250));
		graphics.fillRect(0, 0, width, height);
		// 步骤三 绘制边框
		graphics.setColor(Color.WHITE);
		graphics.drawRect(0, 0, width - 1, height - 1);
		// 步骤四 四个随机数字
		Graphics2D graphics2d = (Graphics2D) graphics;
		// 设置输出字体
		graphics2d.setFont(new Font("楷体", Font.BOLD, 18));
		Random random = new Random();// 生成随机数
		int index = random.nextInt(words.size());
		String word = words.get(index);// 获得成语
		System.out.println(word);
		// 定义x坐标
		int x = 10;
		for (int i = 0; i < word.length(); i++) {
			// 随机颜色
			graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
					.nextInt(110), 20 + random.nextInt(110)));
			// 旋转 -30 --- 30度
			int jiaodu = random.nextInt(60) - 30;
			// 换算弧度
			double theta = jiaodu * Math.PI / 180;

			// 获得字母数字
			char c = word.charAt(i);

			// 将c 输出到图片
			graphics2d.rotate(theta, x, 20);
			graphics2d.drawString(String.valueOf(c), x, 20);
			graphics2d.rotate(-theta, x, 20);
			x += 30;
		}

		// 将验证码内容保存session
		//request.getSession().setAttribute("checkcode_session", word);
		//把生成的验证码存放到全局域对象当中
		this.getServletContext().setAttribute("checkCode", word);
		// 步骤五 绘制干扰线
		graphics.setColor(getRandColor(160, 200));
		int x1;
		int x2;
		int y1;
		int y2;
		for (int i = 0; i < 30; i++) {
			x1 = random.nextInt(width);
			x2 = random.nextInt(12);
			y1 = random.nextInt(height);
			y2 = random.nextInt(12);
			graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
		}
		// 将上面图片输出到浏览器 ImageIO
		graphics.dispose();// 释放资源
		//将图片写到response.getOutputStream()中
		ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

	/**
	 * 取其某一范围的color
	 * 
	 * @param fc
	 *            int 范围参数1
	 * @param bc
	 *            int 范围参数2
	 * @return Color
	 */
	private Color getRandColor(int fc, int bc) {
		// 取其随机颜色
		Random random = new Random();
		if (fc > 255) {
			fc = 255;
		}
		if (bc > 255) {
			bc = 255;
		}
		int r = fc + random.nextInt(bc - fc);
		int g = fc + random.nextInt(bc - fc);
		int b = fc + random.nextInt(bc - fc);
		return new Color(r, g, b);
	}

}

RegistServlet

package com.sjq.code;

import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class RegistServlet
 */
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//解决响应信息的中文乱码问题
		response.setHeader("Content-Type", "text/html;charset=UTF-8");
		
		//获取接收请求参数
		String code = request.getParameter("code");
		System.out.println(code);
		
		//如果出现中文乱码可以设置编码，由于没有出现中文乱码，所以此段注释
		//byte[] bytes = code.getBytes("ISO8859-1");
		//code = new String(bytes,"UTF-8");
		
		//取出存放的word
		 Object word = this.getServletContext().getAttribute("checkCode");
		 
		 //将输入的code值和随机生成的word值进行字符串对比
		 if(code.equals(word)) {
			 response.getWriter().write("验证成功!");
		 }else {
			 response.getWriter().write("验证失败...");
			 //重定向，隔三秒重新跳转到原来的界面
			 response.setHeader("refresh", "3;url=/26-Servlet/code.html");
		 }
	}
}

尾言

上面的几段代码皆亲测可用，个人认为只要大概能够理解上面的部分代码，熟悉其执行流程及思路即可。写在博客里的另一个目的也是为了满足自己的私心那就是保存起来方便日后在使用时直接对该代码进行复制调用，只需修改一些文件名，路径即可。若此文章能有幸被一些需要帮助的读者浏览到，关于此代码遇到的任何问题或是求取资源等等可加QQ 2569678842进行技术探讨。本人也在学习阶段，愿意与所有投机的小伙伴一同在前进的路上一路高歌猛进。

敲代码的小黑猫

发布了12 篇原创文章 · 获赞 39 · 访问量 4万+

私信关注