JavaWeb網上圖書商城完整項目--day02-17.登錄功能頁面實現

本文轉載自查看原文 2017-05-15 15:02 9282 java web

1、當在登陸頁面點擊登陸按鈕的時候，會調用UserServlet的login方法，我們要在login.jsp中進行配置

2、要在login.jsp中處理Servlet在后台業務操作之后forward到login.jsp中顯示的錯誤信息，例如用戶名密碼錯誤、該用戶未激活等，這個時候就要修改login.jsp頁面

我們來看看login.jsp的代碼

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>登錄</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.css'/>">
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
    <script src="<c:url value='/js/common.js'/>"></script>
    <!-- 引入login.js文件 -->
    <script type="text/javascript" src="<c:url value='/jsps/js/user/login.js'/>"></script>

  </head>
  
  <body>
    <div class="main">
      <div><img src="<c:url value='/images/logo.gif'/>" /></div>
      <div>
        <div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div>
        <div class="login1">
          <div class="login2">
            <div class="loginTopDiv">
              <span class="loginTop">傳智會員登錄</span>
              <span>
                <a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a>
              </span>
            </div>
            <div>
              <form target="_top" action="<c:url value='/UserServlet'/>" method="post" id="loginForm">
                <input type="hidden" name="method" value="login" />
                  <table>
                    <tr>
                      <td width="50"></td>
                      <td><label class="error" id="msg">${msg}</label></td>
                    </tr>
                    <tr>
                      <td width="50">用戶名</td>
                      <td><input class="input" type="text" name="loginname" id="loginname" value="${user.loginname}"/></td>
                    </tr>
                    <tr>
                      <td height="20">&nbsp;</td>
                      <td><label id="loginnameError" class="error">${errors.loginname}</label></td>
                    </tr>
                    <tr>
                      <td>密　碼</td>
                      <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass}"/></td>
                    </tr>
                    <tr>
                      <td height="20">&nbsp;</td>
                      <td><label id="loginpassError" class="error">${errors.loginpass }</label></td>
                    </tr>
                    <tr>
                      <td>驗證碼</td>
                      <td>
                        <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value=""/>
                        <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/>
                        <a id="verifyCode">換張圖</a>
                      </td>
                    </tr>
                    <tr>
                      <td height="20px">&nbsp;</td>
                      <td><label id="verifyCodeError" class="error">${errors.verifyCode }</label></td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                      <td align="left">
                        <input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/>
                      </td>
                    </tr>                                                                                
                 </table>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2、當用戶登陸之后會重定向到index.jsp，瀏覽器會重新訪問index.jsp主頁面

我們來看看index.jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:forward page="/jsps/main.jsp"/>

index.jsp會反復問main.jsp目錄

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>main</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/main.css'/>">
  </head>
  
  <body>
<table class="table" align="center">
    <tr class="trTop">
        <td colspan="2" class="tdTop">
            <iframe frameborder="0" src="<c:url value='/jsps/top.jsp'/>" name="top"></iframe>
        </td>
    </tr>
    <tr>
        <td class="tdLeft" rowspan="2">
            <iframe frameborder="0" src="<c:url value='/jsps/left.jsp'/>" name="left"></iframe>
        </td>
        <td class="tdSearch" style="border-bottom-width: 0px;">
            <iframe frameborder="0" src="<c:url value='/jsps/search.jsp'/>" name="search"></iframe>
        </td>
    </tr>
    <tr>
        <td style="border-top-width: 0px;">
            <iframe frameborder="0" src="<c:url value='/jsps/body.jsp'/>" name="body"></iframe>
        </td>
    </tr>
</table>
  </body>
</html>

main.jsp又會加載body top的jsp，最終顯示的效果如下：

對於top.jsp頂部的顯示，我們應該依據當前用戶是否登陸顯示不同的內容

我們來看看代碼：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>top</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<style type="text/css">
    body {
        background: #15B69A;
        margin: 0px;
        color: #ffffff;
    }
    a {
        text-transform:none;
        text-decoration:none;
        color: #ffffff;
        font-weight: 900;
    } 
    a:hover {
        text-decoration:underline;
    }
</style>
  </head>
  
  <body>
<h1 style="text-align: center;">傳智播客網上書城系統</h1>
<div style="font-size: 10pt; line-height: 10px;">
<%--依據用戶是否登陸顯示不同的連接 --%>
<c:choose>
  <c:when test="${empty  sessionScope.sessionUser}">
        <a href="<c:url value='/jsps/user/login.jsp'/>" target="_parent">傳智會員登錄</a> |&nbsp; 
      <a href="<c:url value='/jsps/user/regist.jsp'/>" target="_parent">注冊傳智會員</a>
  </c:when>
  
  <c:otherwise>
   傳智會員：張三&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/cart/list.jsp'/>" target="body">我的購物車</a>&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/order/list.jsp'/>" target="body">我的傳智訂單</a>&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/user/pwd.jsp'/>" target="body">修改密碼</a>&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/user/login.jsp'/>" target="_parent">退出</a>    
  </c:otherwise>
  
