JavaWeb - 小米商城：登录与退出

原创

已于 2022-05-12 19:10:46 修改 · 1.1k 阅读

于 2022-05-12 19:10:32 首次发布

本文详细介绍了JavaWeb中实现小米商城用户登录与退出的业务流程，包括前端的H5页面设计、用户信息验证、登录状态的持久化以及登录后信息的回显。在登录环节，用户信息通过AJAX提交，后端进行身份验证并利用Session管理登录状态。退出功能则是通过点击退出按钮清除Session中的用户信息并重定向至登录页面。此外，文章还提及了自动登录功能的实现，涉及Session和Cookie的应用。

JavaWeb - 小米商城：登录与退出

1. 业务描述

接上篇小米商城：用户注册，本篇博客将分析和实现用户登录与退出。登录是后台获取当前访客身份的方式，也是提供个性化服务的基础。

执行登录时：用户在访问网站的任意页面时均可点击 <header></header> 区域中的登录按钮跳转到登录页面进行登录操作。相应的前端页面如下方H5页面所示

在这里插入图片描述

登录页面的主要操作在右侧的一系列输入栏完成，用户根据前端提供的引导信息，在对应的输入栏内填写自己在注册时预留的 账号 和 密码 和 验证码，然后后点击 登录 按钮后完成身份信息提交。后端经一些列身份核验逻辑后向前端反馈登陆结果。

在这里插入图片描述

执行退出时：用户只需点击 <header></header> 区域中的退出按钮即可实现退出登陆的功能。

另外，登录页面中还预留了自动登录功能，但是课程中并没有讲如何实现。笔者在完成全部的课上内容后也将这个功能实现了。这个功能不算难，需要额外添加的代码也非常少，但是思考并实现这个功能的过程还是蛮值得回味的。我打算在后面单独写一篇博客分析这个功能，届时也分享一下自己对 Session 和 Cookie 的理解吧。

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.1.2 退出登录

对于此功能，将前端的 <header> 标签中的退出文本使用 <a> 标签包围。点击退出时会向后端发送一个 GET 请求，在后端定义一个退出方法 exit() 负责此请求，该方法会从 Session 对象中删除 User 对象，并重定向至登录页面。

2.2 可能的技术难点与解决策略

登录状态判定逻辑链
在这里插入图片描述

3. 代码实现

3.1 登录信息校验

在这里插入图片描述

3.1.1 前端


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/login.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

<title>登录</title>
<script type="text/javascript">
	$(function(){
     
     
		//1.验证用户名是否存在
		$("#username").change(function(){
     
     
			$.get("user.do?action=checkUserName","username="+this.value,function(data){
     
     
				if(data==0){
     
     
					$("#nameMsg").html("用户名不存在").css("color","red");
				}else{
     
     
					$("#nameMsg").html("");
				}
			})
		});
		//2.点击验证码 跟新验证码
		$("#pagecode").click(function(){
     
     
			$("#pagecode").attr("src","captcha.do?d="+Math.random());
		});
		//3.验证输入的验证码 是否正确
		$("#vcode").change(function(){
     
     
			$.get("user.do?action=checkCode","code="+this.value,function(data){
     
     
				if(data==0){
     
     
					$("#checkMsg").html("<font color='green'>√</font>");
					$("#btn").removeAttr("disabled");
				}else{
     
     
					$("#checkMsg").html("<font color='red'>验证码错误</font>");
					// 验证码输入错误 则重新生成验证码
					$("#pagecode").attr("src","captcha.do?d="+Math.random());
					$("#btn").Attr("disabled",