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("border","1px solid red");}return flag;}// email校验function checkEmail(){const s = $("#email").val();//定义正则 itcast@163.comconst check = /^\w+@\w+\.\w+$/;const flag = check.test(s);if(flag){$("#email").css("border","");}else {$("#email").css("border","1px solid red");}//TODO 鼠标焦点丢失 使用Ajax验证在数据库中是否存在相同的emailreturn flag;}//校验姓名function checkName(){const s = $("#name").val();let flag = false;if(s!=null){$("#name").css("border","");flag = true;}else {$("#name").css("border","1px solid red");}return flag;}//校验验证码function checkCode(){const s = $("#validateCode").val();let flag = false;if(s!=null){$("#validateCode").css("border","");flag = true;}else {$("#validateCode").css("border","1px solid red");}return flag;}/*如果此方法：无返回或返回true，则表单提交返回false，则表单不提交*/$(function () {// 当表单提交时调用所有的校验方法$("#registerForm").submit(function () {// 1.发送数据到服务器if (checkUsername() &&         // 用户名校验checkPassword() &&          // 密码校验checkEmail() &&              // 邮箱校验checkCode()                  // 验证码校验) {         // 校验成功// 发送AJAX请求，提交表单数据    username=Alex&password=123 ...$.post("user/register", $(this).serialize(), function (data) {// 处理响应数据 data {flag:true/false, errorMsg:"..."}if (data["flag"]) { // 注册成功// 跳转成功页面location.href = "register_ok.html";} else {          // 注册失败// 在注册页面添加提示信息$("#errorMsg").html(data["errorMsg"]);}});} else { // 校验失败}// 2.跳转页面return false;});// 当某一个组件失去焦点时，调用对应的校验方法$("#username").blur(checkUsername);$("#password").blur(checkPassword);$("#email").blur(checkEmail);$("#name").blur(checkName);$("#telephone").blur(checkTelephone);$("#sex").blur(checkSex);$("#birthday").blur(checkBirthday);$("#check").blur(checkCode);})</script>

3.1.2 用户名邮箱校验的Servlet代码


