图片验证码以及记住密码登录
jsp页面
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.base64.js" type="text/javascript"></script>
</head>
<body onkeydown="keyLogin();" onload="getmcCookie();">
<div class="yuesu">
<div class="login_k" >
<input type="text" placeholder="请输入账号" id="name"><br>
<input type="password" placeholder="请输入密码" id="password"><br>
<input type="checkbox" id="autologin" title="记住密码" class="jzmminput" /> <label for="autologin" class="jzmmlable">记住密码</label><br>
<input type="text" placeholder="验证码" id="code" style="width:310px;"><img id="image" src="image.jsp" onclick="huanyizhang()"><br>
<a href="javascript:void(0);" onclick="login();" class="login_a" style="font-size:18px; width:100%; ">登 录</a>
</div>
</div>
</body>
<script type="text/javascript">
function keyLogin(){
if(event.keyCode == 13){ //按下回车键登录
login();
}
}
function login(){
var loginName = $("#name").val();
var password = $("#password").val();
var code =$("#code").val();
if(loginName == ""){
alert("请输入账号");
return;
}
if(password == ""){
alert("请输入密码");
return;
}
if(code== ""){
alert("请输入验证码");
return;
}
var checked =$("[type='checkbox']");//获取是否记住密码复选框
if($("#autologin").prop("checked")){//判断是否选中了记住密码的复选框
$.cookie("login_code",loginName,{ //调用jquery.cookie.js中的方法设置cookie中的用户名
path:'/',
expires:7
});
$.cookie("mcpwd",passsword,{ //调用jquery.cookie.js中的的方法设置cookie中的登录密码
path:'/',
expires:7
});
}else{
$.cookie("mcpwd",null,{
path:'/',
expires:-1 //-1表示不缓存
});
}
//下面用ajax处理逻辑...
.....
}
</script>
function huanyizhang() {
document.getElementById("image").src = "image.jsp?" + new Date();
document.getElementById("userimage").src = "image.jsp?" + new Date();
document.getElementById("mdsrimage").src = "image.jsp?" + new Date();
}
function getmcCookie() { //获取cookie
var loginCode = $.cookie("login_code"); //获取cookie中的用户名
var pwd = $.cookie("mcpwd"); //获取cookie中的登陆密码
if(loginCode) { //用户名存在的话把用户名填充到用户名文本框
$("#name").val(loginCode);
}
if(pwd) { //密码存在的话把密码填充到密码文本框
$("#password").val($.base64.decode(pwd));
$("#autologin").prop("checked", "true");
}
}
image.jsp
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.awt.Font"%>
<%@page import="java.awt.Graphics"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="java.util.Random"%>
<%@page import="java.awt.Color"%>
<%@ page language="java" contentType="image/JPEG; charset=UTF-8"
pageEncoding="UTF-8"%>
<%! //获取随机颜色
Color getRandColor(int fc,int bc){
Random random = new Random();
if(fc>255) fc=255;
if(bc>255) bc=255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r,g,b);
}
%>
<%
//设置页面不缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
//在内存中创建图像
int width = 60;
int height = 20;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取图形上下文
Graphics g = image.getGraphics();
//随机类
Random random = new Random();
//设定背景
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
//设定字体
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
//随机产生干扰线
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 100; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
//随机产生4位验证码
String[] codes = {"2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"};
String code = "";
for(int i=0;i<4;i++){
String str = codes[random.nextInt(codes.length)];
code += str;
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(str, 13 * i + 6, 16);
}
// 将认证码存入SESSION
session.setAttribute("code", code);
// 图象生效
g.dispose();
// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
//加上下面代码,运行时才不会出现java.lang.IllegalStateException: getOutputStream() has already been called ..........等异常
response.getOutputStream().flush();
response.getOutputStream().close();
response.flushBuffer();
out.clear();
out = pageContext.pushBody();
%>
controller
public class loginController {
@Autowired
private UserService userService;
@RequestMapping(value = "/login.shtml",method = {RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public Object login(HttpServletRequest request,String name,String password,String code){
Map<String,Object> map =new HashMap<String,Object>();
boolean flag=false;
String validateCode =(String)request.getSession().getAttribute("code");
if(code.toUpperCase().equals(validateCode.toUpperCase())){
User user = userService.getUserByNameAndPassword(name,password);
if(user != null){
request.getSession().setAttribute("user",user);
flag = true;
}else{
map.put("msg","密码错误");
}
}else{
map.put("msg","验证码错误");
}
map.put("flag",flag);
return map;
}
}
还差一个jquery.cookie,js,不想打了 ， 这个编辑器想吐槽下，要喷血了，要源码的直接找我。。。我是新手，大神手下留情
