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")
@ResponseBody
public 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)
@ResponseBody
public 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;
}
（使用了逆向工程生成的函数）