一、功能流程分析
二、代码
1.view层
1）login.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 6 <html> 7 <head> 8 9 <title>登录</title> 10 11 <meta http-equiv="pragma" content="no-cache"> 12 <meta http-equiv="cache-control" content="no-cache"> 13 <meta http-equiv="expires" content="0"> 14 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 15 <meta http-equiv="description" content="This is my page"> 16 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 17 <!-- 18 <link rel="stylesheet" type="text/css" href="styles.css"> 19 --> 20 <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.css'/>"> 21 <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script> 22 <script type="text/javascript" src="<c:url value='/jsps/js/user/login.js'/>"></script> 23 <script src="<c:url value='/js/common.js'/>"></script> 24 <script> 25 $(function(){/*Map<String(Cookie名称),Cookie(Cookie本身)>*/ 26 var loginname = "${requestScope.user.loginname}" ? "${requestScope.user.loginname}" : window.decodeURI("${cookie.loginname.value}"); 27 $("#loginname").val(loginname); 28 }); 29 </script> 30 </head> 31 32 <body> 33 <div class="main"> 34 <div><img src="<c:url value='/images/logo.gif'/>" /></div> 35 <div> 36 <div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div> 37 <div class="login1"> 38 <div class="login2"> 39 <div class="loginTopDiv"> 40 <span class="loginTop">会员登录</span> 41 <span> 42 <a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a> 43 </span> 44 </div> 45 <div> 46 <form target="_top" action="<c:url value='/UserServlet'/>" method="post" id="loginForm"> 47 <input type="hidden" name="method" value="login" /> 48 <table> 49 <tr> 50 <td width="50"></td> 51 <td><label class="error" id="msg">${msg }</label></td> 52 </tr> 53 <tr> 54 <td width="50">用户名</td> 55 <td><input class="input" type="text" name="loginname" id="loginname" /></td> 56 </tr> 57 <tr> 58 <td height="20"> </td> 59 <td><label id="loginnameError" class="error">${errors.loginname }</label></td> 60 </tr> 61 <tr> 62 <td>密 码</td> 63 <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td> 64 </tr> 65 <tr> 66 <td height="20"> </td> 67 <td><label id="loginpassError" class="error">${errors.loginpass }</label></td> 68 </tr> 69 <tr> 70 <td>验证码</td> 71 <td> 72 <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }"/> 73 <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/> 74 <a id="verifyCode" href="javascript:_change()">换张图</a> 75 </td> 76 </tr> 77 <tr> 78 <td height="20px"> </td> 79 <td><label id="verifyCodeError" class="error">${errors.verifyCode }</label></td> 80 </tr> 81 <tr> 82 <td> </td> 83 <td align="left"> 84 <input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/> 85 </td> 86 </tr> 87 </table> 88 </form> 89 </div> 90 </div> 91 </div> 92 </div> 93 </div> 94 </body> 95 </html> 96
2)login.js
1 $(function() { 2 /* 3 * 1. 让登录按钮在得到和失去焦点时切换图片 4 */ 5 $("#submit").hover( 6 function() { 7 $("#submit").attr("src", "/goods/images/login2.jpg"); 8 }, 9 function() { 10 $("#submit").attr("src", "/goods/images/login1.jpg"); 11 } 12 ); 13 14 /* 15 * 2. 给注册按钮添加submit()事件，完成表单校验 16 */ 17 $("#loginForm").submit(function(){ 18 $("#msg").text(""); 19 var bool = true; 20 $(".input").each(function() { 21 var inputName = $(this).attr("name"); 22 if(!invokeValidateFunction(inputName)) { 23 bool = false; 24 } 25 }); 26 return bool; 27 }); 28 29 /* 30 * 3. 输入框得到焦点时隐藏错误信息 31 */ 32 $(".input").focus(function() { 33 var inputName = $(this).attr("name"); 34 $("#" + inputName + "Error").css("display", "none"); 35 }); 36 37 /* 38 * 4. 输入框推动焦点时进行校验 39 */ 40 $(".input").blur(function() { 41 var inputName = $(this).attr("name"); 42 invokeValidateFunction(inputName); 43 }) 44 }); 45 46 /* 47 * 输入input名称，调用对应的validate方法。 48 * 例如input名称为：loginname，那么调用validateLoginname()方法。 49 */ 50 function invokeValidateFunction(inputName) { 51 inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1); 52 var functionName = "validate" + inputName; 53 return eval(functionName + "()"); 54 } 55 56 /* 57 * 校验登录名 58 */ 59 function validateLoginname() { 60 var bool = true; 61 $("#loginnameError").css("display", "none"); 62 var value = $("#loginname").val(); 63 if(!value) {// 非空校验 64 $("#loginnameError").css("display", ""); 65 $("#loginnameError").text("用户名不能为空！"); 66 bool = false; 67 } else if(value.length < 3 || value.length > 20) {//长度校验 68 $("#loginnameError").css("display", ""); 69 $("#loginnameError").text("用户名长度必须在3 ~ 20之间！"); 70 bool = false; 71 } 72 return bool; 73 } 74 75 /* 76 * 校验密码 77 */ 78 function validateLoginpass() { 79 var bool = true; 80 $("#loginpassError").css("display", "none"); 81 var value = $("#loginpass").val(); 82 if(!value) {// 非空校验 83 $("#loginpassError").css("display", ""); 84 $("#loginpassError").text("密码不能为空！"); 85 bool = false; 86 } else if(value.length < 3 || value.length > 20) {//长度校验 87 $("#loginpassError").css("display", ""); 88 $("#loginpassError").text("密码长度必须在3 ~ 20之间！"); 89 bool = false; 90 } 91 return bool; 92 } 93 94 /* 95 * 校验验证码 96 */ 97 function validateVerifyCode() { 98 var bool = true; 99 $("#verifyCodeError").css("display", "none"); 100 var value = $("#verifyCode").val(); 101 if(!value) {//非空校验 102 $("#verifyCodeError").css("display", ""); 103 $("#verifyCodeError").text("验证码不能为空！"); 104 bool = false; 105 } else if(value.length != 4) {//长度不为4就是错误的 106 $("#verifyCodeError").css("display", ""); 107 $("#verifyCodeError").text("错误的验证码！"); 108 bool = false; 109 } else {//验证码是否正确 110 $.ajax({ 111 cache: false, 112 async: false, 113 type: "POST", 114 dataType: "json", 115 data: {method: "validateVerifyCode", verifyCode: value}, 116 url: "/goods/UserServlet", 117 success: function(flag) { 118 if(!flag) { 119 $("#verifyCodeError").css("display", ""); 120 $("#verifyCodeError").text("错误的验证码！"); 121 bool = false; 122 } 123 } 124 }); 125 } 126 return bool; 127 }
2.servlet层
1)UserServlet.java
1 public String login(HttpServletRequest request, HttpServletResponse response) throws IOException { 2 /* 3 * 1. 封装表单数据到User 4 * 2. 校验表单数据 5 * 3. 使用service查询，得到User 6 * 4. 查看用户是否存在，如果不存在： 7 * * 保存错误信息：用户名或密码错误 8 * * 保存用户数据：为了回显 9 * * 转发到login.jsp 10 * 5. 如果存在，查看状态，如果状态为false： 11 * * 保存错误信息：您没有激活 12 * * 保存表单数据：为了回显 13 * * 转发到login.jsp 14 * 6. 登录成功： 15 * * 保存当前查询出的user到session中 16 * * 保存当前用户的名称到cookie中，注意中文需要编码处理。 17 */ 18 19 // 1. 封装表单数据到user 20 User formUser = CommonUtils.toBean(request.getParameterMap(), User.class); 21 22 // 2. 校验 23 Map<String, String> errors = validateLogin(formUser, request.getSession()); 24 if(errors.size() > 0) { 25 request.setAttribute("errors", errors); 26 request.setAttribute("user", formUser); 27 return "f:/jsps/user/login.jsp"; 28 } 29 30 // 3. 调用userService#login()方法 31 User user = userService.login(formUser); 32 33 // 4. 开始判断 34 if(user == null) { 35 request.setAttribute("msg", "用户名或密码错误！"); 36 request.setAttribute("user", formUser); 37 return "f:/jsps/user/login.jsp"; 38 } 39 if(!user.isStatus()) { 40 request.setAttribute("msg", "您还没有激活！"); 41 request.setAttribute("user", formUser); 42 return "f:/jsps/user/login.jsp"; 43 } 44 // 保存用户到session 45 request.getSession().setAttribute("sessionUser", user); 46 // 获取用户名保存到cookie中 47 String loginname = URLEncoder.encode(user.getLoginname(), "utf-8"); 48 Cookie cookie = new Cookie("loginname", loginname); 49 cookie.setMaxAge(24 * 60 * 60 * 10);//保存10天 50 response.addCookie(cookie); 51 return "r:/index.jsp"; 52 } 53 54 /** 55 * 登录校验方法，内容待完成 56 * @param formUser 57 * @param session 58 * @return 59 */ 60 private Map<String, String> validateLogin(User formUser, HttpSession session) { 61 Map<String, String> errors = new HashMap<String, String>(); 62 // 1. 校验登录名 63 String loginname = formUser.getLoginname(); 64 if(loginname == null || loginname.trim().isEmpty()) { 65 errors.put("loginname", "用户名不能为空！"); 66 } else if(loginname.length() < 3 || loginname.length() > 20) { 67 errors.put("loginname", "用户名长度必须在3~20之间！"); 68 } 69 70 // 2. 校验登录密码 71 String loginpass = formUser.getLoginpass(); 72 if(loginpass == null || loginpass.trim().isEmpty()) 73 errors.put("loginpass", "密码不能为空！"); 74 else if(loginpass.length() < 3 || loginpass.length() > 20) 75 errors.put("loginpass", "密码长度必须在3~20之间！"); 76 77 // 3. 验证码校验 78 String verifyCode = formUser.getVerifyCode(); 79 String vCode = (String) session.getAttribute("vCode"); 80 if(verifyCode == null || verifyCode.trim().isEmpty()) { 81 errors.put("verifyCode", "验证码不能为空！"); 82 } else if(!verifyCode.equalsIgnoreCase(vCode)) { 83 errors.put("verifyCode", "验证码错误！"); 84 } 85 86 return errors; 87 }
3.service层
1)userService.java
1 /** 2 * 登录功能 3 * @param user 4 * @return 5 */ 6 public User login(User user) { 7 try { 8 return userDao.findByLoginnameAndLoginpass(user.getLoginname(), user.getLoginpass()); 9 } catch (SQLException e) { 10 throw new RuntimeException(e); 11 } 12 }
4.dao层
1)UserDao.java
1 /** 2 * 按用户名和密码查询 3 * @param loginname 4 * @param loginpass 5 * @return 6 * @throws SQLException 7 */ 8 public User findByLoginnameAndLoginpass(String loginname, String loginpass) throws SQLException { 9 String sql = "select * from t_user where loginname=? and loginpass=?"; 10 return qr.query(sql, new BeanHandler<User>(User.class), loginname, loginpass); 11 }