网上图书商城项目学习笔记-007登录功能实现

一、功能流程分析

二、代码

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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
79                       <td><label id="verifyCodeError" class="error">${errors.verifyCode }</label></td>
80                     </tr>
81                     <tr>
82                       <td>&nbsp;</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     }