1.往login.html页面添加上一个装验证码的div
<div class="form-group has-feedback"> <input id="checkCode" name="checkCode" type="text" placeholder="验证码" autocomplete="off" required="required" class="form-control" data-parsley-required-message="请输入验证码！"/> <td><img src="/code" alt="验证码" title="点击更换" onclick="this.src='/code?'+Math.random()"/></td> </div>2.写工具类VerifyCodeUtils
package wang.doug.frame.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.util.Random; import javax.imageio.ImageIO; /** * @author * @date * @param * @desc 图形验证码生成 * */ public class VerifyCodeUtils { // 验证码字符集 private static final char[] chars = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'}; // 字符数量 private static final int SIZE = 4; // 干扰线数量 private static final int LINES = 5; // 宽度 private static final int WIDTH = 80; // 高度 private static final int HEIGHT = 40; // 字体大小 private static final int FONT_SIZE = 30; /** * 生成随机验证码及图片 * Object[0]：验证码字符串； * Object[1]：验证码图片。 */ public static Object[] createImage() { StringBuffer sb = new StringBuffer(); // 1.创建空白图片 BufferedImage image = new BufferedImage( WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB); // 2.获取图片画笔 Graphics graphic = image.getGraphics(); // 3.设置画笔颜色 graphic.setColor(Color.LIGHT_GRAY); // 4.绘制矩形背景 graphic.fillRect(0, 0, WIDTH, HEIGHT); // 5.画随机字符 Random ran = new Random(); for (int i = 0; i <SIZE; i++) { // 取随机字符索引 int n = ran.nextInt(chars.length); // 设置随机颜色 graphic.setColor(getRandomColor()); // 设置字体大小 graphic.setFont(new Font( null, Font.BOLD + Font.ITALIC, FONT_SIZE)); // 画字符 graphic.drawString( chars[n] + "", i * WIDTH / SIZE, HEIGHT*2/3); // 记录字符 sb.append(chars[n]); } // 6.画干扰线 for (int i = 0; i < LINES; i++) { // 设置随机颜色 graphic.setColor(getRandomColor()); // 随机画线 graphic.drawLine(ran.nextInt(WIDTH), ran.nextInt(HEIGHT), ran.nextInt(WIDTH), ran.nextInt(HEIGHT)); } // 7.返回验证码和图片 return new Object[]{sb.toString(), image}; } /** * 随机取色 */ public static Color getRandomColor() { Random ran = new Random(); Color color = new Color(ran.nextInt(256), ran.nextInt(256), ran.nextInt(256)); return color; } }3.往UserController完善用户登录方法（加入验证码验证功能）
/** * 登录接口 * * @param model * @param loginData JSON格式的登录信息，可以使用Java类描述，也可以使用Map * @return */ @RequestMapping(value = {"login.json"}) @ResponseBody public BaseResult login(HttpServletRequest request,Model model,@RequestBody Map<String, Object> loginData ) { //TODO： 从loginData中获取账号和密码，进行验证，根据验证结果返回信息 BaseResult baseResult=null; String name=loginData.get("loginName").toString(); User u = userService.Sel(name); HttpSession session=request.getSession(); if(u != null){ //从数据库中获取的密码 String ps = u.getPassWord(); //从表单中获取的密码 String psFromForm = loginData.get("loginPwd").toString(); String codeFromForm =loginData.get("checkCode").toString(); System.out.println("user:........"+u.toString()); if(ps.equals(psFromForm)&&session.getAttribute("imageCode").toString().equalsIgnoreCase(codeFromForm)){ baseResult = new BaseResult(); baseResult.setSuccess(true); request.getSession().setAttribute("user",u); }else{ baseResult = new BaseResult(); baseResult.setSuccess(false); } } return baseResult; }4.往UserController写生成验证码的方法
@RequestMapping("/code") public void getCode(HttpServletResponse response, HttpServletRequest request) throws Exception{ HttpSession session=request.getSession(); //利用图片工具生成图片 //第一个参数是生成的验证码，第二个参数是生成的图片 Object[] objs = VerifyCodeUtils.createImage(); //将验证码存入Session session.setAttribute("imageCode",objs[0]); //将图片输出给浏览器 BufferedImage image = (BufferedImage) objs[1]; response.setContentType("image/png"); OutputStream os = response.getOutputStream(); ImageIO.write(image, "png", os); }