旅游网(1)--------------某旅游网注册功能的实现记录

本文详细介绍了前端如何实现表单验证,包括用户名、密码、邮箱等字段的正则匹配,并在用户提交时通过异步方式发送AJAX请求到后台。后台使用Servlet接收数据,验证邮箱验证码并保存用户信息。此外,还涉及了邮件激活功能,通过发送带有激活链接的邮件到用户邮箱,用户点击链接完成账号激活。整个流程确保了用户信息的正确性和安全性。
摘要由CSDN通过智能技术生成

注册

image-20210904200647261
image-20210905101341141

前台代码实现

表单校验

<script>
   /*
   表单校验:
      1.用户名:单词字符,长度8到29位
      2.密码:单词字符,
      3.email.邮件格式,长度8到20位
      4.姓名:非空
      5.手机号:手机号格式
      6.出生日期:非空
      7.验证码:非空
    */
   //校验用户名
   function checkUsername(){
      //获取用户名值
      var username = $("#username").val();
      //定义正则
      var reg_username = /^\w{8,20}$/;
      //判断,给出提示信息
      var flag = reg_username.test(username);
      if (flag){
         //用户名合法
         $("#username").css("border","");
      }else {
         //用户名不合法,加边框
         $("#username").css("border","1px solid red");
      }
      return flag;
   }
   //校验密码
   function checkUPassword(){
      //获取用户名值
      var password = $("#password").val();
      //定义正则
      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();
      //定义正则
      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;
   }
   //姓名
   function checkName(){
      //获取用户名值
      var name = $("#name").val();
      //定义正则
      var reg_name= /^[\u4e00-\u9fa5]{2,4}$/;
      //判断,给出提示信息
      var flag = reg_name.test(name);
      if (flag){
         //用户名合法
         $("#name").css("border","");
      }else {
         //用户名不合法,加边框
         $("#name").css("border","1px solid red");
      }
      return flag;
   }
   //手机号码
   function checkTel(){
      //获取用户名值
      var telephone = $("#telephone").val();
      //定义正则
      var reg_telephone= /^1[0-9]{10}$/;
      //判断,给出提示信息
      var flag = reg_telephone.test(telephone);
      if (flag){
         //用户名合法
         $("#telephone").css("border","");
      }else {
         //用户名不合法,加边框
         $("#telephone").css("border","1px solid red");
      }
      return flag;
   }
   //出生日期
   function checkBir(){
      //获取用户名值
      var birthday = $("#birthday").val();
      //定义正则
      var reg_birthday= /^(\d{4})-(\d{2})-(\d{2})$/;
      //判断,给出提示信息
      var flag = reg_birthday.test(birthday);
      if (flag){
         //用户名合法
         $("#birthday").css("border","");
      }else {
         //用户名不合法,加边框
         $("#birthday").css("border","1px solid red");
      }
      return flag;
   }
   //验证码
   function checkCheck(){
      //获取用户名值
      var check = $("#check").val();
      //定义正则
      var reg_check= /^\w+$/;
      //判断,给出提示信息
      var flag = reg_check.test(check);
      if (flag){
         //用户名合法
         $("#check").css("border","");
      }else {
         //用户名不合法,加边框
         $("#check").css("border","1px solid red");
      }
      return flag;
   }
   //当表单提交时,调用所有的校验方法
   $(function (){
      $("#registerForm").submit(function (){
         return checkUsername() && checkUPassword() && checkEmail()
               checkName() && checkTel() && checkBir()
               && checkCheck();
         //如果这个方法没有返回值,或者返回为true,则表单提交,如果返回为false, 则表单不提交
      });
      //当某一个组件失去焦点是,调用对应的校验方法
      $("#username").blur(checkUsername);
      $("#password").blur(checkUPassword);
      $("#email").blur(checkEmail);
      $("#name").blur(checkName);
      $("#telephone").blur(checkTel);
      $("#birthday").blur(checkBir);
      $("#check").blur(checkCheck);

   })


</script>

异步提交表单

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

通过$(this).serialize(),将表单的数据序列化成为username=zhangsan&pas sword=123…这种格式

