javaweb项目如何实现简单的验证码(以及eclipse和Linux下验证码加载不出来)

像这样简单的验证码如何生成并显示在页面上并能点击不断刷新验证码呢?
在这里插入图片描述
1.首先创建一个servlet包并创建一个VerificationCodeServlet

package codewen.bookcool.servlet;

import java.awt.Color;
import java.awt.Font;
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;

/**
 * 验证码servlet
 * @author codewen
 * 
 */

@WebServlet("/VerificationCodeServlet")
public class VerificationCodeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int width = 100; //设置图片的宽度
		int height = 35; //设置图片的高度
		//在内存中生成一张图片
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		//获取画笔
		Graphics g = image.getGraphics();
		g.setColor(Color.pink);
		g.fillRect(0, 0, width, height); //画出粉色的填充框
		g.setColor(Color.blue);
		g.drawRect(0, 0, width-1, height-1); //画出蓝色的外边框
		char a[] = {'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', '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'};
		Random random = new Random();
		g.setColor(Color.red);
		Font font = new Font("萝莉体 第二版", Font.BOLD, 16);
		g.setFont(font);
		String Vcode = "";
		//随机生成四个字母或数字
		for(int i=1; i<=4; i++) {
			//随机生成[0,a.length)的数
			int index = random.nextInt(a.length);
			Vcode+=a[index];
			g.drawString(a[index]+"", width/5*i-5, height/2+5);
		}
		//将生成的验证码放入session(供登录时检验验证码使用)
		request.getSession().setAttribute("Vcode", Vcode);
		//显示图片
		ImageIO.write(image, "jpg", response.getOutputStream());
	}

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

}

2.jsp页面需要使用到验证码,直接调用即可
在这里插入图片描述
3.获取到验证码后,点击验证码能够不断刷新验证码也很重要
可以利用js获取图片对象并修改图片的src,给其src加时间戳

<!-- 这是一个图片链接,点击图片后执行refreshCode()函数更换图片 -->
<a href="javascript:refreshCode();"><img src="${pageContext.request.contextPath}/VerificationCodeServlet" title="看不清点击刷新" id="vcode_img"/></a>
<script type="text/javascript">
        //刷新验证码的函数
	     function refreshCode() {
	         //获取图片对象
	         var vcode_img = document.getElementById("vcode_img");
	         vcode_img.onclick = function() {
	             //获取时间戳
	             var time = new Date().getTime();
	             vcode_img.src = "${pageContext.request.contextPath}/VerificationCodeServlet?time="+time;
	         }
	     }
</script>

需要注意的是在Linux下可能会出现图片加载不出来的情况,我查了很久在一篇博客找到了答案,大概的意思就是jwt包默认不被Linux识别,需要修改配置,详细可以参考Linux下验证码加载不出来
我还碰到过eclipse运行项目的时候,发现有时候验证码能加载,有时候加载不出来,可以试试清理项目和Tomcat服务器缓存
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codewen77

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值