• 二、注册功能

    🍀 注册分析

    🍀 表单校验1

    主要是为了 测试分析校验 测试表单的提交与否

    1.  <script>
    2.  
    3.         /**
    4.          * 表单校验：
    5.          *    1。用户名 单词字符 8~20位
    6.          *    2.密码 单词字符 8~20位
    7.          *    3.Email 邮件格式
    8.          *    4.姓名 非空
    9.          *    5.手机号 手机号格式
    10.          *    6.出生日期 非空
    11.          *    7.验证码 非空
    12.          */
    13.  
    14.         //校验用户名
    15.         function checkUsername() {
    16.             alert("用户名校验")
    17.             return false;
    18.         }
    19.  
    20.         function checkPassword() {
    21.             alert("密码校验")
    22.             return false;
    23.         }
    24.  
    25.         $(function () {
    26.             //当表单提交时 调用所有的校验方法
    27.             $("#registerForm").submit(function () {
    28.                 return checkUsername() && checkPassword();
    29.                 //如果这个方法没有返回值 或者返回值为true 则表单提交 如果返回为false 则表单不提交
    30.             })
    31.  
    32.  
    33.             //当某一个组件失去焦点时 调用对应的方法
    34.             $("#username").blur(checkUsername);
    35.             $("#password").blur(checkPassword);
    36.  
    37.         })
    38.  
    39.  
    40.     </script>

    🍀 表单校验2

    表单提交的时候进行校验 鼠标离开输入框的时候校验 校验标准如下

    1.    <script>
    2.  
    3.         /**
    4.          * 表单校验：
    5.          *    1。用户名 单词字符 8~20位
    6.          *    2.密码 单词字符 8~20位
    7.          *    3.Email 邮件格式
    8.          *    4.姓名 非空
    9.          *    5.手机号 手机号格式
    10.          *    6.出生日期 非空
    11.          *    7.验证码 非空
    12.          */
    13.  
    14.         //校验用户名
    15.         function checkUsername() {
    16.             //1.获取用户名值
    17.             var username = $("#username").val();
    18.  
    19.             //2.定义正则
    20.             var reg_username = /^\w{8,20}$/;
    21.             //3.判断 给出提示
    22.             var flag = reg_username.test(username);
    23.             if (flag) {
    24.                 //用户名合法
    25.                 $("#username").css("border", "")
    26.             } else {
    27.                 //用户名非法
    28.                 $("#username").css("border", "2px solid red")
    29.             }
    30.             return flag;
    31.         }
    32.  
    33.         function checkPassword() {
    34.             //1.获取用户名值
    35.             var password = $("#password").val();
    36.  
    37.             //2.定义正则
    38.             var reg_password = /^\w{8,20}$/;
    39.             //3.判断 给出提示
    40.             var flag = reg_password.test(password);
    41.             if (flag) {
    42.                 //用户名合法
    43.                 $("#password").css("border", "")
    44.             } else {
    45.                 //用户名非法
    46.                 $("#password").css("border", "2px solid red")
    47.             }
    48.             return flag;
    49.         }
    50.  
    51.         //邮箱校验
    52.         function checkEamil() {
    53.             var email = $("#email").val();
    54.  
    55.             // var reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱校验 复杂的
    56.             var reg_email = /^\w+@\w+\.\w+$/;//简单一点的
    57.  
    58.             var flag = reg_email.test(email);
    59.  
    60.  
    61.             if (flag) {
    62.                 $("#email").css("border", "")
    63.             } else {
    64.                 $("#email").css("border", "2px solid red")
    65.  
    66.             }
    67.             return flag;
    68.         }
    69.  
    70.  
    71.         //姓名校验
    72.         function checkName() {
    73.  
    74.             var name = $("#name").val();
    75.  
    76.             var reg_name = /^[\u4e00-\u9fa5]{2,6}$/;//汉字
    77.  
    78.             var flag = reg_name.test(name);
    79.  
    80.  
    81.             if (flag) {
    82.                 $("#name").css("border", "")
    83.             } else {
    84.                 $("#name").css("border", "2px solid red")
    85.  
    86.             }
    87.             return flag;
    88.         }
    89.  
    90.         //手机号校验
    91.         function checkTelephone() {
    92.  
    93.             var telephone = $("#telephone").val();
    94.  
    95.             var reg_telephone = /^(13[0-9]|17[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//手机号
    96.  
    97.             var flag = reg_telephone.test(telephone);
    98.  
    99.  
    100.             if (flag) {
    101.                 $("#telephone").css("border", "")
    102.             } else {
    103.                 $("#telephone").css("border", "2px solid red")
    104.  
    105.             }
    106.             return flag;
    107.         }
    108.  
    109.         //出生日期  正则 不为空 /^.+$/
    110.         function checkBirthday() {
    111.  
    112.             var birthday = $("#birthday").val();
    113.  
    114.             var reg_birthday = /^.+$/;//出生日期
    115.  
    116.             var flag = reg_birthday.test(birthday);
    117.  
    118.  
    119.             if (flag) {
    120.                 $("#birthday").css("border", "")
    121.             } else {
    122.                 $("#birthday").css("border", "2px solid red")
    123.  
    124.             }
    125.             return flag;
    126.         }
    127.  
    128.         //验证码
    129.         function checkCheck() {
    130.             var check = $("#check").val();
    131.  
    132.             var reg_check = /^.+$/;//验证码
    133.  
    134.             var flag = reg_check.test(check);
    135.  
    136.  
    137.             if (flag) {
    138.                 $("#check").css("border", "")
    139.             } else {
    140.                 $("#check").css("border", "2px solid red")
    141.  
    142.             }
    143.             return flag;
    144.  
    145.         }
    146.  
    147.  
    148.         $(function () {
    149.             //当表单提交时 调用所有的校验方法
    150.             $("#registerForm").submit(function () {
    151.                 return checkUsername() && checkPassword() && checkEamil() && checkName() && checkTelephone() && checkBirthday() && checkCheck();
    152.                 //如果这个方法没有返回值 或者返回值为true 则表单提交 如果返回为false 则表单不提交
    153.             })
    154.  
    155.  
    156.             //当某一个组件失去焦点时 调用对应的方法
    157.             $("#username").blur(checkUsername);
    158.             $("#password").blur(checkPassword);
    159.             $("#email").blur(checkEamil);
    160.             $("#name").blur(checkName);
    161.             $("#telephone").blur(checkTelephone);
    162.             $("#birthday").blur(checkBirthday);
    163.             $("#check").blur(checkCheck);
    164.  
    165.         })
    166.  
    167.  
    168.     </script>

    🍀 异步提交表单

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

     效果图

    🍀 Servlet代码实现

    编写RegistUserServlet

    1. package cn.itcast.travel.web.servlet;
    2.  
    3. import cn.itcast.travel.domain.ResultInfo;
    4. import cn.itcast.travel.domain.User;
    5. import cn.itcast.travel.service.UserService;
    6. import cn.itcast.travel.service.impl.UserServiceImpl;
    7. import com.fasterxml.jackson.databind.ObjectMapper;
    8. import org.apache.commons.beanutils.BeanUtils;
    9.  
    10. import javax.servlet.ServletException;
    11. import javax.servlet.annotation.WebServlet;
    12. import javax.servlet.http.HttpServlet;
    13. import javax.servlet.http.HttpServletRequest;
    14. import javax.servlet.http.HttpServletResponse;
    15. import java.io.IOException;
    16. import java.lang.reflect.InvocationTargetException;
    17. import java.util.Map;
    18.  
    19. /**
    20.  * @Author wang
    21.  * @Date 2022/5/23 16:18
    22.  * @PackageName:${PACKAGE_NAME}
    23.  * @ClassName: ${NAME}
    24.  * @Description: TODO
    25.  * @Version 1.0
    26.  */
    27. @WebServlet("/registUserServlet")
    28. public class RegistUserServlet extends HttpServlet {
    29.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    30.  
    31.         //1.获取数据
    32.         Map<String, String[]> map = request.getParameterMap();
    33.         //2.封装对象
    34.         User user = new User();
    35.         try {
    36.             BeanUtils.populate(user, map);
    37.         } catch (IllegalAccessException e) {
    38.             e.printStackTrace();
    39.         } catch (InvocationTargetException e) {
    40.             e.printStackTrace();
    41.         }
    42.         //3.调用service完成注册
    43.         UserService service = new UserServiceImpl();
    44.  
    45.         boolean flag = service.regist(user);
    46.         ResultInfo userInfo = new ResultInfo();
    47.         //4.响应结果
    48.         if (flag) {
    49.             //注册成功
    50.             userInfo.setFlag(true);
    51.         } else {
    52.             //注册失败
    53.             userInfo.setFlag(false);
    54.             userInfo.setErrorMsg("注册失败");
    55.         }
    56.         //将info对象序列化为json
    57.         ObjectMapper mapper = new ObjectMapper();
    58.         String json = mapper.writeValueAsString(userInfo);
    59.  
    60.  
    61.         //将json数据写回客户端
    62.         //设置content-type
    63.         response.setContentType("application/json;charset=utf-8");
    64. //        response.getOutputStream().write(json.getBytes());
    65.         response.getWriter().write(json);
    66.  
    67.  
    68.     }
    69.  
    70.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    71.         this.doPost(request, response);
    72.     }
    73. }
    UserService

    UserServiceImpl

    🍀 Dao代码实现

    UserDao

    UserDaoImpl
    1. package cn.itcast.travel.dao.impl;
    2.  
    3. import cn.itcast.travel.dao.UserDao;
    4. import cn.itcast.travel.domain.User;
    5. import cn.itcast.travel.util.JDBCUtils;
    6. import org.springframework.jdbc.core.BeanPropertyRowMapper;
    7. import org.springframework.jdbc.core.JdbcTemplate;
    8.  
    9. /**
    10.  * @Author wang
    11.  * @Date 2022/5/23 16:23
    12.  * @PackageName:cn.itcast.travel.dao.impl
    13.  * @ClassName: UserDaoImpl
    14.  * @Description: TODO
    15.  * @Version 1.0
    16.  */
    17. public class UserDaoImpl implements UserDao {
    18.     private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    19.  
    20.     @Override
    21.     public User findByUsername(String username) {
    22.         //1.定义sql
    23.         String sql = "select * from tab_user where username = ?";
    24.         //2.执行sql
    25.         User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
    26.         return user;
    27.     }
    28.  
    29.     @Override
    30.     public void save(User user) {
    31.         //1.定义sql
    32.         String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email) values(?,?,?,?,?,?,?)";
    33.         //2.执行sql
    34.         template.update(sql,
    35.                 user.getUsername(),
    36.                 user.getPassword(),
    37.                 user.getName(),
    38.                 user.getBirthday(),
    39.                 user.getSex(),
    40.                 user.getTelephone(),
    41.                 user.getEmail());
    42.     }
    43. }

    🍀 service代码实现&测试

    UserServiceImpl
    1. package cn.itcast.travel.service.impl;
    2.  
    3. import cn.itcast.travel.dao.UserDao;
    4. import cn.itcast.travel.dao.impl.UserDaoImpl;
    5. import cn.itcast.travel.domain.User;
    6. import cn.itcast.travel.service.UserService;
    7.  
    8. /**
    9.  * @Author wang
    10.  * @Date 2022/5/23 16:22
    11.  * @PackageName:cn.itcast.travel.service.impl
    12.  * @ClassName: UserServiceImpl
    13.  * @Description: TODO
    14.  * @Version 1.0
    15.  */
    16. public class UserServiceImpl implements UserService {
    17.     private UserDao userDao = new UserDaoImpl();
    18.  
    19.     @Override
    20.     public boolean regist(User user) {
    21.         //1.根据用户名查询用户对象
    22.         User u = userDao.findByUsername(user.getUsername());
    23.  
    24.         //判断u是否为null
    25.         if (u != null) {
    26.             //用户名存在 注册失败
    27.             return false;
    28.         }
    29.  
    30.         //2.保存用户对象
    31.         userDao.save(user);
    32.         return true;
    33.     }
    34. }

    代码健壮性校验

     测试效果图

    在测试的过程中 如果控制台错误日志 原因解决

    🍀 后台_验证码&前台数据处理

    但是在之前的表单中 是没有校验验证码的 正常是要先校验验证码 才能进行下一步的注册

    RegistUserServlet
    1. @WebServlet("/registUserServlet")
    2. public class RegistUserServlet extends HttpServlet {
    3.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    4.  
    5.  
    6.         //验证码校验
    7.         String check = request.getParameter("check");
    8.         //从session中获取验证码
    9.         HttpSession session = request.getSession();
    10.         String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
    11.         session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次
    12.         //比价
    13.         if (checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){
    14.             ResultInfo userInfo = new ResultInfo();
    15.             //验证码校验失败
    16.             userInfo.setFlag(false);
    17.             userInfo.setErrorMsg("验证码错误");
    18.             //将info对象序列化为json
    19.             ObjectMapper mapper = new ObjectMapper();
    20.             String json = mapper.writeValueAsString(userInfo);
    21.  
    22.  
    23.             //将json数据写回客户端
    24.             //设置content-type
    25.             response.setContentType("application/json;charset=utf-8");
    26.             response.getWriter().write(json);
    27.             return;
    28.         }
    29.  
    30.  
    31.         //1.获取数据
    32.         Map<String, String[]> map = request.getParameterMap();
    33. .......
    34. .......
    35. .......
    register.html
    1.   $(function () {
    2.             //当表单提交时 调用所有的校验方法
    3.             $("#registerForm").submit(function () {
    4.                 //1.发送数据到服务器
    5.                 if (checkUsername() && checkPassword() && checkEamil() && checkName() && checkTelephone() && checkBirthday() && checkCheck()) {
    6.                     //校验通过 发送ajax请求 提交表单的数据 usernamezhangsan & password=123
    7.  
    8.                     $.post('registUserServlet', $(this).serialize(), function (data) {
    9.                         //处理服务器响应的数据 data:{flag:true,errorMsg:'注册失败'}
    10.                         if (data.flag) {
    11.                             //注册成功 跳转页面
    12.                             location.href = "register_ok.html";
    13.                         } else {
    14.                             //注册失败 给error添加提示信息
    15.                             $("#errorMsg").html(data.errorMsg)
    16.                         }
    17.  
    18.                     })
    19.                 }
    <div id="errorMsg" style="color: red;text-align: center;font-size: 25px;"></div>

<!--注册表单-->

    测试效果图

    🍀 后台_邮件激活分析

    邮件激活

            为什么要进行邮件激活？为了保证用户填写的邮箱是正确的。将来可以推广一些宣传信息，到用户邮箱中

    🍀 邮件激活_发送邮件

    1. 申请邮箱
    2. 开启授权码
    3. 在MailUtils中设置自己的邮箱账号和密码(授权码)

    邮件工具类：MailUtils，调用其中sendMail方法可以完成邮件发送

    效果图

    🍀 邮件激活_点击激活分析

    经过分析，发现，用户激活其实就是修改用户表中的status为‘Y’

    UserServiceImpl
    1. public class UserServiceImpl implements UserService {
    2.     private UserDao userDao = new UserDaoImpl();
    3.  
    4.     @Override
    5.     public boolean regist(User user) {
    6.         //1.根据用户名查询用户对象
    7.         User u = userDao.findByUsername(user.getUsername());
    8.  
    9.         //判断u是否为null
    10.         if (u != null) {
    11.             //用户名存在 注册失败
    12.             return false;
    13.         }
    14.  
    15.         //2.保存用户对象
    16.         //2.1设置激活码
    17.         user.setCode(UuidUtil.getUuid());
    18.         //2.2设置激活状态
    19.         user.setStatus("N");
    20.  
    21.         userDao.save(user);
    22.  
    23.         //激活邮件发送 邮件正文
    24.         String content = "<a href = ‘http://localhost:8888/travel/activeUserServlet?code=" + user.getCode() + "’>点击激活[黑马旅游网]</a>";
    25.  
    26.         MailUtils.sendMail(user.getEmail(), content, "激活邮件");
    27.  
    28.  
    29.         return true;
    30.     }
    31. }

    测试效果图

    🍀 邮件激活代码实现Servlet

    ActiveUserServlet
    1. package cn.itcast.travel.web.servlet;
    2.  
    3. import cn.itcast.travel.service.UserService;
    4. import cn.itcast.travel.service.impl.UserServiceImpl;
    5.  
    6. import javax.servlet.ServletException;
    7. import javax.servlet.annotation.WebServlet;
    8. import javax.servlet.http.HttpServlet;
    9. import javax.servlet.http.HttpServletRequest;
    10. import javax.servlet.http.HttpServletResponse;
    11. import java.io.IOException;
    12.  
    13. /**
    14.  * @Author wang
    15.  * @Date 2022/5/24 10:20
    16.  * @PackageName:${PACKAGE_NAME}
    17.  * @ClassName: ${NAME}
    18.  * @Description: TODO
    19.  * @Version 1.0
    20.  */
    21. @WebServlet("/activeUserServlet")
    22. public class ActiveUserServlet extends HttpServlet {
    23.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    24.  
    25.         //1.获取激活码
    26.         String code = request.getParameter("code");//获取通过http协议提交过来的数据. 不仅仅代表表单提交 而且有自定义参数
    27.         if (code != null) {
    28.             //2.调用service完成激活
    29.             UserService service = new UserServiceImpl();
    30.             boolean flag = service.active(code);
    31.             //3。判断标记
    32.             String msg = "";
    33.             if (flag) {//激活成功
    34.                 msg = "激活成功 请<a href='login.html'>登录</a>";
    35.             } else {
    36.                 //激活失败
    37.                 msg = "激活失败,请联系管理员！";
    38.             }
    39.  
    40.             response.setContentType("text/html;charset=utf-8");
    41.             response.getWriter().write(msg);
    42.  
    43.         }
    44.     }
    45.  
    46.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    47.         this.doPost(request, response);
    48.     }
    49. }

    🍀 邮件激活代码实现Service&Dao

    UserService

    UserServiceImpl

    1.  
    2.     @Override
    3.     public boolean active(String code) {
    4.         //1.根据激活码查询用户对象
    5.         User user = userDao.findByCode(code);
    6.         if (user != null) {
    7.             userDao.updateStatus(user);
    8.             return true;
    9.         } else {
    10.  
    11.             return false;
    12.         }
    13.     }
    UserDao

    UserDaoImpl
    1.  /**
    2.      * 保存用户对象
    3.      *
    4.      * @param user
    5.      */
    6.     @Override
    7.     public void save(User user) {
    8.         //1.定义sql
    9.         String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
    10.         //2.执行sql
    11.         template.update(sql,
    12.                 user.getUsername(),
    13.                 user.getPassword(),
    14.                 user.getName(),
    15.                 user.getBirthday(),
    16.                 user.getSex(),
    17.                 user.getTelephone(),
    18.                 user.getEmail(),
    19.                 user.getStatus(),
    20.                 user.getCode()
    21.         );
    22.     }
    23.  
    24.  
    25. /**
    26.      * 根据激活码查询用户对象
    27.      *
    28.      * @param code
    29.      * @return
    30.      */
    31.     @Override
    32.     public User findByCode(String code) {
    33.         String sql = "select * from tab_user where code = ?";
    34.         //当sql的返回对象 要么只有一个要么没有的时候 使用方法 queryForObject() 这个方法如果没有查出来时 会出异常 不会返回null
    35.         User user = null;
    36.         try {
    37.             user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), code);
    38.         } catch (DataAccessException e) {
    39.             e.printStackTrace();
    40.         }
    41.         return user;
    42.     }
    43.  
    44.     /**
    45.      * 修改用户的激活状态
    46.      *
    47.      * @param user
    48.      */
    49.     @Override
    50.     public void updateStatus(User user) {
    51.         String sql = "update tab_user set status = 'Y' where uid = ?";
    52.         template.update(sql, user.getUid());
    53.     }

    效果图

  • 相关阅读:
    Rockland甘油激酶抗体生物素偶联物丨山羊多克隆
    图片懒加载
    数据库工程师的工作职责(合集)
    “Invalid project description“问题解决
    浏览器缓存机制
    智能终端测试解决方案
    cmake配置opencv与boost库
    Java线程常见方法
    StackExchange.Redis 高并发下timeout超时问题如何解决？
    第2-4-3章 规则引擎Drools基础语法-业务规则管理系统-组件化-中台
  • 原文地址：https://blog.csdn.net/nanyangnongye/article/details/124913744