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"> </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>
JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现的更多相关文章
- JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现
1 .现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能 我们来看regist.js的代码 //该函数在html文档加载完成之后 ...
- JavaWeb网上图书商城完整项目--day02-5.ajax校验功能之服务器端三层实现
regist.jsp页面中有异步请求服务器来对表单进行校验: l 校验登录名是否已注册过: l 校验Email是否已注册过: l 校验验证码是否正确. 这说明在UserServlet中需要提供相 ...
- JavaWeb网上图书商城完整项目--day02-19.修改密码功能流程分析
我们来看看修改密码的业务流程操作:
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
- JavaWeb网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
- JavaWeb网上图书商城完整项目--12.项目所需jquery函数介绍之ajax
jquery中使用ajax发送异步请求 下面的一个案例在input输入框失去焦点的时候发送一个异步的请求: 我们来看程序的案例: 这里要强调的是返回值最好选择是json,json对应的就是对象,Jav ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
- JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
随机推荐
- Map接口之HashMap，LinkedHashMap，TreeMap
Map与Collection 并列存在,用于保存具有映射关系的数据:Key-Value Map中的Key和Value都可以是任何引用类型的数据 Map中的Key用Set存放,不允许重复,即同一个Map ...
- 实用教程丨使用K3s和MySQL运行Rancher 2.4
本文转自Rancher Labs 简 介 本文将介绍在高可用K3s Kubernetes集群上安装Rancher 2.4的过程并针对MySQL利用Microsoft Azure数据库的优势,该数据库消 ...
- [Python3]踩坑实录-优化技巧1
选择合适的数据结构 考虑不同的应用场景,应选择不同的数据结构 比如在查找多于插入的场景中,考虑字典Dict是不是更适合; 因为在Python3中, 字典Dict 通过hash把key映射到hash t ...
- 【朝夕专刊】RabbitMQ消息的持久化优先级
欢迎大家阅读<朝夕Net社区技术专刊> 我们致力于.NetCore的推广和落地,为更好的帮助大家学习,方便分享干货,特创此刊!很高兴你能成为忠实读者,文末福利不要错过哦! 上篇文章介绍了R ...
- Java实现 LeetCode 485 最大连续1的个数
485. 最大连续1的个数 给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数 ...
- Java实现 LeetCode 388 文件的最长绝对路径
388. 文件的最长绝对路径 假设我们以下述方式将我们的文件系统抽象成一个字符串: 字符串 "dir\n\tsubdir1\n\tsubdir2\n\t\tfile.ext" 表示 ...
- Java实现 蓝桥杯VIP 算法提高 能量项链
算法提高 能量项链 时间限制:1.0s 内存限制:256.0MB 问题描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记 ...
- Java实现 LeetCode 54 螺旋矩阵
54. 螺旋矩阵 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], ...
- java实现取字母组成串
** 取字母组成串** A B C D中取5次,每个字母都可以重复取出,形成一个串. 现在要求,串中A出现的次数必须为偶数(0次也算偶数). 求可以形成多少种可能的串. 参考答案: 528 publi ...
- java实现第七届蓝桥杯骰子游戏
骰子游戏 PS: 骰子哪有从0开始的只能是1-6,而他i j k的范围都是0-5,所以都要加1 题目描述 我们来玩一个游戏. 同时掷出3个普通骰子(6个面上的数字分别是1~6). 如果其中一个骰子上的 ...