🍀 注册分析
🍀 表单校验1
主要是为了 测试分析校验 测试表单的提交与否
<script>
/**
* 表单校验：
* 1。用户名 单词字符 8~20位
* 2.密码 单词字符 8~20位
* 3.Email 邮件格式
* 4.姓名 非空
* 5.手机号 手机号格式
* 6.出生日期 非空
* 7.验证码 非空
*/
//校验用户名
function checkUsername() {
alert("用户名校验")
return false;
}
function checkPassword() {
alert("密码校验")
return false;
}
$(function () {
//当表单提交时 调用所有的校验方法
$("#registerForm").submit(function () {
return checkUsername() && checkPassword();
//如果这个方法没有返回值 或者返回值为true 则表单提交 如果返回为false 则表单不提交
})
//当某一个组件失去焦点时 调用对应的方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
})
</script>
🍀 表单校验2
表单提交的时候进行校验 鼠标离开输入框的时候校验 校验标准如下
<script>
/**
* 表单校验：
* 1。用户名 单词字符 8~20位
* 2.密码 单词字符 8~20位
* 3.Email 邮件格式
* 4.姓名 非空
* 5.手机号 手机号格式
* 6.出生日期 非空
* 7.验证码 非空
*/
//校验用户名
function checkUsername() {
//1.获取用户名值
var username = $("#username").val();
//2.定义正则
var reg_username = /^\w{8,20}$/;
//3.判断 给出提示
var flag = reg_username.test(username);
if (flag) {
//用户名合法
$("#username").css("border", "")
} else {
//用户名非法
$("#username").css("border", "2px solid red")
}
return 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", "2px solid red")
}
return flag;
}
//邮箱校验
function checkEamil() {
var email = $("#email").val();
// var reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱校验 复杂的
var reg_email = /^\w+@\w+\.\w+$/;//简单一点的
var flag = reg_email.test(email);
if (flag) {
$("#email").css("border", "")
} else {
$("#email").css("border", "2px solid red")
}
return flag;
}
//姓名校验
function checkName() {
var name = $("#name").val();
var reg_name = /^[\u4e00-\u9fa5]{2,6}$/;//汉字
var flag = reg_name.test(name);
if (flag) {
$("#name").css("border", "")
} else {
$("#name").css("border", "2px solid red")
}
return flag;
}
//手机号校验
function checkTelephone() {
var telephone = $("#telephone").val();
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}$/;//手机号
var flag = reg_telephone.test(telephone);
if (flag) {
$("#telephone").css("border", "")
} else {
$("#telephone").css("border", "2px solid red")
}
return flag;
}
//出生日期 正则 不为空 /^.+$/
function checkBirthday() {
var birthday = $("#birthday").val();
var reg_birthday = /^.+$/;//出生日期
var flag = reg_birthday.test(birthday);
if (flag) {
$("#birthday").css("border", "")
} else {
$("#birthday").css("border", "2px solid red")
}
return flag;
}
//验证码
function checkCheck() {
var check = $("#check").val();
var reg_check = /^.+$/;//验证码
var flag = reg_check.test(check);
if (flag) {
$("#check").css("border", "")
} else {
$("#check").css("border", "2px solid red")
}
return flag;
}
$(function () {
//当表单提交时 调用所有的校验方法
$("#registerForm").submit(function () {
return checkUsername() && checkPassword() && checkEamil() && checkName() && checkTelephone() && checkBirthday() && checkCheck();
//如果这个方法没有返回值 或者返回值为true 则表单提交 如果返回为false 则表单不提交
})
//当某一个组件失去焦点时 调用对应的方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEamil);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
$("#check").blur(checkCheck);
})
</script>🍀 异步提交表单
在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据
效果图
🍀 Servlet代码实现
编写RegistUserServlet
package cn.itcast.travel.web.servlet;
import cn.itcast.travel.domain.ResultInfo;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
/**
* @Author wang
* @Date 2022/5/23 16:18
* @PackageName:${PACKAGE_NAME}
* @ClassName: ${NAME}
* @Description: TODO
* @Version 1.0
*/
@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//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 userInfo = new ResultInfo();
//4.响应结果
if (flag) {
//注册成功
userInfo.setFlag(true);
} else {
//注册失败
userInfo.setFlag(false);
userInfo.setErrorMsg("注册失败");
}
//将info对象序列化为json
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(userInfo);
//将json数据写回客户端
//设置content-type
response.setContentType("application/json;charset=utf-8");
// response.getOutputStream().write(json.getBytes());
response.getWriter().write(json);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
UserService
UserServiceImpl
🍀 Dao代码实现
UserDao
UserDaoImpl
package cn.itcast.travel.dao.impl;
import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
/**
* @Author wang
* @Date 2022/5/23 16:23
* @PackageName:cn.itcast.travel.dao.impl
* @ClassName: UserDaoImpl
* @Description: TODO
* @Version 1.0
*/
public class UserDaoImpl implements UserDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public User findByUsername(String username) {
//1.定义sql
String sql = "select * from tab_user where username = ?";
//2.执行sql
User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
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());
}
}
🍀 service代码实现&测试
UserServiceImpl
package cn.itcast.travel.service.impl;
import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.dao.impl.UserDaoImpl;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;
/**
* @Author wang
* @Date 2022/5/23 16:22
* @PackageName:cn.itcast.travel.service.impl
* @ClassName: UserServiceImpl
* @Description: TODO
* @Version 1.0
*/
public class UserServiceImpl implements UserService {
private UserDao userDao = new UserDaoImpl();
@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;
}
}
代码健壮性校验
测试效果图
在测试的过程中 如果控制台错误日志 原因解决
🍀 后台_验证码&前台数据处理
但是在之前的表单中 是没有校验验证码的 正常是要先校验验证码 才能进行下一步的注册
RegistUserServlet
@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//验证码校验
String check = request.getParameter("check");
//从session中获取验证码
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 userInfo = new ResultInfo();
//验证码校验失败
userInfo.setFlag(false);
userInfo.setErrorMsg("验证码错误");
//将info对象序列化为json
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(userInfo);
//将json数据写回客户端
//设置content-type
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(json);
return;
}
//1.获取数据
Map<String, String[]> map = request.getParameterMap();
.......
.......
.......
register.html
$(function () {
//当表单提交时 调用所有的校验方法
$("#registerForm").submit(function () {
//1.发送数据到服务器
if (checkUsername() && checkPassword() && checkEamil() && checkName() && checkTelephone() && checkBirthday() && checkCheck()) {
//校验通过 发送ajax请求 提交表单的数据 usernamezhangsan & password=123
$.post('registUserServlet', $(this).serialize(), function (data) {
//处理服务器响应的数据 data:{flag:true,errorMsg:'注册失败'}
if (data.flag) {
//注册成功 跳转页面
location.href = "register_ok.html";
} else {
//注册失败 给error添加提示信息
$("#errorMsg").html(data.errorMsg)
}
})
}<div id="errorMsg" style="color: red;text-align: center;font-size: 25px;"></div> <!--注册表单-->
测试效果图
🍀 后台_邮件激活分析
邮件激活
为什么要进行邮件激活？为了保证用户填写的邮箱是正确的。将来可以推广一些宣传信息，到用户邮箱中
🍀 邮件激活_发送邮件
- 申请邮箱
- 开启授权码
- 在MailUtils中设置自己的邮箱账号和密码(授权码)
邮件工具类：MailUtils，调用其中sendMail方法可以完成邮件发送
效果图
🍀 邮件激活_点击激活分析
经过分析，发现，用户激活其实就是修改用户表中的status为‘Y’
UserServiceImpl
public class UserServiceImpl implements UserService {
private UserDao userDao = new UserDaoImpl();
@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);
//激活邮件发送 邮件正文
String content = "<a href = ‘http://localhost:8888/travel/activeUserServlet?code=" + user.getCode() + "’>点击激活[黑马旅游网]</a>";
MailUtils.sendMail(user.getEmail(), content, "激活邮件");
return true;
}
}
测试效果图
🍀 邮件激活代码实现Servlet
ActiveUserServlet
package cn.itcast.travel.web.servlet;
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author wang
* @Date 2022/5/24 10:20
* @PackageName:${PACKAGE_NAME}
* @ClassName: ${NAME}
* @Description: TODO
* @Version 1.0
*/
@WebServlet("/activeUserServlet")
public class ActiveUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取激活码
String code = request.getParameter("code");//获取通过http协议提交过来的数据. 不仅仅代表表单提交 而且有自定义参数
if (code != null) {
//2.调用service完成激活
UserService service = new UserServiceImpl();
boolean flag = service.active(code);
//3。判断标记
String msg = "";
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);
}
}
🍀 邮件激活代码实现Service&Dao
UserService
UserServiceImpl
@Override
public boolean active(String code) {
//1.根据激活码查询用户对象
User user = userDao.findByCode(code);
if (user != null) {
userDao.updateStatus(user);
return true;
} else {
return false;
}
}UserDao
UserDaoImpl
/**
* 保存用户对象
*
* @param 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()
);
}
/**
* 根据激活码查询用户对象
*
* @param code
* @return
*/
@Override
public User findByCode(String code) {
String sql = "select * from tab_user where code = ?";
//当sql的返回对象 要么只有一个要么没有的时候 使用方法 queryForObject() 这个方法如果没有查出来时 会出异常 不会返回null
User user = null;
try {
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());
}效果图
4691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
