分析：
register.jsp页面是一个注册新用户的页面，该页面有验证码与前端校验功能，并在注册成功后发送激活邮件。
涉及几个功能问题，需要综合起来。
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的一个功能，邮箱链接内容为字符串，需要凭借字符串
register.jsp
<%@ 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 οnclick="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() {
@Override
public 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);
//利用工具封装到user
try {
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");
}
}
//检验用户名是否已存在checkUsername
public 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("激活成功");
}
}
2453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