//当表单提交时,调用所有的校验方法
			$(function (){
				$("#registerForm").submit(function (){
					if (checkUsername() && checkUPassword() && checkEmail() &&
						checkName() && checkTel() && checkBir()	&& checkCheck()){
						//校验通过,发送ajax请求,提交表单的数据 username=zhangsan&pas sword=123
						$.post("registUserServlet",$(this).serialize(),function (data){
							//处理服务器响应的数据 data
							
						});
					}
					return false;
					//如果这个方法没有返回值,或者返回为true,则表单提交,如果返回为false, 则表单不提交
				});

后台代码实现

RegistUserServlet
@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        //验证校验
        String check = request.getParameter("check");
        //从sesion中获取验证码
        HttpSession session = request.getSession();
        String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
        session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次
        //比较
        if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){
            //验证码错误
            ResultInfo info = new ResultInfo();
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("验证码错误");
            //将info对象序列化为json
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(info);
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(json);
            return;
        }

        //1.获取数据
        Map<String, String[]> map = request.getParameterMap();

        //2.封装对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3.调用service完成注册
        UserService service = new UserServiceImpl();
        boolean flag = service.regist(user);
        ResultInfo info = new ResultInfo();
        //4.响应结果
        if(flag){
            //注册成功
            info.setFlag(true);
        }else{
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败!");
        }

        //将info对象序列化为json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(info);

        //将json数据写回客户端
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);


    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}
UserService&UserServletImpl
public interface UserService {
    /**
     * 注册用户
     * @param user
     * @return
     */
    boolean regist(User user);
}
public class UserServiceImpl implements UserService {
    private UserDao userDao = new UserDaoImpl();
    /**
     * 注册用户
     * @param user
     * @return
     */
    @Override
    public boolean regist(User user) {
        //1.根据用户名查询用户对象
        User u = userDao.findByUsername(user.getUsername());
        //判断u是否为null
        if (u!=null){
            //用户名存在,注册失败
            return false;
        }
        //2.保存用户信息
        userDao.save(user);
        return true;
    }
}
UserDao&UserDaoImpl
public interface UserDao {
    /**
     * 根据用户名查询用户信息
     * @param username
     * @return
     */
    public User findByUsername(String username);

    /**
     * 用户保存
     * @param user
     */
    public void save(User user);
}
public class UserDaoImpl implements UserDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    @Override
    public User findByUsername(String username) {
        //jdbcTemplate里面,如果说传递的用户名,没有查询到一个user对象
        //或者说封装没有成功,它是不会返回一个null,而是直接报异常,所以给题目做了一个try。。catch。。
        User user = null;
        try {
            //1.定义sql
            String sql = "select * from tab_user where username = ?";
            //2.执行sql
            user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
        }catch (Exception e){

        }
        return user;
    }

    @Override
    public void save(User user) {
        //1.定义sql
        String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email) values(?,?,?,?,?,?,?)";
        //2.执行sql
        template.update(sql,user.getUsername(),
                user.getPassword(),
                user.getName(),
                user.getBirthday(),
                user.getSex(),
                user.getTelephone(),
                user.getEmail());
    }
}

邮件激活

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

发送邮件
发送邮件工具类
package cn.itcast.travel.util;

import javax.mail.*;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import java.util.Properties;

/**
 * 发邮件工具类
 */
public final class MailUtils {
    private static final String USER = "xxxxx@qq.com"; // 发件人称号,同邮箱地址
    private static final String PASSWORD = "xxxxxx"; // 如果是qq邮箱可以使户端授权码,或者登录密码

    /**
     *
     * @param to 收件人邮箱
     * @param text 邮件正文
     * @param title 标题
     */
    /* 发送验证信息的邮件 */
    public static boolean sendMail(String to, String text, String title){
        try {
            final Properties props = new Properties();
            props.put("mail.smtp.auth", "true");
            props.put("mail.smtp.host", "smtp.qq.com");

            // 发件人的账号
            props.put("mail.user", USER);
            //发件人的密码
            props.put("mail.password", PASSWORD);

            // 构建授权信息,用于进行SMTP进行身份验证
            Authenticator authenticator = new Authenticator() {
                @Override
                protected PasswordAuthentication getPasswordAuthentication() {
                    // 用户名、密码
                    String userName = props.getProperty("mail.user");
                    String password = props.getProperty("mail.password");
                    return new PasswordAuthentication(userName, password);
                }
            };
            // 使用环境属性和授权信息,创建邮件会话
            Session mailSession = Session.getInstance(props, authenticator);
            // 创建邮件消息
            MimeMessage message = new MimeMessage(mailSession);
            // 设置发件人
            String username = props.getProperty("mail.user");
            InternetAddress form = new InternetAddress(username);
            message.setFrom(form);

            // 设置收件人
            InternetAddress toAddress = new InternetAddress(to);
            message.setRecipient(Message.RecipientType.TO, toAddress);

            // 设置邮件标题
            message.setSubject(title);

            // 设置邮件的内容体
            message.setContent(text, "text/html;charset=UTF-8");
            // 发送邮件
            Transport.send(message);
            return true;
        }catch (Exception e){
            e.printStackTrace();
        }
        return false;
    }

