JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现

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回传的登陆错误的用户名和密码了，我们应该优先级显示上次错误的用户名和密码优先级更高

 

这里我们需要对代码进行处理

 <td><input class="input" type="text" name="loginname" id="loginname" value="${user.loginname}"/></td>

${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>
复制代码

 

posted on   luzhouxiaoshuai  阅读(12858)  评论(0)  编辑  收藏  举报

编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示
AI IDE Trae