java实现登陆验证码

版权声明:网上学习笔记,共享。 https://blog.csdn.net/qq_37346607/article/details/84566202

1.先上效果图

2.前端页面

<div class="loginInfo-input">

    <input type="text" name="" id="identifyCode2" style="width: 75px;" autocomplete="off" placeholder=""/>

    <img src="<%=path%>/jcaptcha.jpg" style="border-radius: 3px;margin-top: -4px;" alt="验证码" id="safecode2" />

    <a href="javascript:reloadCode2();" style="font-size: 10px;text-decoration: underline;">看不清楚</a>

</div>


<script>
// 换一张验证码
function reloadCode2(){
	var time = new Date();
	// 给URL传递参数可以清空浏览器的缓存,让浏览器认为这是一个新的请求
	document.getElementById('safecode2').src = '<%=path%>/jcaptcha.jpg?d=' + time;
}
</script>

注意:<img>标签的src属性发起请求

3.web.xml配置servlet处理HTTP请求

<!-- 生成验证码 -->
<servlet>
    <servlet-name>imageServlet</servlet-name>
    <servlet-class>
        com.servlet.ImageServlet
    </servlet-class>
</servlet>
	
<servlet-mapping>
    <servlet-name>imageServlet</servlet-name>
    <url-pattern>/jcaptcha.jpg</url-pattern>
</servlet-mapping>

4.创建ImageServlet.java类

public class ImageServlet extends HttpServlet {
	private static char[] chs = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
			.toCharArray();
	private static final int NUMBER_OF_CHS = 4;
	private static final int IMG_WIDTH = 65;
	private static final int IMG_HEIGHT = 30;

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

		BufferedImage image = new BufferedImage(IMG_WIDTH, IMG_HEIGHT,
				BufferedImage.TYPE_INT_RGB); // 实例化BufferedImage
		Graphics g = image.getGraphics();
		Color c = new Color(200, 200, 255); // 验证码图片的背景颜色
		g.setColor(c);
		g.fillRect(0, 0, IMG_WIDTH, IMG_HEIGHT); // 图片的边框

		StringBuffer sb = new StringBuffer(); // 用于保存验证码字符串
		int index; // 数组的下标
		Random random = new Random();
		Font font = new Font("Fixedsys", Font.BOLD, 20);
		// 随机产生30条干扰线,使图象中的认证码不易被其它程序探测到。
        g.setColor(Color.BLACK);
        for (int i = 0; i < 30; i++) {
            int x = random.nextInt(IMG_WIDTH);
            int y = random.nextInt(IMG_HEIGHT);
            int xl = random.nextInt(15);
            int yl = random.nextInt(15);
            g.drawLine(x, y, x + xl, y + yl);
        }
		for (int i = 0; i < NUMBER_OF_CHS; i++) {
			index = random.nextInt(chs.length); // 随机一个下标
			g.setFont(font);
			g.setColor(new Color(random.nextInt(88), random.nextInt(210), random.nextInt(150))); // 随机一个颜色
			g.drawString(chs[index] + "", 15 * i + 3, 18); // 画出字符
			sb.append(chs[index]); // 验证码字符串
		}

		request.getSession().setAttribute("piccode", sb.toString()); // 将验证码字符串保存到session中
		ImageIO.write(image, "jpg", response.getOutputStream()); // 向页面输出图像
	}

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

5.验证码是否输入成功验证(我这是struts2的ajax验证

 /**
 * 验证码是否正确
 * @author jq.Li
 * @date Nov 19, 20184:54:37 PM
 * 
 * @return
 */
public String ValidateImage() {
Map<String,Object> map = new HashMap<String,Object>();

String picString = (String)this.getRequest().getSession().getAttribute("piccode");

if(picString!=null&&identifyCode!=null&&        identifyCode.toUpperCase().equals(picString.toUpperCase())){

    map.put("flag", "success");
}else{
    map.put("flag", "fail");
}

JSONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据

result = json.toString();//给result赋值,传递给页面

return "success";

}

注:我贴出struts的xml配置方法请求代码(struts整合ajax自行百度处理)

<!-- ajax -->
<action name="ValidateImage" class="loginAction" method="ValidateImage">
    <result type="json">
	<param name="root">result</param>
	<!-- result是action中设置的变量名,也是页面需要返回的数据,
	该变量必须有setter和getter方法 -->
        </result>
	<result name="fail"></result>
</action>

猜你喜欢

转载自blog.csdn.net/qq_37346607/article/details/84566202
今日推荐