JavaWeb - 仿小米商城网(3) 登录与退出

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