黑马旅游网案例学习之注册功能(二)

(一)功能分析

(二)前台: 表单校验

<script>
            /*
			  表单校验：
             1.用户名：单词字符，长度8到20位
             2.密码：单词字符，长度8到20位
             3.email：邮件格式
             4.姓别：非空（因为是单选框）
             5.手机号：手机号格式
             6.出生日期：非空（因为使用了H5的插件）
             7.验证码：非空
             */
			//校验用户名
			function checkUsername() {
				var username = $("#username").val();
				var reg_username = /^\w{8,20}$/;
				var flag = reg_username.test(username);
				if (flag){
				    $("#username").css("border", "");
				} else {
				    $("#username").css("border", "1px solid red");
				}
				return flag;
            }
            //校验用户密码
            function checkPassword() {
                var password = $("#password").val();
                var reg_password = /^\w{8,20}$/;
                var flag = reg_password.test(password);
                if (flag){
                    $("#password").css("border", "");
                } else {
                    $("#password").css("border", "1px solid red");
                }
                return flag;
            }
            //校验邮箱
            function checkEmail() {
                var email = $("#email").val();
                var reg_email = /^\w+@\w+\.\w+$/;
                var flag = reg_email.test(email);
                if (flag){
                    $("#email").css("border", "");
                } else {
                    $("#email").css("border", "1px solid red");
                }
                return flag;
            }
            //校验姓名
            function checkName() {
                var name = $("#name").val();
                var reg_name = /^\S+$/;
                var flag = reg_name.test(name);
                if (flag){
                    $("#name").css("border", "");
                } else {
                    $("#name").css("border", "1px solid red");
                }
                return flag;
            }
            //校验手机号码
            function checkTelephone() {
                var telephone = $("#telephone").val();
                var reg_telephone = /^1(3|4|5|7|8)\d{9}$/;
                var flag = reg_telephone.test(telephone);
                if (flag){
                    $("#telephone").css("border", "");
                } else {
                    $("#telephone").css("border", "1px 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", "1px solid red");
                }
                return flag;
            }
            //校验验证码
            function checkCheck() {
                var check = $("#check").val();
                var reg_check = /^\S+$/;
                var flag = reg_check.test(check);
                if (flag){
                    $("#check").css("border", "");
                } else {
                    $("#check").css("border", "1px solid red");
                }
                return flag;
            }
			$(function () {
				//校验表单提交时，调用所有的校验方法
				$("#registUserServlet").submit(function () {
					if(checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday() && checkCheck()) {
					//异步(ajax)提交表单
                        $.post("user/regist", $(this).serialize(), function (data) {
                            if (data.flag) {
                                location.href = "register_ok.html";
                            } else {
                                $("#errorMsg").html(data.errorMsg);
                                //
                                changeCheckCode(document.getElementById("checkCode_img"));
                            }
                        })
                    }
                    return false;
                    });
                //当某一个组件失去焦点是，调用对应的校验方法
				$("#username").blur(checkUsername);
				$("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
                $("#name").blur(checkName);
                $("#telephone").blur(checkTelephone);
                $("#birthday").blur(checkBirthday);
                $("#check").blur(checkCheck);
            });
		</script>

(三)后台: 处理字符集编码的过滤器

/**
 * 解决全站乱码问题，处理所有的请求
 */
@WebFilter("/*")
public class CharchaterFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse rep, FilterChain filterChain) throws IOException, ServletException {
        //将父接口转为子接口
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) rep;
        //获取请求方法
        String method = request.getMethod();
        //解决post请求中文数据乱码问题
        if(method.equalsIgnoreCase("post")){
            request.setCharacterEncoding("utf-8");
        }
        //处理响应乱码
        response.setContentType("text/html;charset=utf-8");
        filterChain.doFilter(request,response);
    }

    @Override
    public void destroy() {

    }
}

(四)后台: 用于封装后端返回前端数据对象的类

/**
 * 用于封装后端返回前端数据对象
 */
public class ResultInfo implements Serializable {
    private boolean flag;//后端返回结果正常为true，发生异常返回false
    private Object data;//后端返回结果数据对象
    private String errorMsg;//发生异常的错误消息

    //无参构造方法
    public ResultInfo() {
    }
    public ResultInfo(boolean flag) {
        this.flag = flag;
    }
    /**
     * 有参构造方法
     * @param flag
     * @param errorMsg
     */
    public ResultInfo(boolean flag, String errorMsg) {
        this.flag = flag;
        this.errorMsg = errorMsg;
    }
    /**
     * 有参构造方法
     * @param flag
     * @param data
     * @param errorMsg
     */
    public ResultInfo(boolean flag, Object data, String errorMsg) {
        this.flag = flag;
        this.data = data;
        this.errorMsg = errorMsg;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public String getErrorMsg() {
        return errorMsg;
    }

    public void setErrorMsg(String errorMsg) {
        this.errorMsg = errorMsg;
    }
}

(五)后台代码:

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");
            return;
        }
        //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 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);
    }
}

UserDaoImpl

public class UserDaoImpl implements UserDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    @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 (DataAccessException e) {

        }
        return user;
    }

    @Override
    public void save(User user) {
        String sql = "inser into tab_user(username,password,name,birthday,sex,telemphone,email)values(?,?,?,?,?,?,?)";
        template.update(sql,user.getUsername(),
                user.getPassword(),
                user.getName(),
                user.getBirthday(),
                user.getSex(),
                user.getTelephone(),
                user.getEmail());
    }

UserServiceImpl

public class UserServiceImpl implements UserService {
    private UserDao userDao = new UserDaoImpl();
    /**
     * 注册用户
     * @param user
     * @return
     */
    @Override
    public boolean regist(User user) {
        User u = userDao.findByUsername(user.getUsername());
        if (u != null){
            return false;
        }
        userDao.save(user);
        return true;
    }