1.首先写工具类
import java.awt.*;
import java.awt.image.BufferedImage;
public class VCodeUtil {
private static final int WIDTH = 70;//验证码长度
private static final int HEIGHT = 20;//验证码高度
private static final int LENGTH = 4;//验证码位数
/**
* 获取验证码
* */
public static BufferedImage getVCodeImage(char[] rands){
// 创建内存图象并获得其图形上下文
BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
drawBackground(g);
drawRands(g, rands);
// 结束图像的绘制过程,完成图像
g.dispose();
return image;
}
/**
* 生产随机码
* */
public static char[] generateVCode() {
// 定义验证码的字符表
String chars = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ";
char[] rands = new char[LENGTH];
for (int i = 0; i < LENGTH; i++) {
int rand = (int) (Math.random() * chars.length());
rands[i] = chars.charAt(rand);
}
return rands;
}
/**
* 画出验证码
* */
private static Graphics drawRands(Graphics g, char[] rands) {
g.setColor(Color.BLACK);
g.setFont(new Font(null, Font.ITALIC | Font.BOLD, 18));
// 在不同的高度上输出验证码的每个字符
g.drawString("" + rands[0], 1, 17);
g.drawString("" + rands[1], 16, 15);
g.drawString("" + rands[2], 31, 18);
g.drawString("" + rands[3], 46, 16);
return g;
}
/**
* 画背景
* */
private static Graphics drawBackground(Graphics g) {
g.setColor(new Color(0xDCDCDC));
g.fillRect(0, 0, WIDTH, HEIGHT);
// 随机产生120个干扰点
for (int i = 0; i < 120; i++) {
int x = (int) (Math.random() * WIDTH);
int y = (int) (Math.random() * HEIGHT);
int red = (int) (Math.random() * 255);
int green = (int) (Math.random() * 255);
int blue = (int) (Math.random() * 255);
g.setColor(new Color(red, green, blue));
g.drawOval(x, y, 1, 0);
}
// 加两条干扰线
g.drawLine(0, 5, 90, 5);
g.drawLine(0, 15, 90, 15);
return g;
}
}
2.写一个验证码服务接口
/**
* 验证码服务
* Created by gameloft9 on 2017/12/6.
*/
public interface VCodeService {
/**
* 输出验证码到客户端
* */
void outPutVCode(HttpServletRequest request, HttpServletResponse response) throws Exception;
}
3.验证码实现类
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Service;
import com.utils.VCodeUtil;
/**
* 验证码服务
*
*/
@Service
public class VCodeServiceImpl implements VCodeService{
/**
* 输出验证码
* */
public void outPutVCode(HttpServletRequest request, HttpServletResponse response) throws Exception{
HttpSession session = request.getSession();
response.setContentType("image/jpeg");
ServletOutputStream sos = response.getOutputStream();
// 设置浏览器不要缓存此图片
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
//创建内存图象
char[] vCode = VCodeUtil.generateVCode();
BufferedImage image = VCodeUtil.getVCodeImage(vCode);
// 将图像输出到客户端
ByteArrayOutputStream bos = new ByteArrayOutputStream();
ImageIO.write(image, "JPEG", bos);
byte[] buf = bos.toByteArray();
response.setContentLength(buf.length);
// 下面的语句也可写成:bos.writeTo(sos);
sos.write(buf);
bos.close();
sos.close();
// 将当前验证码存入到Session中
session.setAttribute("vcode", new String(vCode));
}
}
4.书写controller类
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.cwh.springbootMybatis.service.system.VCodeService;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 图片验证码控制器
*
*/
@Controller
public class VCodeController {
@Autowired
VCodeService vCodeServiceImpl;
static {
//防止二维码显示不了
System.setProperty("java.awt.headless","true");
}
/**
* 获取验证码
* @param response
*/
@RequestMapping(value="/getVCode",method= RequestMethod.GET)
public void getGifCode(HttpServletResponse response, HttpServletRequest request) throws Exception{
vCodeServiceImpl.outPutVCode(request,response);
}
}
5.登录页面部分代码
<div class="login">
<h1>登录</h1>
<form class="layui-form">
<div class="layui-form-item">
<input class="layui-input" name="username" placeholder="用户名" lay-verify="required" type="text" autocomplete="off">
</div>
<div class="layui-form-item">
<input class="layui-input" name="password" placeholder="密码" lay-verify="required" type="password" autocomplete="off">
</div>
<div class="layui-form-item form_code">
<input class="layui-input" name="code" placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
<div class="code"><img src="/getVCode" width="116" height="36"></div>
</div>
<button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
</form>
</div>
6.更换验证码代码
/**
* 更换验证码
* */
$('.code img').click(function () {
this.src = $tool.getContext() + 'getVCode';
});