from 表单:
<div class="block">
<p class="block-heading">用户登录</p>
<div class="block-body">
<form id="login_form"
action="${pageContext.request.contextPath}/platform/login.htm"
method="post">
<input type="hidden" name="remFlag" id="remFlag"/>
<label>用户名</label>
<input autocomplete="off" id="username" name="username" value="${userName}" type="text" placeholder="请输入用户名" class="span12">
<label>密码</label>
<input name="password" id="password" type="password" class="span12" autocomplete="off" value="${userPass}" placeholder="请输入用密码" >
<label>验证码</label>
<input autocomplete="off" style="width: 150px;" id="code" name="code" type="text" placeholder="请输入验证码" class="span12" οnblur="document.getElementById('enter').focus();">
<img alt="验证码" id="scode" style="width: 75px; height:30px; margin-bottom: 9px; " src="${pageContext.request.contextPath}/platform/getCode.htmc" >
<a href="#" οnclick="javascript:flushCode();"><font style="font-style:italic;" size="1">看不清?换一张</font></a><br>
<input name="aaaa" type="checkbox" οnclick="remember();">记住账号和密码
<a id="enter" href="#*" class="btn btn-primary pull-right" οnclick="toLogin()">立即登录</a>
</form>
</div>
</div>
js:
function flushCode() {
// 每次刷新的时候获取,防止浏览器缓存刷新失败
var time = Math.random();
document.getElementById("scode").src = "${pageContext.request.contextPath}/platform/getCode.htmc?time=" + time;
}
后台controller:
/**
* 生成验证码
* @param request
* @param response
* @throws IOException
*/
@RequestMapping(value = "/platform/getCode")
public void code(HttpServletRequest request, HttpServletResponse response) throws IOException {
int IMG_HEIGHT = 100;
int IMG_WIDTH = 40;
// 用于绘制图片,设置图片的长宽和图片类型(RGB)
BufferedImage bi = new BufferedImage(IMG_HEIGHT, IMG_WIDTH, BufferedImage.TYPE_INT_RGB);
// 获取绘图工具
Graphics graphics = bi.getGraphics();
graphics.setColor(new Color(180, 200, 200)); // 使用RGB设置背景颜色
graphics.fillRect(0, 0, 100, 40); // 填充矩形区域
// 验证码中所使用到的字符
char[] codeChar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".toCharArray();
String captcha = ""; // 存放生成的验证码
Random random = new Random();
for(int i = 0; i < 4; i++) { // 循环将每个验证码字符绘制到图片上
int index = random.nextInt(codeChar.length);
graphics.setFont(new Font("黑体", Font.BOLD, 20));
// 随机生成验证码颜色
graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));
// 将一个字符绘制到图片上,并制定位置(设置x,y坐标)
graphics.drawString(codeChar[index] + "", (i * 20) + 15, 30);
captcha += codeChar[index];
}
for (int i = 0; i < 20; i++) {
int x = random.nextInt(IMG_HEIGHT);
int y = random.nextInt(IMG_WIDTH);
int xl = random.nextInt(20);
int yl = random.nextInt(20);
graphics.drawLine(x, y, x + xl, y + yl);
}
// 将生成的验证码code放入sessoin中
request.getSession().setAttribute("code", captcha);
// 通过ImageIO将图片输出
ImageIO.write(bi, "JPG", response.getOutputStream());
}