Shop项目--1.注册新用户验证码前端校验工具validate 发送邮件激活

来源：互联网发布：阿里云更改手机绑定编辑：程序博客网时间：2024/05/21 17:51

分析：

涉及几个功能问题，需要综合起来。

0.基本用户注册功能呢的实现。

1.验证码有专门的验证码servlet，把正确的验证码存在session域中，需要取出与用户做对比。

2.前台校验功能利用JQuery加强validate校验工具实现。有默认规则，还需要实现自定义规则，联合ajax同步查询后台校验用户名是否已存在,使用ajax同步就需要$.ajax 不能使用$.post(此只能为异步)。

3.使用mailUtils发送激活邮件，需要修改发送者邮箱的信息，激活邮件内容，实质为修改数据库的state值

准备：

a、创建User类

package com.itheima.domain;import java.util.Date;public class User { /*`uid` varchar(32) NOT NULL,  `username` varchar(20) DEFAULT NULL,  `password` varchar(20) DEFAULT NULL,  `name` varchar(20) DEFAULT NULL,  `email` varchar(30) DEFAULT NULL,  `telephone` varchar(20) DEFAULT NULL,  `birthday` date DEFAULT NULL,  `sex` varchar(10) DEFAULT NULL,  `state` int(11) DEFAULT NULL,  `code` varchar(64) DEFAULT NULL,*/private String uid;private String username;private String password;private String name;private String email;private String telephone;private Date birthday;private String sex;private int state;//是否激活private String code;//激活码public String getUid() {return uid;}public void setUid(String uid) {this.uid = uid;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public String getTelephone() {return telephone;}public void setTelephone(String telephone) {this.telephone = telephone;}public Date getBirthday() {return birthday;}public void setBirthday(Date birthday) {this.birthday = birthday;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public int getState() {return state;}public void setState(int state) {this.state = state;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}}

0、Beautils 工具封装散装数据

1、CheckImgServlet 与验证码词表（放在WEB-INF里）

2、jquery.validate.min 表单校验插件

3、MailUtils邮箱工具

步骤：

基本的注册功能实现

1、获取表单数据，注意user中的birthday需要的是Date，需要注册自定义转换类型，把表单的数据String类型转为Date类型，使用beautils里面的ConvertUtils工具。

2、手动封装好表单没有的数据。

3、把user传到service层，再传到dao层，操作数据库增加一个user

验证码

1、在servlet中，获取用户输入的验证码，获取session的验证码，并比较

2、若不相同，给出验证码错误信息，存在request域并转发register.jsp，并 return；

表单校验

1.在register.jsp导入jquery.validate.min 地址，并按格式编写需要的验证规则。

2.自定义检验用户名是否存在规则，利用ajax同步，查找数据库是否已存在用户名

激活邮件

1.修改配置号发送者邮箱的基本信息。（哪个邮箱发送，主题）

2.编写发送邮箱的内容，其实就是一个链接，该链接是服务器的一个修改用户state的一个功能，邮箱链接内容为字符串，需要凭借字符串

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head></head><meta name="viewport" content="width=device-width, initial-scale=1"><title>会员注册</title><link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /><script src="js/jquery-1.11.3.min.js" type="text/javascript"></script><script src="js/bootstrap.min.js" type="text/javascript"></script><script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"" type="text/javascript"></script><!-- 引入自定义css文件 style.css --><link rel="stylesheet" href="css/style.css" type="text/css" /><script type="text/javascript">//自定义校验规则$.validator.addMethod("checkUsername",function(value,element,params){//定义一个标志var flag = false;//value:输入的内容//alert(value);//element:被校验的元素对象//alert(element);//params：规则对应的参数值//alert(params);//目的：对输入的username进行ajax校验$.ajax({"async":false,"type":"POST","url":"${pageContext.request.contextPath}/user?method=checkUsername","data":{"username":value},"dataType":"json","success":function(data){flag = data.isExist;}});//返回false代表校验器不通过return !flag;});$(function(){$("#form").validate({rules:{"username":{"required":true,"checkUsername":"xxxx"},"password":{"required":true,"rangelength":[6,12]},"repassword":{"required":true,"rangelength":[6,12],"equalTo":"#password"},"email":{"required":true,"email":true},"name":{"required":true,"rangelength":[2,8]},"sex":{"required":true},"birthday":{"required":true,"dateISO":true}},messages:{"username":{"required":"用户名不能为空","checkUsername":"用户名已经存在"},"password":{"required":"密码不能为空","rangelength":"密码必须为6到12为"},"repassword":{"required":"密码不能为空","rangelength":"密码必须为6到12为","equalTo":"两次密码不一致"},"email":{"required":"必填","email":"邮箱地址不正确"},"name":{"required":"必填","rangelength":"请输入2到8位"},"birthday":{"required":"必填","birthday":"日期格式错误"}}});});</script><style>.error{color:red;}body {margin-top: 20px;margin: 0 auto;}.carousel-inner .item img {width: 100%;height: 300px;}font {color: #3164af;font-size: 18px;font-weight: normal;padding: 0 10px;}</style></head><body><!-- 引入header.jsp --><jsp:include page="/header.jsp"></jsp:include><div class="container"style="width: 100%; background: url('image/regist_bg.jpg');"><div class="row"><div class="col-md-2"></div><div class="col-md-8"style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;"><font>会员注册</font>USER REGISTER<form class="form-horizontal" style="margin-top: 5px;" method="post" action="${pageContext.request.contextPath}/user?method=register" id="form"><div class="form-group"><label for="username" class="col-sm-2 control-label">用户名</label><div class="col-sm-6"><input type="text" class="form-control" id="username" name="username"placeholder="请输入用户名"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">密码</label><div class="col-sm-6"><input type="password" class="form-control" id="password" name="password"placeholder="请输入密码"></div></div><div class="form-group"><label for="confirmpwd" class="col-sm-2 control-label">确认密码</label><div class="col-sm-6"><input type="password" class="form-control" id="repassword" name="repassword"placeholder="请输入确认密码"></div></div><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-6"><input type="email" class="form-control" id="inputEmail3" name="email"placeholder="Email"></div></div><div class="form-group"><label for="usercaption" class="col-sm-2 control-label">姓名</label><div class="col-sm-6"><input type="text" class="form-control" id="usercaption" name="name"placeholder="请输入姓名"></div></div><div class="form-group opt"><label for="inlineRadio1" class="col-sm-2 control-label">性别</label><div class="col-sm-6"><label class="radio-inline"> <input type="radio"name="sex" id="sex1" value="male">男</label> <label class="radio-inline"> <input type="radio"name="sex" id="sex2" value="female">女</label><label class="error" for="sex" style="display: none">请选择性别</label></div></div><div class="form-group"><label for="date" class="col-sm-2 control-label">出生日期</label><div class="col-sm-6"><input type="date" class="form-control" name="birthday"></div></div><!-- 验证码 --><div class="form-group"><label for="date" class="col-sm-2 control-label">验证码</label><div class="col-sm-3"><input type="text" class="form-control" name="checkCode"><span style="color: red">${checkInfo }</span></div><div class="col-sm-2"><img onclick="changeImg(this)" src="${pageContext.request.contextPath }/checkImg" /></div><script type="text/javascript">function changeImg(obj){$(obj).attr("src","${pageContext.request.contextPath }/checkImg?"+Math.random());}</script></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><input type="submit" width="100" value="注册" name="submit"style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;"></div></div></form></div><div class="col-md-2"></div></div></div><!-- 引入footer.jsp --><jsp:include page="/footer.jsp"></jsp:include></body></html>

UserServlet

package com.itheima.web.servlet;import java.io.IOException;import java.lang.reflect.InvocationTargetException;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.Map;import java.util.UUID;import javax.mail.MessagingException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.beanutils.BeanUtils;import org.apache.commons.beanutils.ConvertUtils;import org.apache.commons.beanutils.Converter;import com.itheima.domain.User;import com.itheima.service.UserService;import com.itheima.utils.MailUtils;public class UserServlet extends BaseServlet {//注册新用户public void register(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {request.setCharacterEncoding("UTF-8");//0。验证码的判断String checkcode_session = (String) request.getSession().getAttribute("checkcode_session");String checkcode_user = request.getParameter("checkCode");if(!checkcode_user.equals(checkcode_session)) {request.setAttribute("checkInfo", "验证码失败");request.getRequestDispatcher("register.jsp").forward(request, response);return;}//1.获取表单数据，并封装成user对象Map<String, String[]> parameterMap = request.getParameterMap();User user = new User();//自定义转换器ConvertUtils.register(new Converter() {@Overridepublic Object convert(Class clazz, Object value) {SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");Date parse = null;try {parse = format.parse(value.toString());} catch (ParseException e) {e.printStackTrace();}return parse;}}, Date.class);//利用工具封装到usertry {BeanUtils.populate(user, parameterMap);} catch (IllegalAccessException | InvocationTargetException e) {e.printStackTrace();}//手动封装没有的数据user.setUid(UUID.randomUUID().toString());user.setTelephone(null);user.setState(0);user.setCode(UUID.randomUUID().toString());//传递到service层UserService service = new UserService();boolean isSuccess = service.register(user); if(isSuccess) {//2.激活注册用户//注册成功String emailMsg ="恭喜您注册成功，请您点击进行激活<a href='http://localhost:8080/Shop/user?method=active&activeCode="+user.getCode()+"'>"+ "http://localhost:8080/Shop/user?method=active&activeCode="+user.getCode()+"</a>";try {MailUtils.sendMail(user.getEmail(), emailMsg);} catch (MessagingException e) {e.printStackTrace();}response.sendRedirect(request.getContextPath()+"/registerSuccess.jsp");}else {//注册失败response.sendRedirect(request.getContextPath()+"/registerFail.jsp");}}//检验用户名是否已存在checkUsernamepublic void checkUsername(HttpServletRequest request, HttpServletResponse response) throws IOException {//获取需要检测的用户名String username = request.getParameter("username");//传递到service层UserService service = new UserService();boolean isExist = service.checkUsername(username);String json ="{\"isExist\":"+isExist+"}";response.getWriter().write(json);}//激活账户public void active(HttpServletRequest request,HttpServletResponse response) {//获取需要激活账号的激活码String activeCode = request.getParameter("activeCode");//传递到service层UserService service = new UserService();service.active(activeCode);}}

UserService

package com.itheima.service;import java.sql.SQLException;import com.itheima.dao.UserDao;import com.itheima.domain.User;public class UserService {//注册新用户public boolean register(User user) {UserDao dao = new UserDao();int row=0;try {row = dao.register(user);} catch (SQLException e) {e.printStackTrace();}return row>0?true:false;}//检验用户名是否已存在public boolean checkUsername(String username) {UserDao dao = new UserDao();Long row =0L;try {row = dao.checkUsername(username);} catch (SQLException e) {e.printStackTrace();}return row>0?true:false;}// 激活账号public void active(String activeCode) {UserDao dao = new UserDao();try {dao.active(activeCode);} catch (SQLException e) {e.printStackTrace();}}}

UserDao

package com.itheima.dao;import java.sql.SQLException;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.ScalarHandler;import com.itheima.domain.User;import com.itheima.utils.DataSourceUtils;public class UserDao {/*`uid` varchar(32) NOT NULL,  `username` varchar(20) DEFAULT NULL,  `password` varchar(20) DEFAULT NULL,  `name` varchar(20) DEFAULT NULL,  `email` varchar(30) DEFAULT NULL,  `telephone` varchar(20) DEFAULT NULL,  `birthday` date DEFAULT NULL,  `sex` varchar(10) DEFAULT NULL,  `state` int(11) DEFAULT NULL,  `code` varchar(64) DEFAULT NULL,*///注册新用户public int register(User user) throws SQLException {QueryRunner runner  = new QueryRunner(DataSourceUtils.getDataSource());String sql = "insert into user values(?,?,?,?,?,?,?,?,?,?)";int update = runner.update(sql, user.getUid(),user.getUsername(),user.getPassword(),user.getName(),user.getEmail(),user.getTelephone(),user.getBirthday(),user.getSex(),user.getState(),user.getCode());return update;}//检验用户名是否已存在public Long checkUsername(String username) throws SQLException {QueryRunner runner  = new QueryRunner(DataSourceUtils.getDataSource());String sql = "select count(*) from user where username=?";Long query = (Long) runner.query(sql, new ScalarHandler(), username);return query;}//激活账号public void active(String activeCode) throws SQLException {QueryRunner runner  = new QueryRunner(DataSourceUtils.getDataSource());String sql ="update user set state=? where code=?";runner.update(sql, 1,activeCode);System.out.println("激活成功");}}

阅读全文

0 0

Shop项目--1.注册新用户 验证码 前端校验工具validate 发送邮件激活

Shop项目--1.注册新用户验证码前端校验工具validate 发送邮件激活