一、注册用户-业务流程分析

1.页面效果

2.业务流程分析

二、注册用户-前端功能实现

修改register.html

1.校验用户名

2.校验密码

3.检验邮箱

4.使用ajax提交数据

5.完整代码参考

三、注册用户-后端功能实现

创建RegisterUserServlet

创建UserService

创建UserServiceImpl

创建UserDao

创建UserDaoImpl

四、测试

一、注册用户-业务流程分析

1.页面效果

2.业务流程分析

二、注册用户-前端功能实现

修改register.html

1.校验用户名

获取用户名

用户名格式要求，正则表达式限制

进行判断用户名是否符合

用户名合法无提示

用户名不合法，红色边框提示

2.校验密码

获取密码

密码格式要求，正则表达式限制

进行判断密码是否符合

密码合法无提示

密码不合法，红色边框提示

3.检验邮箱

获取邮箱

邮箱格式要求，正则表达式限制，注意邮箱格式

进行判断邮箱是否符合

合法无提示

不合法，红色边框提示

4.使用ajax提交数据

在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据

5.完整代码参考

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>注册</title><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" href="css/register.css"><!--导入jquery--><script src="js/jquery-3.3.1.js"></script><script>//校验用户名function checkUsername(){//获取用户名var username = $("#username").val();//用户名 8~32位var reg_username = /^\w{8,32}$/;//判断var flag = reg_username.test(username);if(flag){//用户名合法$("#username").css("border","");}else{//用户名不合法，红色边框$("#username").css("border","1px solid red");}return flag;}//校验密码function checkPassword(){//获取用户名var password = $("#password").val();//用户名 8~20位var reg_password = /^\w{8,20}$/;//判断var flag = reg_password.test(password);if(flag){//用户名合法$("#password").css("border","");}else{//用户名不合法，红色边框$("#password").css("border","1px solid red");}return flag;}//校验邮箱function checkEmail(){//获取用户名var email = $("#email").val();//用户名 8~20位var reg_email = /^\w+@\w+.\w+$/;//判断var flag = reg_email.test(email);if(flag){//用户名合法$("#email").css("border","");}else{//用户名不合法，红色边框$("#email").css("border","1px solid red");}return flag;}//使用ajax提交数据$(function (){$("#registerForm").submit(function (){//表单的校验if(checkUsername() && checkPassword() && checkEmail()){//表单数据合法 username=xxx&passwrod=xxx$.post("registerUserServlet",$(this).serialize(),function (data){//设计返回数据格式 data : {flag:true,errorMsg:"提示错误信息"}if (data.flag){//注册成功location.href="register_ok.html";//跳转到首页}else {$("#msg").html(data.errorMsg);}});};//表单较验失败return false;});//用户体验提升$("#username").blur(checkUsername);$("#password").blur(checkPassword);$("#email").blur(checkEmail);});</script></head><body><!--引入头部--><div id="header"></div><!-- 头部 end --><div class="rg_layout"><div class="rg_form clearfix"><div class="rg_form_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_form_center"><!--注册表单--><form id="registerForm"><!--提交处理请求的标识符--><input type="hidden" name="action" value="register"><table style="margin-top: 25px;"><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" id="username" name="username" placeholder="请输入账号"></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="text" id="password" name="password" placeholder="请输入密码"></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="text" id="email" name="email" placeholder="请输入Email"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" id="name" name="name" placeholder="请输入真实姓名"></td></tr><tr><td class="td_left"><label for="telephone">手机号</label></td><td class="td_right"><input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号"></td></tr><tr><td class="td_left"><label for="sex">性别</label></td><td class="td_right gender"><input type="radio" id="sex" name="sex" value="男" checked> 男<input type="radio" name="sex" value="女"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" id="birthday" name="birthday" placeholder="年/月/日"></td></tr><tr><td class="td_left"><label for="check">验证码</label></td><td class="td_right check"><input type="text" id="check" name="check" class="check"><img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)"><script type="text/javascript">//图片点击事件function changeCheckCode(img) {img.src="checkCode?"+new Date().getTime();}</script></td></tr><tr><td class="td_left"> </td><td class="td_right check"> <input type="submit" class="submit" value="注册"><span id="msg" style="color: red;"></span></td></tr></table></form></div><div class="rg_form_right"><p>已有账号？<a href="#">立即登录</a></p></div></div></div><!--引入尾部--><div id="footer"></div><!--导入布局js，共享header和footer--><script type="text/javascript" src="js/include.js"></script></body>
</html>

