今天在写一个页面的时候用到了验证码，就自己搞了一下，随便发出来，方便大家参考使用，不对的请指正！
首先在ssm的common的工具包中增加一个生成验证码的类：
import java.awt.*;
import java.awt.font.FontRenderContext;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
public class CodeUtil {
/**
* 绘画验证码
*
* @param output
* @return
*/
public String drawImg(ByteArrayOutputStream output) {
String code = "";
// 随机产生4个字符
for (int i = 0; i < 4; i++) {
code += randomChar();
}
int width = 70;
int height = 27;
BufferedImage bi = new BufferedImage(width, height,
BufferedImage.TYPE_3BYTE_BGR);
Font font = new Font("Times New Roman", Font.PLAIN, 20);
// 调用Graphics2D绘画验证码
Graphics2D g = bi.createGraphics();
g.setFont(font);
Color color = new Color(66, 2, 82);
g.setColor(color);
g.setBackground(new Color(226, 226, 240));
g.clearRect(0, 0, width, height);
FontRenderContext context = g.getFontRenderContext();
Rectangle2D bounds = font.getStringBounds(code, context);
double x = (width - bounds.getWidth()) / 2;
double y = (height - bounds.getHeight()) / 2;
double ascent = bounds.getY();
double baseY = y - ascent;
g.drawString(code, (int) x, (int) baseY);
g.dispose();
try {
ImageIO.write(bi, "jpg", output);
} catch (IOException e) {
e.printStackTrace();
}
return code;
}
/**
* 随机参数一个字符
*
* @return
*/
private char randomChar() {
Random r = new Random();
String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789";
return s.charAt(r.nextInt(s.length()));
}
}控制器中的验证码的方法：
/**
* @function 加载登录页面
* @return
*/
@RequestMapping(value = "/login", method = RequestMethod.GET)
public String login(){
return "login";
}
/**
* 获取验证码
*
* @param response
* @param session
*/
@RequestMapping("/getVerifyCode")
public void generate(HttpServletResponse response, HttpSession session) {
ByteArrayOutputStream output = new ByteArrayOutputStream();
CodeUtil codeUtil = new CodeUtil();
String verifyCodeValue = codeUtil.drawImg(output);
System.out.println(verifyCodeValue);
session.setAttribute("verifyCode", verifyCodeValue);
try {
ServletOutputStream out = response.getOutputStream();
output.writeTo(out);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* @function 登录验证
* @param teacher
* @param session
* @return
*/
@RequestMapping(value = "/login_sub", method = RequestMethod.POST)
@ResponseBody
public Msg login_sub(Teacher teacher, HttpSession session, @RequestParam("code") String code){
String verifyCode= (String) session.getAttribute("verifyCode");
if(!code.equalsIgnoreCase(verifyCode)){
return Msg.fail().add("msg", "验证码错误！");
}else{
Teacher teacher1 = teacherService.checkLogin(teacher);
if(teacher1 != null){
session.setAttribute("teacher", teacher1);
return Msg.success().add("msg", "欢迎登录");
}else{
return Msg.fail().add("msg", "用户名或者密码错误！");
}
}
}最后就是前端的html代码了！
<!DOCTYPE html>
<HTML xmlns="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>例子</title>
<link type="text/css" data-th-href="@{/static/css/index.css}" rel="stylesheet" />
</head>
<body>
<div class="login_wall">
<div class="login_logo">
<img class="login_img" data-th-src="@{/static/images/logo.png}">
</div>
<div class="login_main">
<span class="login_span fl">
<img data-th-src="@{/static/images/login_07.png}" width="422" height="322">
</span>
<div class="login_dl fr">
<form >
<span><img data-th-src="@{/static/images/login_j_03.png}">登录<a class="fr" data-th-href="@{/register}">注册</a></span>
<p><em>账 号：</em><input type="text" name="username"></p>
<p><em>密 码：</em><input type="text" name="password"></p>
<p><em>验证码：</em><input type="text" name="code" style="width:134px; height:27px;"><img data-th-src="@{/getVerifyCode}" style="margin-left:5px" id="Img" onclick="changeCode();"></p>
<input type="button" value="确定" id="login_btn"/>
</form>
</div>
<div class="clear"></div>
</div>
</div>
</body>
<script type="text/javascript" data-th-src="@{/static/js/jQuery1.7.2.js}"></script>
<script type="text/javascript" data-th-inline="javascript">
/*<![CDATA[*/
// 获取当前时间
function genTimestamp() {
var time = new Date();
return time.getTime();
}
// 点击获取验证码
function changeCode() {
$("#Img").attr("src", "/getVerifyCode?t=" + genTimestamp());
}
// 点击登录
$("#login_btn").click(function(){
var username = $("input[name='username']").val();
var password = $("input[name='password']").val();
var code = $("input[name='code']").val();
if(username != "" && password != ""){
var data = {"username":username, "password": password};
// console.log(data); return false;
$.post("/login_sub?code="+code, data, function(res){
// console.log(res); return false;
if(res.code == 100){
alert(res.extend.msg);
location.href = "/index";
}
})
}else{
alert("用户名和密码未填写！");
}
})
/*]]>*/
</script>
</html>具体过程：
现用工具类创建一个验证码的图片，将其放在response对象流中，在将code值放在session中，在前台显示，点击刷新是的时候增加时间戳，防止缓冲；在进行验证的时候对在session中保存的code与提交的code进行比较验证过在验证用户名密码。