</c:choose>
 
    



</div>
  </body>
</html>

我們來看看程序的運行效果：

接下來要實現這個效果，當在瀏覽器中進入登陸頁面的時候，要將瀏覽器中保存的cookie用戶名顯示出來：

同時需要注意的是：

上面的fdsa就是回顯的用戶名，用戶使用fdsa登陸之后，Servlet后台判斷該用戶登陸密碼不對，forward到login.jsp,這個時候要把剛剛輸入的用戶名和密碼顯示出來，這里顯示fdsa就是剛剛輸入的用戶名和密碼。

所謂的cookie用戶指的是，一個用戶登陸成功之后，這個時候后台Servlet會把當前登陸成功的用戶名返回給瀏覽器

 request.getSession().setAttribute("sessionUser", user);
              //將用戶名保存到cookie中,因為cookie不支持中文使用URL進行編碼
               Cookie cookie = new Cookie("cookieLoginName", URLEncoder.encode(user.getLoginname(), "utf-8")); cookie.setMaxAge(60*60*24);//cookie的有效期是一天 //添加cookie對象,把cookier對象返回給瀏覽器 response.addCookie(cookie);

這個時候瀏覽器就會把cookie對象的值保存到瀏覽器中，我們可以設置瀏覽器保存cookie的時間長度，例如一周。

當一周之后我們重新打開瀏覽器的時候，這個時候進入頁面應該從瀏覽器中獲得cookie保存的用戶名，在用戶名中顯示出來。

但是存在下面的問題：

所以進入login.jsp頁面是顯示上次登陸成功之后瀏覽器保存的cookie的用戶名，還是顯示Servlet回傳的登陸錯誤的用戶名和密碼了，我們應該優先級顯示上次錯誤的用戶名和密碼優先級更高

這里我們需要對代碼進行處理

${user.loginname}這里就是用戶回傳的用戶名和密碼

在Servlet中設置的值

  Map errors = validateLoginParams(formUser, request);
          if(errors.size() > 0){//說明參數錯誤，跳轉到注冊界面提示用戶輸入的參數有誤
              request.setAttribute("errors", errors); request.setAttribute("user", formUser); return "f:/jsps/user/login.jsp"; }

所以進入login.jsp頁面是顯示上次登陸成功之后瀏覽器保存的cookie的用戶名，還是顯示Servlet回傳的登陸錯誤的用戶名和密碼了，優先級顯示上次錯誤的用戶名和密碼優先級更高，我們要修改login.jsp的代碼

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>登錄</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.css'/>">
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
    <script src="<c:url value='/js/common.js'/>"></script>
    <!-- 引入login.js文件 -->
    <script type="text/javascript" src="<c:url value='/jsps/js/user/login.js'/>"></script>
    <%--這里判斷是顯示曾經登陸成功的cookie的用戶名，還是顯示登陸回顯的用戶名和密碼 --%>
    <script type="text/javascript">
      $(function(){
      //獲得cookie中的用戶名
       var loginname = window.decodeURI("${cookie.cookieLoginName.value}");
       if("${requestScope.user.loginname}"){
        //說明存在剛剛輸入的錯誤的用戶名和密碼,優先使用這個值，不使用cookie的值
        loginname = "${requestScope.user.loginname}";              
       }
       $("#loginname").val(loginname);//進行賦值
      
      });
    </script>

  </head>
  
  <body>
    <div class="main">
      <div><img src="<c:url value='/images/logo.gif'/>" /></div>
      <div>
        <div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div>
        <div class="login1">
          <div class="login2">
            <div class="loginTopDiv">
              <span class="loginTop">傳智會員登錄</span>
              <span>
                <a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a>
              </span>
            </div>
            <div>
              <form target="_top" action="<c:url value='/UserServlet'/>" method="post" id="loginForm">
                <input type="hidden" name="method" value="login" />
                  <table>
                    <tr>
                      <td width="50"></td>
                      <td><label class="error" id="msg">${msg}</label></td>
                    </tr>
                    <tr>
                      <td width="50">用戶名</td>
                      <td><input class="input" type="text" name="loginname" id="loginname" value=""/></td>
                    </tr>
                    <tr>
                      <td height="20">&nbsp;</td>
                      <td><label id="loginnameError" class="error">${errors.loginname}</label></td>
                    </tr>
                    <tr>
                      <td>密　碼</td>
                      <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass}"/></td>
                    </tr>
                    <tr>
                      <td height="20">&nbsp;</td>
                      <td><label id="loginpassError" class="error">${errors.loginpass }</label></td>
                    </tr>
                    <tr>
                      <td>驗證碼</td>
                      <td>
                        <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value=""/>
                        <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/>
                        <a id="verifyCode">換張圖</a>
                      </td>
                    </tr>
                    <tr>
                      <td height="20px">&nbsp;</td>
                      <td><label id="verifyCodeError" class="error">${errors.verifyCode }</label></td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                      <td align="left">
                        <input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/>
                      </td>
                    </tr>                                                                                
                 </table>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我們來對上面的代碼進行詳細分析下：