三、注册用户-后端功能实现

创建RegisterUserServlet

1.从session中获取验证码

2.删除session

3.验证码有误封装返回的数据对象

4.注册失败，设置编码和类型

5.获取所有表单的数据、

6.封装user对象

7.调用service

8.验证码有误封装返回的数据对象

9.注册用户成功

10.注册用户失败

11.设置编码和类型

package com.hotdas.travel.web.servlet;import com.fasterxml.jackson.databind.ObjectMapper;
import com.hotdas.travel.domain.ResultInfo;
import com.hotdas.travel.domain.User;
import com.hotdas.travel.service.UserService;
import com.hotdas.travel.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;/*** @program: IntelliJ IDEA* @description: * @author: * @create: 2022-10-01 22:04*/
@WebServlet("/registerUserServlet")
public class RegisterUserServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String check = request.getParameter("check");//从session中获取验证码String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");//删除sessionrequest.getSession().removeAttribute("CHECKCODE_SERVER");if (checkcode_server!=null && !checkcode_server.equalsIgnoreCase(check)){//验证码有误 封装返回的数据对象ResultInfo info = new ResultInfo();//注册失败info.setErrorMsg("验证码有误!");info.setFlag(false);ObjectMapper objectMapper = new ObjectMapper();String valueAsString = objectMapper.writeValueAsString(info);//设置编码和类型response.setCharacterEncoding("utf-8");response.setContentType("application/json;charset=utf-8");response.getWriter().write(valueAsString);return;}//获取所有表单的数据Map<String, String[]> parameterMap = request.getParameterMap();//封装user对象User user = new User();try {BeanUtils.populate(user,parameterMap);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//调用serviceUserService userService = new UserServiceImpl();Boolean flag =  userService.regirst(user);//验证码有误 封装返回的数据对象ResultInfo info = new ResultInfo();if (flag){//注册用户成功info.setFlag(true);}else{//注册用户失败//注册失败info.setErrorMsg("注册失败!");info.setFlag(false);}ObjectMapper objectMapper = new ObjectMapper();String valueAsString = objectMapper.writeValueAsString(info);//设置编码和类型response.setCharacterEncoding("utf-8");response.setContentType("application/json;charset=utf-8");response.getWriter().write(valueAsString);}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request,response);}}

创建UserService

package com.hotdas.travel.service;import com.hotdas.travel.domain.User;public interface UserService {Boolean regirst(User user);//实现方法
}

创建UserServiceImpl

1.从数据库中查询用户

2.判断用户是否存在

3.用户存在,返回false

4.激活邮箱才可以使用

5.保存信息到数据库

6.发送邮箱给用户让用户进激活,后面doing...

package com.hotdas.travel.service.impl;import com.hotdas.travel.dao.UserDao;
import com.hotdas.travel.dao.impl.UserDaoImpl;
import com.hotdas.travel.domain.User;
import com.hotdas.travel.service.UserService;
import com.hotdas.travel.util.UuidUtil;public class UserServiceImpl implements UserService {private UserDao userDao = new UserDaoImpl();@Overridepublic Boolean regirst(User user) {//从数据库中查询用户User u =   userDao.findByUsername(user.getUsername());//判断用户是否存在if (u!=null){//用户存在,返回falsereturn false;}//激活邮箱才可以使用user.setCode(UuidUtil.getUuid());user.setStatus("N");//保存信息到数据库userDao.save(user);//发送邮箱给用户让用户进激活,后面doing...return true;}
}

创建UserDao

1.根据用户名查询用户信息

2.保存用户信息

package com.hotdas.travel.dao;import com.hotdas.travel.domain.User;public interface UserDao {//根据用户名查询用户信息User findByUsername(String username);//保存用户信息void save(User user);}

创建UserDaoImpl

1.定义sql

2.用占位符替代数据

package com.hotdas.travel.dao.impl;import com.hotdas.travel.dao.UserDao;
import com.hotdas.travel.domain.User;
import com.hotdas.travel.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;public class UserDaoImpl implements UserDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic User findByUsername(String username) {User user =null;try {//1.定义sqlString sql ="select * from tab_user where username=?";user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username);} catch (DataAccessException e) {e.printStackTrace();}return user;}@Overridepublic void save(User user) {//1.定义sql，占位符String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";template.update(sql,user.getUsername(),user.getPassword(),user.getName(),user.getBirthday(),user.getSex(),user.getTelephone(),user.getEmail(),user.getStatus(),user.getCode());}
}