前台注册页面注册校验成功 使用异步交互(JQuery-ajax) 点击注册 将当前提交内容从后台数据库查询是否存在
$(function () {
$("#registerForm").submit(function () {
if(checkUsername() && checkPassword() && checkEmail() && checkTelephone()){
$.post("user/regist",$(this).serialize(),function (data) {
if(data.flag){
location.href="register_ok.html" ;
}else{
$("#errorMsg").html(data.errorMsg) ;
}
}) ;
}
A.将 registerForm 表单的数据 在点击注册时提交至后台 submit
B.对提交的数据进行判断 采用正则表达式的方式
例如
/**
* 用户定义规则
* 用户名:单词字符,[a-zA-Z0-9](w表示单词字符),8-20位
* 密码:8-20位的单词字符
* 邮箱:要符合邮件格式 :
* 姓名:非空
* 手机号:11个数字(第一个数字不能0)
* 性别:非空
* 出生日期: 非空
* 验证码:非空
*
```javascript
C.符合条件 则向服务器发送异步请求
```javascript
//$("#registerForm").serialize():将表单中的数据全部序列字符串内容
$.post("user/regist",$(this).serialize(),function (data)
提交方式 使用post提交至后台 在这里我们对user 进行模块化封装
将registServlet变为 user下的一个方法过程
1.抽取一个基类 BaseServlet
2.覆写service方法采用反射的方式
// / travle/user/add :获取访问子类Servlet的uri的路径
String uri = request.getRequestURI();
// 获取uri中的方法名add travel/user/add
String methodName = uri.substring(uri.lastIndexOf("/")+1) ;//start end
//1 .获取子类对象
Class clazz = this.getClass();
//2.调用子类中的方法
//暴力反射(获取子类私有的/受保护的方法)
try {
// Method method = clazz.getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
Method method = clazz.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
//调用方法
/**
* 为 true 则指示反射的对象在使用时应该取消 Java 语言访问检查
*/
//(调用子类的方法,proptected修饰)
// method.setAccessible(true);
method.invoke(this,request,response) ;
01 通过request.getRequestURI();
02 获取前台返回的uri地址字符串
03 获取\最后一个字符串 为user方法名
04 采用反射的方式 获取同一个包下的user 同名的方法
05 Method.invoke(this,request,respnse)
D.使用静态页面 在页面中不能从服务器后台获取数据${域对象}
使用jquery-ajax 实现异步交互
返回值 $.post(url,[data],[callback],[type])
(1)Url:一异步后台数据地址url
(2)Param:提交表的参数数据
(3)Username=zhangsan&password
(4)Fucntion(data) data(服务器响应过来的数据[json])
E.对从后台传过来的数据判断 有数据则跳转页面无数据则报错
F.当时去焦点时候也进行提交判断
$("#username").blur(checkUsername) ;
$("#password").blur(checkPassword);
$("#email").blur(checkEmail) ;
$("#telephone").blur(checkTelephone) ;
我们进入User继承BaseServlet 将所有通=同基类的子类进行模块化封装
验证码问题
(1)对前台返回的验证码进行判断 request.getParameter(“check”); 获取传回的验证码字符串
(2)采用serssion域的方式拿到后台服务区产生的随机验证码 获取使用一次后从session域中删除
String checkcode_server = (String) request.getSession().
getAttribute("CHECKCODE_SERVER");
request.getSession().removeAttribute("CHECKCODE_SERVER");
(3)当没有从后台获取到或者两个验证码不相等则向前端返回验证码错误
<!--错误提示-->
<div id="errorMsg" style="color: red;text-align: center;font-size: 25px">
前端加入div块 用来展示错误信息
后台
if(checkcode_server==null || !checkcode_server.equalsIgnoreCase(check)){
//验证码存在问题
//创建响应结果对象
ResultInfo resultInfo = new ResultInfo() ;
//设置响应数
resultInfo.setFlag(false);
resultInfo.setErrorMsg("验证码存在问题!!");
//创建json的解析对象 (jackson的jar包核心类)
ObjectMapper mapper = new ObjectMapper() ;
String json = mapper.writeValueAsString(resultInfo);
//设置服务器响应格式 :json类型
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(json);
//不执行了
return ;
使用ResultInfo 封装从从后台返回到前台的对象
private boolean flag;//后端返回结果正常为true,发生异常返回false
private Object data;//后端返回结果数据对象
private String errorMsg;//发生异常的错误消息
创建json解析对象mapper向前台返回信息
使用response 设置服务器响应
(2)使用Map获取返回的参数数据
(3)封装User对象
(4)使用beanutils工具 封装javabean
(5)调用service 查询前台返回的数据
UserService userService = new UserServiceImpl() ;
boolean flag = userService.regist(user) ;
(6)对响应的结果进行判断 使用ResuktIfo对象 存储响应的结果
(7)使用json的方式将ResultInfo响应到前台
3)注册功能(Service)
Public interface Uservice{
Boolean regist(User user)
}
对接口进行实现
public boolean regist(User user) {
//1.调用dao,通过用户名查询用户
User u = userDao.findByUsername(user.getUsername());
if(u!=null){
return false ;
}
user.setCode(UuidUtil.getUuid()); //生成随机的激活码(唯一的)
user.setStatus("N");
userDao.saveUser(user); //存储user对象
String content = "您的邮箱尚未激活,请点击激活" ;
MailUtils.sendMail(user.getEmail(),content,"激活") ;
return true;
}
1)
调用dao层对返回的user对象进行查询 判断用户是否为空 不能查询到return false
2)
设置激活码
user.setCode(UuidUtil.getUuid()); //生成随机的激活码(唯一的)
实用工具类生成唯一激活码
User.setStatus(“N”) 设置用户的激活状态;
3)
String content = "您的邮箱尚未激活,请点击激活" ;
MailUtils.sendMail(user.getEmail(),content,"激活") ;
使用邮件的方式 向用户邮箱发送激活信息
4)注册功能(Dao)
/**
* 根据用户名查询用户
* @param username
* @return
*/
public interface UserDao {
public User findByUsername(String username) ;
}
接口实现
public class UserDaoImpl implements UserDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource()) ;
/**
* 根据用户名查询用户
* @param username
* @return
*/
@Override
public User findByUsername(String username) {
User user = null ;
try{
String sql ="select * from tab_user where username = ?" ;
user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
}catch (Exception e){
}
return user;
}
·使用jdbcTemplate操作数据库
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource()) ;
创建操作数据库的对象
user = template.queryForObject(sql, new BeanPropertyRowMapper(User.class), username);
向数据库传递sql语句 并且返回查询结果
存储user对象
@Override
public void saveUser(User user) {
//准备sql
String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)" ;
//执行更新
template.update(sql,user.getUsername(),
user.getPassword(),
user.getName(),
user.getBirthday(),
user.getSex(),
user.getTelephone(),
user.getEmail(),
user.getStatus(),
user.getCode()) ;
}
总结:
1)前台返回方式 发送异步请求 通过获取json的方式获取后台返回的内容
2)servlet获取参数数据 beanutils序列化表单封装user对象
3)模块化注意修改
否则不能正确访问后台
4)前台提交post url加上user