【Spring】基于SpringMVC的图片验证码功能实现
后台实现代码:
ImgController.java 文件
package cn.shop.controller; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.HashMap; import java.util.Map; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.google.gson.Gson; @Controller public class ImgController { @RequestMapping({"authCode.htgo"}) public void getAuthCode(HttpServletRequest request, HttpServletResponse response,HttpSession session) throws IOException { int width = 63; int height = 37; Random random = new Random(); //设置response头信息 //禁止缓存 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); //生成缓冲区image类 BufferedImage image = new BufferedImage(width, height, 1); //产生image类的Graphics用于绘制操作 Graphics g = image.getGraphics(); //Graphics类的样式 g.setColor(this.getRandColor(200, 250)); g.setFont(new Font("Times New Roman",0,28)); g.fillRect(0, 0, width, height); //绘制干扰线 for(int i=0;i<40;i++){ g.setColor(this.getRandColor(130, 200)); int x = random.nextInt(width); int y = random.nextInt(height); int x1 = random.nextInt(12); int y1 = random.nextInt(12); g.drawLine(x, y, x + x1, y + y1); } //绘制字符 String strCode = ""; for(int i=0;i<4;i++){ String rand = String.valueOf(random.nextInt(10)); strCode = strCode + rand; g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); g.drawString(rand, 13*i+6, 28); } //将字符保存到session中用于前端的验证 session.setAttribute("strCode", strCode); g.dispose(); ImageIO.write(image, "JPEG", response.getOutputStream()); response.getOutputStream().flush(); } //创建颜色 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); } /** * 进行验证用户的验证码是否正确 * @param value 用户输入的验证码 * @param request HttpServletRequest对象 * @return 一个String类型的字符串。格式为:<br/> * {"res",boolean},<br/> * 如果为{"res",true},表示验证成功<br/> * 如果为{"res",false},表示验证失败 */ @RequestMapping("validate.htgo") @ResponseBody public String validate(String value,HttpServletRequest request){ String valueCode=(String)request.getSession().getAttribute("strCode"); Map map=new HashMap(); if(valueCode!=null){ if(valueCode.equals(value)){ map.put("res", true); return new Gson().toJson(map); } } map.put("res", false); return new Gson().toJson(map); } }
前端部分代码:
<div class="form-group"> 验证码:<input id="authCode" name="authCode" type="text"/> <!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址--> <label><img type="image" src="authCode.do" id="codeImage" onclick="chageCode()" title="图片看不清?点击重新得到验证码" style="cursor:pointer;"/></label> <label><a onclick="chageCode()">换一张</a></label> </div>
实现点击图片更新js的方法:
function chageCode(){ $('#codeImage').attr('src','authCode.do?abc='+Math.random());//链接后添加Math.random,确保每次产生新的验证码,避免缓存问题。 }
表单提交的时候,可以进行Ajax验证,用户的输入是否正确:
$.post( "validate.do", {"value":$("#code_input").val()}, function(res){ if(res.res){ alert("验证成功"); }else{ alert("验证失败");
//刷新验证码图片
$("#codeImage").trigger("click"); } }, "JSON" );