JavaWeb - 仿小米商城网(3) :登录与退出
1 业务描述
接上篇仿小米商城网（2）：用户注册，本篇博客将分析和实现用户登录与退出。登录是后台获取当前访客身份的方式，也是提供个性化服务的基础。
执行登录时：用户在访问网站的任意页面时均可点击 <header></header> 区域中的登录按钮跳转到登录页面进行登录操作。相应的前端页面如下方H5页面所示：
登录页面的主要操作在右侧的一系列输入栏完成，用户根据前端提供的引导信息，在对应的输入栏内填写自己在注册时预留的 账号 和 密码 和 验证码，然后后点击 登录 按钮后完成身份信息提交。后端经一些列身份核验逻辑后向前端反馈登陆结果。
执行退出时：用户只需点击<header></header> 区域中的退出按钮即可实现退出登陆的功能。
另外，登录页面中还预留了自动登录功能。这个功能不算难，需要额外添加的代码也非常少.
2 业务分析
2.1 业务流程抽象
2.1.1 登录信息核验
登录需要用户在前端页面中填充个人身份信息和验证码并提交。这些内容在前端被 <form></form> 标签包裹。为 登录 绑定一个单机事件，当用户点击 登录 时，向后端发送一个 AJAX 形式的 POST 请求将表单数据提交至后端处理。
后端在接收到请求数据后，首先做 验证码 校验，在本案例中，验证码由后端生成并完成校验。然后再核对其它身份信息，核对方式为：
将表单信息作为数据库查询条件向 tab_user 表中查询记录
若能从数据库中查询到用户信息，则后端会获取一个 User 对象，否则会获取 null，登录失败，在登陆页面反馈失败信息。
获取 User 对象后，还要进一步核验其 status 属性是否为 Y 状态（激活）：是则，将 User 对象加入到 Session 对象中，登录成功；否则登录失败，在登陆页面反馈失败信息。
2.1.2 用户信息展示
在登录成功的情况下，会在网站中任意页面的 <header> 标签中显示登录用户的个人信息。前端的代码中已经将 <header> 部分单独定义在一个 header.html 文件中，每个页面都会加载这个文件来渲染页面信息。
可以在 <header> 标签中定义一个 AJAX 形式的 GET 请求，后端专门定义一个查询方法 findOne() 来负责此请求，该方法可以直接从 Session 对象中获取登录用户对象，并将用户的信息回写给前端。前端在收到用户信息后，将页面渲染切换至已登录状态的渲染形式。
2.2 退出登录
对于此功能，将前端的 <header> 标签中的 退出 文本使用 <a> 标签包围。点击 退出 时会向后端发送一个 GET 请求，在后端定义一个退出方法 exit() 负责此请求，该方法会从 Session 对象中删除 User 对象，并重定向至登录页面。
2.2 可能的技术难点与解决策略
登录状态判定逻辑链
3 代码实现
3.1 登录信息校验
3.1.1 前端
<script>
$(function () {
// 当表单提交时调用所有的校验方法
$("#userLogin").submit(function () {
// 1.发送数据到服务器
// 校验成功
// 发送AJAX请求，提交表单数据 username=Alex&password=123 ...
$.post("user.do?action=userLogin", $(this).serialize(), function (data) {
var jsObj = JSON.parse(data);
// 处理响应数据 data {flag:true/false, errorMsg:"..."}
if (jsObj.flag== true) { // 注册成功
// 跳转成功页面
location.href = "index.html";
} else { // 注册失败
// 在注册页面添加提示信息
$("#logMsg").html(jsObj.errorMsg);
}
});
// 2.跳转页面
return false;
});
});
</script>3.1.2 Servlet
@WebServlet(value = "/user.do")
public class UserServlet extends BaseServlet{
//...
/**
* 验证用户信息
* @param request
* @param response
* @return
*/
public String userLogin(HttpServletRequest request,HttpServletResponse response){
String username = request.getParameter("username");
String password = request.getParameter("password");
String autoDayStr = request.getParameter("auto");
System.out.println("autoDayStr=[" +autoDayStr +"]");
IUserService userService = new UserServiceImpl();
User user = userService.userLogin(username,password);
if (user!=null){
//用户登录成功后存储凭证到session
request.getSession().setAttribute("LOGINUSER",user);
resultData.setFlag(true);
//判断是否需要存储凭证
//如果是勾选了,就创建cookie对象,并对需要保存的用户名密码进行加密
//设置cookie的保存时间为14天 14*24*60*60
if (autoDayStr != null){
String bs64us= Base64Utils.encode(username);
String bs64psw = Base64Utils.encode(password);
//加密(这是简易加密,可以给其进行加盐处理)
Cookie uc = new Cookie("username",bs64us);
Cookie pwd = new Cookie("telephone",bs64psw);
//设置Cookie过期时间为一周
uc.setMaxAge(14*24*60*60);
pwd.setMaxAge(14*24*60*60);
//向客户端发送cookie
response.addCookie(uc);
response.addCookie(pwd);
}
}else {
resultData.setErrorMsg("登录失败:密码错误");
}
String json = JSON.toJSONString(resultData);
System.out.println(json);
//在响应中声明返回的是json格式字符串
response.setContentType("application/json;charset=utf-8");
return json;
}
//...
}3.1.3 Service
public class UserServiceImpl implements IUserService {
//...
/**
* 登录验证
* @param username
* @param password
* @return
*/
@Override
public User userLogin(String username, String password) {
User u = new User();
u.setUsername(username);
u = userDao.findDataByUser(u);
String md5pwd = MD5Utils.md5(password);
if (u!=null){
if ( md5pwd.equals(u.getPassword())){//对比密码
if (u.getFlag()==1){//验证是否激活
return u;
}
}
}
return null;
}
//...
}3.1.4 Dao
public class UserDaoImpl implements IUserDao {
//...
@Override
public User findDataByUser(User user) {
User u=null;
String sql ="select * from tb_user where 1=1";
String parms ="";
if (user.getEmail()!=null && !user.getEmail().equals("")){
sql +=" and email=?";
parms = user.getEmail();
}else if (user.getUsername()!=null && !user.getUsername().equals("")){
sql +=" and username=?";
parms = user.getUsername();
}else {
return null;
}
try {
u = queryRunner.query(DBUtils.getConn(),sql, parms, new BeanHandler<>(User.class));
if (u!=null){
return u;
}
} catch (SQLException e) {
e.printStackTrace();
}
return u;
}
//...
}3.2 登录后的信息回显
3.2.1 前端
提取一个公共的头部文件head.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/login2.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>头部</title>
<script type="text/javascript">
$(document).ready(function () {
//获取用户登录状态的
$.get("user.do?action=checkUserLogin", "username=" + this.value, function (result) {
if (result.flag === true) {//登录
var temp = '欢迎回来,<a href="userAddress?flag=show" id="a_top">'+result.data.username+'</a>' +
'<li>|</li>' +
'<a href="userservlet?method=logOut" id="a_top">注销</a> ' +
'<li>|</li>' +
'<a href="getOrderList" id="a_top">我的订单</a> ' +
' <li>|</li> ' +
'<a href="userservlet?method=getAddress" id="a_top">地址管理</a>' +
'<a href="" id="a_top">消息通知</a> ' +
'<a href="cartservlet?method=getCart" id="shorpcar">购物车</a> ';
$("#showuser").html(temp);
} else {
var temp = '<a href="login.html" id="a_top">登录</a> ' +
'<li>|</li>' +
'<a href="register.html" id="a_top">注册</a> ' +
'<a href="" id="a_top">消息通知</a> ' +
'<a href="cartservlet?method=getCart" id="shorpcar">购物车</a>';
$("#showuser").html(temp);
}
})
//获取商品类别的
$.ajax({
url: "${pageContext.request.contextPath}/goodsTypeAjax",
type: "GET",
dataType: "json",
success: function (data) {
for (var i in data) {
var a = $("<a href='/getGoodsListByTypeId?typeid=" + data[i].id + "'>" + data[i].name + "</a>");
$("#goodsType").append(a);
}
},
error: function () {
// alert("失败");
}
})
})
</script>
</head>
<body>
<div id="top">
<div id="topdiv">
<span>
<a href="index.html" id="a_top" target="_blank">小米商城</a>
<li>|</li>
<a href="" id="a_top">小米商城移动版</a>
<li>|</li>
<a href="" id="a_top">问题反馈</a>
</span>
<span style="float:right" id="showuser">
<!-- 根据状态改变显示-->
</span>
</div>
</div>
<div id="second">
<a href="" id="seimg" style=" margin-top:23px;"><img id="logo" src="image/logo_top.png" width="55" height="54"/></a>
<a href="" id="seimg" style=" margin-top:17px;"><img id="gif" src="image/yyymix.gif" width="180" height="66"/></a>
<p id="goodsType">
<!-- 根据ajax 回调函数 填写数据 到此id中 -->
</p>
<form class="form-inline pull-right" style="margin-top: 40px;margin-right: 10px;">
<div class="form-group">
<input type="text" class="form-control" style="width: 400px" placeholder="搜索一下好东西...">
</div>
<button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-search"></span> 搜索
</button>
</form>
</div>
</body>
</html>编写一个加载该头部html的js代码,创建一个heardinclude.js文件
$(function (){
//前端包含
$.get("header.html",function (data){
$("#headtop").html(data)
})
})在其它需要用到呕吐不页面修改,修改方案如下
给予jQuery框架
<!-- 引入公共的代码-->
<script type="text/javascript" src="js/includeHeader.js"></script>
<!--通过js引入头部区域 建议写在body里面-->
<div id="headtop"></div>3.2.2 Servlet
@WebServlet(value = "/user.do")
public class UserServlet extends BaseServlet{
//...
/**
* 用户登录
* @param request
* @param response
* @return
*/
public String checkUserLogin(HttpServletRequest request,HttpServletResponse response){
//验证用户是否登录
//如果只是验证起在session是否有凭证
//TODO 做cooike方面的验证
resultData.setFlag(false);
User user =(User) request.getSession().getAttribute(Constants.LOGINUSER);
if (user!=null){
resultData.setFlag(true);
resultData.setData(user);
}
String json = JSON.toJSONString(resultData);
System.out.println(json);
//在响应中声明返回的是json格式字符串
response.setContentType("application/json;charset=utf-8");
return json;
}
//...
}添加一个退出功能 在UserServlet中
/**
* 退出登录方法
*/
public String exit(HttpServletRequest request, HttpServletResponse response) {
//TODO 消除cookie
request.getSession().invalidate();//销毁session
return Constants.REDIRECT+"/login.html";
}
);
return json;
}
//...
}添加一个退出功能 在UserServlet中
/**
* 退出登录方法
*/
public String exit(HttpServletRequest request, HttpServletResponse response) {
//TODO 消除cookie
request.getSession().invalidate();//销毁session
return Constants.REDIRECT+"/login.html";
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
