文章目录
Register.html
<script>
/*
表单校验：
1.用户名：单词字符，长度8到20位
2.密码：单词字符，长度8到20位
3.email：邮件格式
4.姓名：非空
5.手机号：手机号格式
6.出生日期：非空
7.验证码：非空
*/
//校验用户名
//单词字符，长度8到20位
function checkUsername() {
//1.获取用户名值
var username = $("#username").val();
//2.定义正则
var reg_username = /^\w{8,20}$/;
//3.判断，给出提示信息
var flag = reg_username.test(username); //test：验证是否满足正则表达式
if(flag){
//用户名合法
$("#username").css("border",""); //当我们用户名符合正则表达式后变回原来的样子
}else{
//用户名非法,加一个红色边框
$("#username").css("border","1px solid red");
}
return flag; //这里一定记得返回flag
}
//校验密码
function checkPassword() {
//1.获取密码值
var password = $("#password").val();
//2.定义正则
var reg_password = /^\w{8,20}$/;
//3.判断，给出提示信息
var flag = reg_password.test(password);
if(flag){
//密码合法
$("#password").css("border","");
}else{
//密码非法,加一个红色边框
$("#password").css("border","1px solid red");
}
return flag;
}
//校验邮箱
function checkEmail(){
//1.获取邮箱
var email = $("#email").val();
//2.定义正则 itcast@163.com
var reg_email = /^\w+@\w+\.\w+$/;
//3.判断
var flag = reg_email.test(email);
if(flag){
$("#email").css("border","");
}else{
$("#email").css("border","1px solid red");
}
return flag;
}
$(function () { //当页面框架加载完成就执行
//当表单提交时，调用所有的校验方法
$("#registerForm").submit(function(){
//1.发送数据到服务器
if(checkUsername() && checkPassword() && checkEmail()){
//校验通过,发送ajax请求，提交表单的数据 this指代registerForm表单提交数据
序列化为:username=zhangsan&password=123
$.post("registUserServlet",$(this).serialize(),function(data){
//处理服务器响应的数据 data {flag:true,errorMsg:"注册失败"}
//Data是页面的响应数据
if(data.flag){
//注册成功，跳转成功页面
location.href="register_ok.html";
}else{
//注册失败,给errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});
}
//2.不让页面跳转
return false; //没有满足输入要求一定这里记得要返回false 阻止表单提交
//如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
});
//当某一个组件失去焦点是，调用对应的校验方法
$("#username").blur(checkUsername); //这里没有括号，老是搞忘把括号加上了
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
});
</script>
发送ajax异步请求到registUserServlet
处理客户端传来的HTTP请求，并返回一个响应
RegistUserServlet
这里原本分的两步，先保存操作在验证码操作，验证码比较简单就直接一步啦
@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
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 ( Exception e) {
}
//3.调用service完成注册
UserService service = new UserServiceImpl();
//Service使用regist，调用dao的查询和保存
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);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
UserServiceImpl.
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;
}
}
UserDaoImpl.
public class UserDaoImpl implements UserDao {
//本地的JDBCUtils
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public User findByUsername(String username) {
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,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()
);
}
正确输入信息后数据库中有了数据
发送邮件，携带点击激活地址+激活码.
发送邮件 （填写好邮件工具类）
UserServiceImpl
@Override
public boolean regist(User user) {
//1.根据用户名查询用户对象
User u = userDao.findByUsername(user.getUsername());
//判断u是否为null
if(u != null){
//用户名存在，注册失败
return false;
}
//2.保存用户信息
//2.1设置激活码，唯一字符串
user.setCode(UuidUtil.getUuid());
//2.2设置激活状态
user.setStatus("N");
userDao.save(user);
//3.激活邮件发送，邮件正文？
String content="<a href='http://localhost:8086/travel_war_exploded/activeUserServlet?code="+user.getCode()+"'>点击激活【黑马旅游网】</a>";
MailUtils.sendMail(user.getEmail(),content,"激活邮件");
return true;
}
/**
* 激活用户
* @param code
* @return
*/
@Override
public boolean active(String code) {
//1.根据激活码查询用户对象
//先调用dao的findByCode查询激活码是否正确，正确：更改用户的激活状态为 'Y'
User user = userDao.findByCode(code);
if(user != null){
//2.调用dao的修改激活状态的方法
userDao.updateStatus(user);
return true;
}else{
return false;
}
UserDaoImpl.
/**
* 根据激活码查询用户对象
* @param code
* @return
*/
@Override
public User findByCode(String code) {
User user = null;
try {
String sql = "select * from tab_user where code = ?";
user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),code);
} catch (DataAccessException e) {
e.printStackTrace();
}
return user;
}
/**
* 修改指定用户激活状态
* @param user
*/
@Override
public void updateStatus(User user) {
String sql = " update tab_user set status = 'Y' where uid=?";
template.update(sql,user.getUid());
}
/**
* 根据用户名和密码查询的方法
* @param username
* @param password
* @return
*/
@Override
public User findByUsernameAndPassword(String username, String password) {
User user = null;
try {
//1.定义sql
String sql = "select * from tab_user where username = ? and password = ?";
//2.执行sql
user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username,password);
} catch (Exception e) {
}
return user;
}
ActiveUserServlet
@WebServlet("/activeUserServlet")
public class ActiveUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取激活码
String code = request.getParameter("code");
if(code != null){
//2.调用service完成激活
UserService service = new UserServiceImpl();
boolean flag = service.active(code);
//3.判断标记
String msg = null;
if(flag){
//激活成功
msg = "激活成功，请<a href='login.html'>登录</a>";
}else{
//激活失败
msg = "激活失败，请联系管理员!";
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(msg);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
说不安全被拦截了，手动点击地址
设置页面头部的用户名.
head.html
<!-- 头部 start -->
<script>
$(function () {
$.get("findUserServlet",{},function (data) {
//{uid:1,name:'李四'}
var msg = "欢迎回来，"+data.name;
$("#span_username").html(msg);
});
});
</script>
