bootstrapValidator 登录/验证码 JSP

1.JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>后台管理登录</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="${path}/portal/mana/css/login/bootstrap.css"/>
    <link rel="stylesheet" href="${path}/portal/mana/css/login/bootstrapValidator.css"/>
    <script type="text/javascript" src="${path}/portal/mana/scripts/login/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="${path}/portal/mana/scripts/login/bootstrap.min.js"></script>
    <script type="text/javascript" src="${path}/portal/mana/scripts/login/bootstrapValidator.js"></script>

    <style>
        body{
            background: url("${path}/portal/mana/img/login.png") fixed center center no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="auth-box">
    <div class="row">
        <div class="col-lg-5 col-lg-offset-3" style="margin-top: 25%;border: groove">
            <div class="page-header">
                <h3 style="text-align: center ;color: #0b5b97">后台管理登录</h3>
            </div>
            <form id="defaultForm" method="post" class="form-horizontal" action="${path}/portal/user/userLogin">
                <div class="form-group">
                    <label class="col-lg-2 control-label">用户名</label>
                    <div class="col-lg-9">
                        <input type="text" class="form-control" name="username" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">密码</label>
                    <div class="col-lg-9">
                        <input type="password" class="form-control" name="password" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">验证码</label>
                    <div class="col-lg-4">
                        <input type="text" class="form-control" name="code"  />  
                    </div>
                    <div class="col-lg-5">
                     <img id="imgObj" alt="验证码" src="${path}/portal/code/getCode">
								<a href="#" onclick="changeImg()">换一张</a>
                    </div>
                </div>
						<c:choose>
							<c:when test="${message== '' || message== null}">  
       
							</c:when>
							<c:otherwise> 
								<span style="color: red;">${message}</span>
							</c:otherwise>
						</c:choose>
						<div class="form-group">
                    <div class="col-lg-9 col-lg-offset-4">
                        <button type="submit" class="btn btn-primary" style="width: 40%">登录</button>
                    </div>
                </div>
                <hr>
            </form>
        </div>
    </div>
    </div>
</div>

<script language="javascript">//防止网页后退
 history.pushState(null, null, document.URL);
 window.addEventListener('popstate', function () {
     history.pushState(null, null, document.URL);
 });
</script>
<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '登录帐号不可用',
                    validators: {
                        notEmpty: {
                            message: '登录账号不能为空'
                        },
                        stringLength: {
                            min: 5,
                            max: 30,
                            message: '登陆账号长度必须在5~30之间'
                        },
                        remote: {
		                    type:"POST",
		                    message: '用户名不存在',
		                    url: '${path}/portal/user/checkUserName',
		                    data :
		                    {    
		                    	username:'username'
		                    },//这里默认会传递该验证字段的值到后端,
		                    delay: 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
		                },
                        regexp: {
                            regexp: /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){5,19}$/,
                            message: '用户名必须以字母开头（可带数字、“_”）'
                        }
                    }
                },
                code: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        },
		                 remote: {
		                    type:"POST",
		                    message: '验证码错误',
		                    url: '${path}/portal/code/checkCode',
		                    data :
		                    {    
		                    	code:'code'
		                    },//这里默认会传递该验证字段的值到后端,
		                    delay: 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
		                } 
                    }
                	
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
		                stringLength: {
		                    min: 6,
		                    max: 30,
		                    message: '密码长度必须在6~20之间'
		                }
                    }
                }
            }
        });
});
function changeImg() { 
	$("#code").val("");
    var imgSrc = $("#imgObj");    
    var src = imgSrc.attr("src");        
    imgSrc.attr("src", chgUrl(src));
}

// 时间戳
// 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
function chgUrl(url) {
    var timestamp = (new Date()).valueOf(); 
    url = url.substring(0, 20);
    if ((url.indexOf("&") >= 0)) {
        url = url + "×tamp=" + timestamp;
    } else {
        url = url + "?timestamp=" + timestamp;
    }
    return url;
}

}
</script>
</body>
</html>

2.登录controller

import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.MailParseException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.alibaba.fastjson.JSON;
import com.portal.model.User;
import com.portal.service.UserService;
import com.portal.util.MD5Util;

@Controller
@RequestMapping(value = "/user")
public class UserController {

	@Autowired
	private UserService userService;

	@RequestMapping(value = "/userLogin",  produces="text/html;charset=UTF-8")
	public ModelAndView login(HttpServletRequest request,HttpSession session) throws UnsupportedEncodingException {
		request.setCharacterEncoding("utf-8");
		ModelAndView mav = new ModelAndView(); 
		String userName= request.getParameter("username");
		String passWord= request.getParameter("password");
		String code = request.getParameter("code");
		String sessionCode = "";
		try {
			sessionCode = request.getSession().getAttribute("code").toString();
		} catch (NullPointerException e) {
			sessionCode = "";
		}
		 
		if (userName==null||"".equals(userName)||passWord==null||"".equals(passWord)||sessionCode==null||"".equals(sessionCode)) {
			mav.setViewName("/html/manage/manageLogin");
			return mav;	
		}else {
		if (code.equalsIgnoreCase(sessionCode)) {
			String pwd= MD5Util.MD5(passWord);
			User user= userService.login(userName, pwd);
			if (user!=null) {	
				session.setAttribute("user", user);
				mav.setViewName("/html/manage/lotteryInfo");
				return mav;
			}else {
				mav.setViewName("/html/manage/manageLogin");
				mav.addObject("message", "密码错误，请重新登录！");
				return mav;	
			}
			
		}else {
			mav.setViewName("/html/manage/manageLogin");
			mav.addObject("message", "验证码错误，请重新登录！");
			return mav;
		}
		}
	}

