登陆页面实现验证码

1.创建工具类，用于生成图片

在这里插入图片描述

package com.bishe.utli;import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;public class ImageVerificationCode {private int weight = 100;           //验证码图片的长和宽private int height = 40;private String text;                //用来保存验证码的文本内容private Random r = new Random();    //获取随机数对象//private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};   //字体数组//字体数组private String[] fontNames = {"Georgia"};//验证码数组private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";/*** 获取随机的颜色** @return*/private Color randomColor() {int r = this.r.nextInt(225);  //这里为什么是225，因为当r，g，b都为255时，即为白色，为了好辨认，需要颜色深一点。int g = this.r.nextInt(225);int b = this.r.nextInt(225);return new Color(r, g, b);            //返回一个随机颜色}/*** 获取随机字体** @return*/private Font randomFont() {int index = r.nextInt(fontNames.length);  //获取随机的字体String fontName = fontNames[index];int style = r.nextInt(4);         //随机获取字体的样式，0是无样式，1是加粗，2是斜体，3是加粗加斜体int size = r.nextInt(10) + 24;    //随机获取字体的大小return new Font(fontName, style, size);   //返回一个随机的字体}/*** 获取随机字符** @return*/private char randomChar() {int index = r.nextInt(codes.length());return codes.charAt(index);}/*** 画干扰线，验证码干扰线用来防止计算机解析图片** @param image*/private void drawLine(BufferedImage image) {int num = r.nextInt(10); //定义干扰线的数量Graphics2D g = (Graphics2D) image.getGraphics();for (int i = 0; i < num; i++) {int x1 = r.nextInt(weight);int y1 = r.nextInt(height);int x2 = r.nextInt(weight);int y2 = r.nextInt(height);g.setColor(randomColor());g.drawLine(x1, y1, x2, y2);}}/*** 创建图片的方法** @return*/private BufferedImage createImage() {//创建图片缓冲区BufferedImage image = new BufferedImage(weight, height, BufferedImage.TYPE_INT_RGB);//获取画笔Graphics2D g = (Graphics2D) image.getGraphics();//设置背景色随机g.setColor(new Color(255, 255, r.nextInt(245) + 10));g.fillRect(0, 0, weight, height);//返回一个图片return image;}/*** 获取验证码图片的方法** @return*/public BufferedImage getImage() {BufferedImage image = createImage();Graphics2D g = (Graphics2D) image.getGraphics(); //获取画笔StringBuilder sb = new StringBuilder();for (int i = 0; i < 4; i++)             //画四个字符即可{String s = randomChar() + "";      //随机生成字符，因为只有画字符串的方法，没有画字符的方法，所以需要将字符变成字符串再画sb.append(s);                      //添加到StringBuilder里面float x = i * 1.0F * weight / 4;   //定义字符的x坐标g.setFont(randomFont());           //设置字体，随机g.setColor(randomColor());         //设置颜色，随机g.drawString(s, x, height - 5);}this.text = sb.toString();drawLine(image);return image;}/*** 获取验证码文本的方法** @return*/public String getText() {return text;}public static void output(BufferedImage image, OutputStream out) throws IOException                  //将验证码图片写出的方法{ImageIO.write(image, "JPEG", out);}
}

2.controller层加一个codeController

在这里插入图片描述

package com.bishe.user.controller;
import com.bishe.utli.ImageVerificationCode;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;@Controller
@RequestMapping("/code")
public class codeController {@RequestMapping("verify")@ResponseBodypublic void getVerifiCode(HttpServletRequest request, HttpServletResponse response) throws IOException, IOException {/*1.生成验证码2.把验证码上的文本存在session中3.把验证码图片发送给客户端*/ImageVerificationCode ivc = new ImageVerificationCode();     //用我们的验证码类，生成验证码类对象BufferedImage image = ivc.getImage();  //获取验证码request.getSession().setAttribute("text", ivc.getText()); //将验证码的文本存在session中ivc.output(image, response.getOutputStream());//将验证码图片响应给客户端}
}

（生成图片，并且把验证码存到session中去）

3.网页代码

验证码的显示
在这里插入图片描述

<span style="position: absolute"><img id="img" onclick="getVerifiCode()" title="点击刷新验证码" src="${pageContext.request.contextPath}/code/verify"/></span></td>

编写事件，让点击图片刷新验证码
在这里插入图片描述

  function getVerifiCode() {$("#img").prop('src','${pageContext.request.contextPath}/code/verify?a='+new Date().getTime());}

写到这可以测试一下，验证码已经生效，接下来写验证过程

1.写提交函数

在这里插入图片描述

2.使用异步请求

function login() {var username = $("#username").val();var password = $("#password").val();var code = $("#code").val();$.ajax({type:"post",url:"${pageContext.request.contextPath}/user/login",data:{"username":username,"password":password,"code":code},success:function(message){if(message==1){getVerifiCode();alert("用户名或密码不正确");}else if(message==2){getVerifiCode();alert("验证码错误");}else if(message==3){alert("登陆成功")}}});}

3.写controller层

   @RequestMapping(value = "/login",method = RequestMethod.POST)@ResponseBodypublic String login(user u, String code, HttpSession session, RedirectAttributes redirectAttributes){String text = (String)session.getAttribute("text");System.out.println(text);System.out.println(u);//session中的验证码取出后要立即移除session.removeAttribute("text");//忽略大小写的验证if(code.equalsIgnoreCase(text)){//如果眼中你干嘛正确，再验证用户名和密码user us =  userService.getEmploye(u);if(us==null){redirectAttributes.addFlashAttribute("msg","用户名或密码错误");return "1";}else{session.setAttribute("loginUser",us);}}else{//重定向的同时如果想携带错误提示信息去页面redirectAttributes.addFlashAttribute("msg","验证码错误");return "2";}return "3";}

( 使用pojo对象接收数据，验证码的信息存在session中，所以要传入一个session对象来获取 )

4.编写service层代码

  public user getEmploye(user u) {userExample example = new userExample();userExample.Criteria criteria = example.createCriteria();criteria.andUsernameEqualTo(u.getUsername());criteria.andPasswordEqualTo(u.getPassword());List<user> employees = userMapper.selectByExample(example);if(employees.size()>0){return employees.get(0);}return null;}