JavaWeb - 仿小米商城网(2) 用户注册

最新推荐文章于 2024-01-09 22:53:35 发布

一念枫红

最新推荐文章于 2024-01-09 22:53:35 发布

阅读量467

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/YiShengZhu_/article/details/124715881

版权

本文详细介绍了在JavaWeb环境下仿照小米商城实现用户注册功能的完整过程，包括前端验证、Ajax请求检查用户名和邮箱、表单提交、邮件激活及相应的Servlet、Service和Dao代码实现。注册流程分为两阶段：信息收集与数据库保存，以及邮件激活验证。通过验证码防止批量注册，使用UUID确保激活码唯一性，并通过状态字段跟踪用户激活状态。

摘要由CSDN通过智能技术生成

JavaWeb - 仿小米商城网(2): 用户注册

1.业务描述

注册业务旨在收集和管理用户的个人信息，是未来提供个性化服务的基础。相应的前端页面如下方静态H5页面图所示：

在这里插入图片描述

网页中提供多个输入框，

并给出对应的提示信息，

逐步引导用户根据提示向输入框中填写信息。

最终点击下方的 注册 按钮完成用户注册。

前端Ajax验证用户名在输入后鼠标焦点丢失, 请求发送到Servlet, 检测用户是否在数据库存在, 不存在则可以注册, 不存在则可以注册.

前端Ajax验证邮箱在输入后鼠标焦点丢失, 请求发送到Servlet, 检测用户是否在数据库存在, 不存在则可以注册, 不存在则可以注册.

注册成功后跳转到成功提示页面

在这里插入图片描述

进一步地，为了验证联系方式的有效性，在完成注册功能后，前端还会提示用户执行 激活 操作：通过向用户注册时填写的邮箱发送验证邮件。在邮件正文中引导用户点击相应的超链接完成账户激活，并在激活页面提供登录链接，引导用户登录网站。整个注册业务流程完毕。

2 业务分析

2.1 业务流程抽象

在本案例中，注册业务分为两阶段：

注册阶段：用户根据前端页面的提示信息填写相应内容，进而提交至后台处理，最终将信息保存至数据库。
激活阶段：系统后台自动向用户填写的邮件地址发送一封激活邮件，邮件中包含一个激活链接。用户通过点击激活链接向服务器发送一个请求，服务器在接收到该请求后，再向用户浏览器回写激活成功信息。

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

1.避免机器人批量注册
添加验证码，优先核对，不满足直接跳出方法。（后续单独写一篇博客分析此功能）

2.如何保证激活用户的唯一性？
在 tab_user 表中添加字段：active_code 。它是一种保证唯一性的序列码，本案例中调用 Java 中的工具类 UUID 生成序列并作为用户的激活码。在用户注册时生成并与用户信息一并写入数据库，同时向用户提交的邮件地址发送一封带有激活码链接的邮件。只有用户在邮件中点击了这个链接，使用带有激活码的URL向服务器发出请求，服务器才能收到用户“发来的”激活码，并在后端完成校验并向用户端浏览器回写响应信息。

3.如何定义和处理激活状态？
在 tab_user 表中添加两个字段：status 。status 用于标注用户是否激活，它只有两种可能的取值：Y（已激活）和 N（未激活）。在用户刚刚提交注册表单时，后端在数据库中添加用户信息时对该字段设为 N，当用户在激活邮件中点击激活链接向服务器发送激活请求时，服务器在核对通过的前提下将该字段修改为 Y。

前端校验用户填写的表单信息：正则表达式校验，这里参考了暮光乐鱼的博客.

非空：.+
字符集：^\w{6,20}$
手机号：1(3|4|5|7|8)\d{9}
邮箱：^\w+(.\w+)*@\w+(.\w+)+$

3 代码实现

3.1 信息验证与提交

在这里插入图片描述

3.1.1 前端

通过Ajax异步验证用户名是否存在

	$(function(){
   
		$("#username").change(function(){
   
			//使用ajax 做username 的异步验证 checkUsername?username=xxxx
			$.get("user.do?action=checkUserName","username="+this.value,function(data){
   
				if(data==1){
   
					$("#usernameMsg").html("用户名已经存在").css("color","red");
					$("#registerBtn").attr("disabled",true);
				}else{
   
					$("#usernameMsg").html("用户名可用").css("color","green");
					$("#registerBtn").removeAttr("disabled");
				}
			})
		});
	})

通过Ajax验证用户邮箱是否存在

	//异步校验邮箱
	$(function(){
   
		$("#email").change(function(){
   
			//使用ajax 做username 的异步验证 checkUsername?username=xxxx
			$.get("user.do?action=checkUserEmail","username="+this.value,function(data){
   
				if(data==1){
   
					$("#emailMsg").html("用户名已经存在").css("color","red");
					$("#registerBtn").attr("disabled",true);
				}else{
   
					$("#emailMsg").html("用户名可用").css("color","green");
					$("#registerBtn").removeAttr("disabled");
				}
			})
		});
	})

表单数据验证与提交主函数

	<script>
		// 单词字符，8-12 用户名校验
		function checkUsername(){
   
			const s = $("#username").val();
			const check = /^\w{2,20}$/;
			const flag = check.test(s);
			if(flag){
   
				$("#username").css("border","");
			}else{
   
				$("#username").css("border","1px solid red");
			}
			return flag;
		}
		// 单词字符，8-12 密码校验
		function checkPassword(){
   
			const s = $("#password").val();
			const check = /^\w{4,20}$/;
			const flag = check.test(s);
			if(flag){
   
				$("#password").css("border","");
			}else{
   
				$("#password").css