	@PostMapping(value = "/checkUserName")
	@ResponseBody
	public String checkUserName(String username) {
		HashMap<String,Boolean> hashMap = new HashMap();
		User user = userService.getUserByname(username);
        if (user != null ) {
             hashMap.put("valid",true);
           
        } else {
        	 hashMap.put("valid",false);
        }
        return JSON.toJSONString(hashMap);
		
	}
}

3.验证码controller

import java.awt.image.RenderedImage;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

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.omg.CORBA.PUBLIC_MEMBER;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.portal.util.CodeUtil;

@Controller
@RequestMapping(value = "/code")
public class CodeController {
	
	@RequestMapping(value = "/getCode")
	public String getCode(HttpServletRequest req, HttpServletResponse resp) {
		 // 调用工具类生成的验证码和验证码图片
        Map<String, Object> codeMap = CodeUtil.generateCodeAndPic();

        // 将四位数字的验证码保存到Session中。
        HttpSession session = req.getSession();
        session.setAttribute("code", codeMap.get("code").toString());

        // 禁止图像缓存。
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", -1);

        resp.setContentType("image/jpeg");

        // 将图像输出到Servlet输出流中。
        ServletOutputStream sos;
        try {
            sos = resp.getOutputStream();
            ImageIO.write((RenderedImage) codeMap.get("codePic"), "jpeg", sos);
            sos.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
		return null;
		
	}
	@PostMapping(value = "/checkCode")
	@ResponseBody
	public String checkCode(HttpServletRequest request,String code) {
		 HashMap<String,Boolean> hashMap = new HashMap();
        String sessionCode = request.getSession().getAttribute("code").toString();
        if (code != null && !"".equals(code) && sessionCode != null && !"".equals(sessionCode)) {
            if (code.equalsIgnoreCase(sessionCode)) {
            	  hashMap.put("valid",true);
            } else {
            	 hashMap.put("valid",false);
            }
        } else {
        	 hashMap.put("valid",false);
        }
        return JSON.toJSONString(hashMap);
	}
}

4.验证码工具类

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import javax.imageio.ImageIO;

public class CodeUtil {
    private static int width = 90;// 定义图片的width
    private static int height = 35;// 定义图片的height
    private static int codeCount = 4;// 定义图片上显示验证码的个数
    private static int xx = 15;
    private static int fontHeight = 24;
    private static  int codeY = 24;
    private static char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
    
    /**
     * 生成一个map集合
     * code为生成的验证码
     * codePic为生成的验证码BufferedImage对象
     * @return
     */
    public static Map<String,Object> generateCodeAndPic() {
        // 定义图像buffer
        BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // Graphics2D gd = buffImg.createGraphics();
        // Graphics2D gd = (Graphics2D) buffImg.getGraphics();
        Graphics gd = buffImg.getGraphics();
        // 创建一个随机数生成器类
        Random random = new Random();
        // 将图像填充为白色
        gd.setColor(Color.WHITE);
        gd.fillRect(0, 0, width, height);

        // 创建字体，字体的大小应该根据图片的高度来定。
        Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
        // 设置字体。
        gd.setFont(font);

        // 画边框。
        gd.setColor(Color.BLACK);
        gd.drawRect(0, 0, width - 1, height - 1);

        // 随机产生40条干扰线，使图象中的认证码不易被其它程序探测到。
        gd.setColor(Color.BLACK);
        for (int i = 0; i < 30; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            gd.drawLine(x, y, x + xl, y + yl);
        }

        // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
        StringBuffer randomCode = new StringBuffer();
        int red = 0, green = 0, blue = 0;

        // 随机产生codeCount数字的验证码。
        for (int i = 0; i < codeCount; i++) {
            // 得到随机产生的验证码数字。
            String code = String.valueOf(codeSequence[random.nextInt(36)]);
            // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
            red = random.nextInt(255);
            green = random.nextInt(255);
            blue = random.nextInt(255);

            // 用随机产生的颜色将验证码绘制到图像中。
            gd.setColor(new Color(red, green, blue));
            gd.drawString(code, (i + 1) * xx, codeY);

            // 将产生的四个随机数组合在一起。
            randomCode.append(code);
        }
        Map<String,Object> map  =new HashMap<String,Object>();
        //存放验证码
        map.put("code", randomCode);
        //存放生成的验证码BufferedImage对象
        map.put("codePic", buffImg);
        return map;
    }

    public static void main(String[] args) throws Exception {
        //创建文件输出流对象
        OutputStream out = new FileOutputStream("D://img/"+System.currentTimeMillis()+".jpg");
        Map<String,Object> map = CodeUtil.generateCodeAndPic();
        ImageIO.write((RenderedImage) map.get("codePic"), "jpeg", out);
        System.out.println("验证码的值为："+map.get("code"));
    }
}

https://download.csdn.net/download/qq_35348457/10401315

bootstrapValidator 登录/验证码 JSP

猜你喜欢