@WebServlet(value = "/user.do")
public class UserServlet extends BaseServlet{/*** 用户登录* @param request* @param response* @return*/public String login(HttpServletRequest request, HttpServletResponse response){//http://localhost:8080/user.do?action=loginreturn "TODO这是用户登录功能";}/*** 验证用户名方法* @param request* @param response* @return*/public String checkUserName(HttpServletRequest request,HttpServletResponse response){IUserService userService  = new UserServiceImpl();User user = new User();//设置用户的 用户名String username = request.getParameter("username");user.setUsername(username);//验证用户是否正确boolean falg = userService.queryDataByUser(user);return  falg==false?"0":"1";}/*** 验证邮箱方法* @param request* @param response* @return*/public String checkUserEmail(HttpServletRequest request,HttpServletResponse response){IUserService userService  = new UserServiceImpl();User user = new User();//设置用户的邮箱地址String email = request.getParameter("email");user.setUsername(email);//传入用户boolean falg = userService.queryDataByUser(user);return  falg==false?"0":"1";}}

3.1.3 用户名邮箱校验的Service代码


public class UserServiceImpl implements IUserService {private IUserDao userDao = new UserDaoImpl();@Overridepublic boolean saveData(User user) {boolean flag = false;//用户名邮箱二次验证User u1 = new User();u1.setUsername(user.getUsername());User u2 = new User();u2.setEmail(user.getEmail());//一个放用户名,一个放邮箱if (!this.queryDataByUser(u1) && this.queryDataByUser(u2)){//密码md5加密后设置回去String md5 = MD5Utils.md5(user.getPassword());user.setPassword(md5);//生成激活码String activeCode = RandomUtils.createActive();user.setCode(activeCode);if (userDao.addDate(user)>=1){//发激活提示邮件EmailUtils.sendEmail(user);flag=true;}}return flag;}@Overridepublic boolean queryDataByUser(User user) {int n = userDao.findDataByUser(user);return n>=1?true:false;}//......
}

3.1.4 用户名邮箱校验的Dao代码


public class UserDaoImpl implements IUserDao {private QueryRunner queryRunner =null;public UserDaoImpl(){queryRunner = new QueryRunner();}@Overridepublic int addDate(User user) {int n =-1;String sql = "insert into tb_user(username,password,email,gender,flag,role,code) values(?,?,?,?,?,?,?)";//装载运行sql语句try {n = queryRunner.update(DBUtils.getConn(), sql,user.getUsername(),user.getPassword(),user.getEmail(),user.getGender(),user.getFlag(),user.getRole(), user.getCode());} catch (SQLException e) {e.printStackTrace();}return n;}@Overridepublic int findDataByUser(User user) {int n =-1;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 n;}try {User u = queryRunner.query(DBUtils.getConn(),sql, parms, new BeanHandler<>(User.class));if (u!=null){n= 10;}} catch (SQLException e) {e.printStackTrace();}return n;}//......
}

3.2 用户注册表单提交

3.2.1注册表单数据验证与提交主函数

/*如果此方法：无返回或返回true，则表单提交返回false，则表单不提交*/$(function () {// 当表单提交时调用所有的校验方法$("#registerForm").submit(function () {// 1.发送数据到服务器if (checkUsername() &&           // 用户名校验checkPassword() &&          // 密码校验checkEmail() &&              // 邮箱校验checkCode()                  // 验证码校验) {         // 校验成功// 发送AJAX请求，提交表单数据    username=Alex&password=123 ...$.post("user.do?action=register", $(this).serialize(), function (data) {var jsObj = JSON.parse(data);// 处理响应数据 data {flag:true/false, errorMsg:"..."}if (jsObj.flag== true) {   // 注册成功// 跳转成功页面location.href = "registerSuccess.html";} else {          // 注册失败// 在注册页面添加提示信息$("#errorMsg").html(data["errorMsg"]);}});} else { // 校验失败}// 2.跳转页面return false;});// 当某一个组件失去焦点时，调用对应的校验方法$("#username").blur(checkUsername);$("#password").blur(checkPassword);$("#email").blur(checkEmail);$("#validateCode").blur(checkCode);})

3.2.2注册表单数据Servlet

/*** 邮箱激活* @param req* @param resp* @return*/
public String activate(HttpServletRequest req, HttpServletResponse resp) {String mesg="用户激活失败,请重试";String emailB64=req.getParameter("e");String email= Base64Utils.decode(emailB64);String codeB64=req.getParameter("c");String code=Base64Utils.decode(codeB64);IUserService userService=new UserServiceImpl();User user=new User();user.setEmail(email);user.setCode(code);//如果有html链接内容输出要设置响应resp.setContentType("text/html;charset=utf-8");user.setFlag(1);if (userService.activate(user)){mesg="用户激活成功,请< a href=' '>登录</ a>";mesg= Constants.FORWARD+"message.html";}return mesg;
}

3.2.3注册用户的Service


@Override
public boolean activate(User user) {int n = userDao.updateUserState(user);return n >= 1 ? true : false;
}

3.2.4注册用户的Dao

/*** 修改用户状态* @param user* @return*/
@Override
public int updateUserState(User user) {int n=-1;String sql="update tb_user set flag=? where code=? and email=?";try {n = queryRunner.update(DBUtils.getConn(), sql,user.getFlag(),user.getCode(), user.getEmail());} catch (SQLException e) {e.printStackTrace();}return n;
}

3.3邮件激活

3.3.1 Servlet


@WebServlet(value = "/user.do")
public class UserServlet extends BaseServlet{//....
/*** 激活方法* @param request* @param response* @return*/public String activate(HttpServletRequest request,HttpServletResponse response){String mesg = "用户激活失败,请重试";String emailB64 = request.getParameter("e");String email = Base64Utils.decode(emailB64);//解密String codeB64 = request.getParameter("c");String code = Base64Utils.decode(codeB64);IUserService userService = new UserServiceImpl();User user = new User();user.setCode(code);user.setEmail(email);//人如果有html内容输出要设置响应response.setContentType("text/hrml;charset=utf-8");user.setFlag(1);if (userService.activete(user)){mesg="用户激活成功,请<a href='login.html'>登录</a>";}return mesg;}//....

3.3.2 Service


public class UserServiceImpl implements IUserService {
//.../*** 激活方法* @param user* @return*/@Overridepublic boolean activete(User user) {int n = userDao.updateUserState(user);return n>1?true:false;}
}
//...

3.3.3 Dao

public class UserDaoImpl implements IUserDao {//...
/*** 修改用户状态方法* @param user* @return*/@Overridepublic int updateUserState(User user) {int n =-1;String sql =  "update tb_user set flag = 1 where code=? and email=?";//装载运行sql语句try {n = queryRunner.update(DBUtils.getConn(), sql,user.getFlag(),user.getEmail(), user.getCode());} catch (SQLException e) {e.printStackTrace();}return n;}//...

va
public class UserDaoImpl implements IUserDao {
//…
/**
* 修改用户状态方法
* @param user
* @return
*/
@Override
public int updateUserState(User user) {
int n =-1;
String sql = “update tb_user set flag = 1 where code=? and email=?”;
//装载运行sql语句
try {
n = queryRunner.update(DBUtils.getConn(), sql,user.getFlag(),user.getEmail(), user.getCode());
} catch (SQLException e) {
e.printStackTrace();
}
return n;
}
//…