JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
2024-10-09 07:28:35
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"> </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"> </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"> </td>
<td><label id="verifyCodeError" class="error">${errors.verifyCode }</label></td>
</tr>
<tr>
<td> </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> |
<a href="<c:url value='/jsps/user/regist.jsp'/>" target="_parent">注册传智会员</a>
</c:when> <c:otherwise>
传智会员：张三 |
<a href="<c:url value='/jsps/cart/list.jsp'/>" target="body">我的购物车</a> |
<a href="<c:url value='/jsps/order/list.jsp'/>" target="body">我的传智订单</a> |
<a href="<c:url value='/jsps/user/pwd.jsp'/>" target="body">修改密码</a> |
<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"> </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"> </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"> </td>
<td><label id="verifyCodeError" class="error">${errors.verifyCode }</label></td>
</tr>
<tr>
<td> </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:;
}
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> |
<a href="<c:url value='/jsps/user/regist.jsp'/>" target="_parent">注册传智会员</a>
</c:when> <c:otherwise>
传智会员：${sessionScope.sessionUser.loginname} |
<a href="<c:url value='/jsps/cart/list.jsp'/>" target="body">我的购物车</a> |
<a href="<c:url value='/jsps/order/list.jsp'/>" target="body">我的传智订单</a> |
<a href="<c:url value='/jsps/user/pwd.jsp'/>" target="body">修改密码</a> |
<a href="<c:url value='/jsps/user/login.jsp'/>" target="_parent">退出</a>
</c:otherwise> </c:choose> </div>
</body>
</html>
最新文章
- btrfs-snapper 实现Linux 文件系统快照回滚
- java 缓冲
- python(5)- sys.stdout()实现进度条
- Java项目中基于Hibernate分页总结
- Magento网站迁移指南
- MS-DOS命令列表
- css复合属性的写法
- SQL中EXISTS的用法(转)
- 逻辑回归的实现(LogicalRegression)
- C4.5算法（摘抄）
- NOIP2015 D2T3 洛谷2680 BZOJ4326 运输计划 解题报告
- 报错TypeError: $(...).live is not a function解决方法
- 数据分析三剑客之numpy
- mysql命令行的导入导出sql,txt,excel（都在linux或windows命令行操作）（转自筑梦悠然）
- DSSM：深度语义匹配模型（及其变体CLSM、LSTM-DSSM）
- 谈谈 iOS 中图片的解压缩
- 利用ONENET平台透传电脑截图
- MySql数据类型范围
- python3.5.2中文字符乱码问题解决
- Servlet笔记9--转发与重定向