    public static void main(String[] args) throws Exception { // 做测试用
        MailUtils.sendMail("xxx@163.com","你好,这是一封测试邮件,无需回复。","测试邮件");
        System.out.println("发送成功");
    }



}
用户点击邮件激活

image-20210904201012874

分析

image-20210904203708508

随机字符工具类
/**
 * 产生UUID随机字符串工具类,全球唯一字符串
 */
public final class UuidUtil {
   private UuidUtil(){}
    //生成唯一字符串
   public static String getUuid(){
      return UUID.randomUUID().toString().replace("-","");
   }
   /**
    * 测试
    */
   public static void main(String[] args) {
      System.out.println(UuidUtil.getUuid());
      System.out.println(UuidUtil.getUuid());
      System.out.println(UuidUtil.getUuid());
      System.out.println(UuidUtil.getUuid());
   }
}
代码实现

应该拥有下面的这些方法:

ActiveUserServle

UserService:active

UserDao:findByCode updateStatus

修改
  • 修改RegistUserServlet
public boolean regist(User user) {
    //1.根据用户名查询用户对象
    User u = userDao.findByUsername(user.getUsername());
    //判断u是否为null
    if (u!=null){
        //用户名存在,注册失败
        return false;
    }

    //2.保存用户信息
    //2.1设置激活码,唯一字符串
    //2.2设置激活状态
    user.setCode(UuidUtil.getUuid());
    //3.激活邮件发送,邮件正文?
    user.setStatus("N");
    userDao.save(user);
    //3.编辑邮件发送的正文,
    // 如果部署在自己的服务器上就必须将localhost换成部署的服务器ip地址
    String content="<a href='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>点击激活【旅游网】</a>";
    //发送邮件
    System.out.println(user.getCode());
    MailUtils.sendMail(user.getEmail(),content,"邮件激活");
    return true;
}
  • 修改保存的实现类
@Override
public void save(User user) {
    //1.定义sql
    String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
    //2.执行sql
    template.update(sql,user.getUsername(),
            user.getPassword(),
            user.getName(),
            user.getBirthday(),
            user.getSex(),
            user.getTelephone(),
            user.getEmail(),
            user.getStatus(),
            user.getCode());
}
  • 具体代码
ActiveUserServle
@WebServlet("/activeUserServlet")
public class ActiveUserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取激活码
        String code = request.getParameter("code");
        if (code != null){
            //调用service完成激活
            UserService service = new UserServiceImpl();
            boolean flag = service.active(code);
            
            //判断标记,这个功能需要写两个页面,以后去完善这个内容
            String msg = null;
            if (flag){
                //激活成功
                msg = "激活成功,请<a href='login.html'>登录</a>";
            }else {
                //激活失败
                msg = "激活失败,请联系管理员!";
            }
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

UserService:active

  • UserService
boolean active(String code);
UserServiceImpl
@Override
public boolean active(String code) {
    //1.根据激活去查询用户对象
    User user = userDao.findByCode(code);
    if (user != null){
        //2.调用dao的修改激活状态的办法
        userDao.updateStatus(user);
        return true;
    }else {
        return false;
    }
}

UserDao:findByCode updateStatus

  • UserDao
User findByCode(String code);

void updateStatus(User user);
UserDaoImpl
/**
 * 根据激活码查询用户对象
 * @param code
 * @return
 */
@Override
public User findByCode(String code) {
    String sql = "select * from tab_user where code = ?";
    User user = null;
    try {
        user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), code);
    }catch (Exception e){
        e.printStackTrace();
    }
    return user;
}

/**
 * 修改指定用户激活码状态
 * @param user
 */
@Override
public void updateStatus(User user) {
    String sql = "update user set status = 'Y' where id = ?";
    template.update(sql,user.getUid());
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

?abc!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值