第一：為啥不把業務功能封裝到login.js中實現了，而這里在login.jsp中實現了

//獲得cookie中的用戶名
       var loginname = window.decodeURI("${cookie.cookieLoginName.value}");
       if("${requestScope.user.loginname}"){
        //說明存在剛剛輸入的錯誤的用戶名和密碼,優先使用這個值，不使用cookie的值
        loginname = "${requestScope.user.loginname}";              
       }
       $("#loginname").val(loginname);//使用jquery進行賦值

因為在單獨的js文件中無法使用el標簽，單獨js文件不能用el表達式，就只在在jsp中實現業務功能

${cookie.cookieLoginName.value}使用的el標簽獲得cookier的值

${cookie.name}將獲得對應cookie的對象，比如我們用jsp將一段cookie發送給客戶端。

Cookie cookie = new Cookie("username", "Username in cookie");
response.addCookie(cookie);

創建一個名稱為username，值為"Username in cookie"的Cookie對象，然后發送給客戶端。

然后我們就可以使用${cookie.username}獲得這個cookie了，${cookie.username.name}獲得cookie名稱，${cookie.username.value}獲得cookie值。

${requestScope.user.loginname}是獲得session中保存的用戶名

$("#loginname").val(loginname);//使用jquery進行對id是

loginname的input對象賦值，只有input對象才具有val屬性

 window.decodeURI表示的是decodeURI() 函數可對 encodeURI() 函數編碼過的 URI 進行解碼，因為在Servlet中的cookie為了解決中文亂碼使用了URLencode編碼



通過上面的操作就達到了整個登陸的流程，所以整個登陸的操作流程就已經解決了。
用戶登陸成功之后，需要在主頁面顯示當前登陸的用戶名

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>top</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<style type="text/css">
    body {
        background: #15B69A;
        margin: 0px;
        color: #ffffff;
    }
    a {
        text-transform:none;
        text-decoration:none;
        color: #ffffff;
        font-weight: 900;
    } 
    a:hover {
        text-decoration:underline;
    }
</style>
  </head>
  
  <body>
<h1 style="text-align: center;">傳智播客網上書城系統</h1>
<div style="font-size: 10pt; line-height: 10px;">
<%--依據用戶是否登陸顯示不同的連接 --%>
<c:choose>
  <c:when test="${empty  sessionScope.sessionUser}">
        <a href="<c:url value='/jsps/user/login.jsp'/>" target="_parent">傳智會員登錄</a> |&nbsp; 
      <a href="<c:url value='/jsps/user/regist.jsp'/>" target="_parent">注冊傳智會員</a>
  </c:when>
  
  <c:otherwise>
   傳智會員：${sessionScope.sessionUser.loginname}&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/cart/list.jsp'/>" target="body">我的購物車</a>&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/order/list.jsp'/>" target="body">我的傳智訂單</a>&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/user/pwd.jsp'/>" target="body">修改密碼</a>&nbsp;&nbsp;|&nbsp;&nbsp;
  <a href="<c:url value='/jsps/user/login.jsp'/>" target="_parent">退出</a>    
  </c:otherwise>
  
</c:choose>
 
    



</div>
  </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaWeb網上圖書商城完整項目--day02-20.修改密碼各層實現 JavaWeb網上圖書商城完整項目--day02-28.查詢所有分類功能之left頁面使用Q6MenuBar組件顯示手風琴式下拉菜單完整項目：網上圖書商城（一、MySQL數據庫設計）未完 JavaWeb之網上圖書商城-框架搭建 JAVAWEB貴美網上商城完整項目源碼(SSH2) Javaweb實現的優優圖書商城(含源碼) 圖書商城項目總論【SSH網上商城項目實戰17】購物車基本功能的實現 JavaWeb項目--網上商城（6-1） JavaWeb項目--網上商城（6-3）