旅游网站练习（1）之用户注册功能部分

1引言

此例子从网上某机构下载的练习案例，大家可以参照这个步骤做一个旅游网站，他提供的资料有前端静态界面

我们需要根据实际功能对其进行完事。

这篇主要说如何通过点击注册按钮从数据库中查找对应用户信息并判断此用户名能否被注册，大致需要实现的思路流程如下

• 1 在注册界面填写各种注册信息，每条注册信息填写完，光标失去焦点即判断信息格式是否合格，如果不合格错误格式信息框边红
• 2 点击注册提交按钮，先对验证码进行判断
• 3 如果验证码不正确，则点击提交表单（submit）后页面不跳转且提示验证码错误信息
• 4 如果验证码正确，对所有填写的信息格式进行判断，如果有错误则把页面不跳转，且错误格式信息框边红
• 5 如果验证码及所填信息格式正确，跳转至注册成功界面，且注册信息保存到对应数据库中

2 导入已经完成的大体mavenweb项目的前端静态界面框架（因为重点在于后端mvc架构的编写，以及前后端交互信息传递）

2.1导入maven web项目

• 点击mavenproject-点击+号-选择需要导入项目下的pom.xml文件
• 等待一段时间后项目导入成功

项目导入成功后界面的project处就会显示此项目的相关资源文件

2.2 配置maven快速启动方式

点击红框选项

配置maven快速启动

• 点击+号
• 选择maven选项
• 为此maven启动器命名为travel（自定义）
• 配置启动方式 tomcat7:run(因为在pom.xml中注入的依赖是tomcat7)
• 完成

配置完成 界面右上方出现 则maven快速启动方式配置完成 点击右边三角即可启动，点击红色按钮可以停止

上述方式等同于

3界面注册功能的实现

3.1静态界面如下

3.2需要完成的功能概述

/*
* 表单校验 
信息格式验证 使用正则表达式
当光标在输入框中失去焦点时进行格式验证以及点击提交按钮时进行验证
如果用户名不存在则保存此信息 否则返回标记表示此用户名已被使用
*   1用户名：单词字符长度2-20位
*   2密码：密码至少8位，至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，不能带有空格，其他可以是任意字符
*   3Email：邮件格式 
*   4姓名：非空
*   手机号：手机号格式
*   出生日期：非空
*   验证码：非空
* */

3.3 输入框中信息格式的验证

思路：在前端单独写出每个输入框信息的验证方式——当光标是去焦点时调用验证方法——当提交表单按钮时调用验证方法，验证成功跳转界面，验证失败显示提示信息

3.3.1获取输入框输入的信息数据 与其对应信息数据正则表达式进行判断

//校验用户名
			function checkUsername(){
				var  username = $("#username").val();
				//:\w表示任意字符 
				 var  reg_username=/^\w{2,20}$/;
				 var flag = reg_username.test(username); //test() 方法用于检测一个字符串是否匹配某个模式.
                //判断
				if (flag){
				    //用户名合法
                    $("#username").css("border","");
					//alert("用户名合法");

				}else {
				    //用户名非法 为其添加一像素红色边框
					$("#username").css("border","1px solid red");
					//alert("用户名不合法")
				}
				return flag;
			}
			//校验密码
            function checkPassword(){
			    //获取输入框中密码信息
			    var password = $("#password").val();
			    //判断密码内容正则表达式
				//密码至少8位，至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，不能带有空格，其他可以是任意字符
				var reg_password=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^\s]{8,16}$/;
                var flag = reg_password.test(password);
				if (flag){
				    //如果密码格式合格
					$("#password").css("border","");
					//alert("密码格式合格")
				} else {
				    //如果密码格式非法
					$("#password").css("border","1px solid red");
					//alert("密码格式不合格")
				}
				return flag;
            }
            //校验Email
			function checkEmail(){
			    //获取文本框数据
			    var email = $("#email").val();
			    //邮箱验证正则表达式
				var reg_email = /^\w+@\w+\.\w+$/;
				var flag =reg_email.test(email);
				if (flag){
				    //如果邮箱格式合法
                    $("#email").css("border","");
                    //alert("邮箱格式正确")
				}else {
				    //如果邮箱格式不合法
					$("#email").css("border","1px solid red");
					//alert("邮箱格式不正确")
				}
				return flag;
			}
			//校验姓名
			function checkRealname(){
			    //姓名只能为英文字符
				//获取文本框中内容
				var realname = $("#name").val();
				var reg_realname = /^[a-zA-Z]+$/;
				var flag = reg_realname.test(realname);
				if (flag){
				    //如果姓名格式合法
					$("#name").css("border","");
				}else {
				    //如果姓名格式不合法
					$("#name").css("border","1px solid red");
				}
				return flag;
			}
			//校验手机号
			function checkPhoneNum(){
			    var phone = $("#telephone").val();
			    //校验手机号 第一个字符为1其他的0-9共11位
			    var reg_phone = /^1[0-9]{10}$/;
			    var flag = reg_phone.test(phone);
			    if (flag){
			        $("#telephone").css("border","");
				}else {
			        $("#telephone").css("border","1px solid red");
				}
				return flag;
			}

代码分块解析

其他格式验证部分的思路相同

3.3.2当输入框光标是去焦点时调用信息格式验证

//当某一组件处失去焦点时，调用相应校验方法

				//用户名
				$("#username").blur(function () {
					checkUsername();
                });
				//密码
				$("#password").blur(function () {
				    checkPassword();
                })
				//邮箱
				$("#email").blur(function () {
					checkEmail();
                })
				//姓名
				$("#name").blur(function () {
					checkRealname();
                })
				//手机号
				$("#telephone").blur(function () {
					checkPhoneNum();
                })
            })

代码解释

3.3.3 当提交表单按钮时调用验证方法，验证成功跳转界面，验证失败显示提示信息

//总表单提交时调用所有校验方法 获取返回值进行判断
			$(function () {
                //当表单提交时(也就是点击submi时)调用所有信息的校验方法
				$("#registerForm").submit(function () {
				    /*使用ajax异步来进行表单数据提交。因为html界面不可以获取到由session等域中发送的相关数据
					只能通过ajax获取响应数据*/

				    //如果校验成功
				    if (checkUsername()&&checkPassword()&&checkEmail()&&checkRealname()&&checkPhoneNum()){
				        alert("校验成功");
				        //ajax异步请求提交表单
						//第二个参数应该填写是用户表单中填写的数据
						$.post("registerUserServlet",$("#registerForm").serialize(),function(data){
						//处理服务器响应的数据data
							if (data.flag){
							    alert("跳转页面");
							    //注册成功 跳转成功页面
								location.href="register_ok.html";
							}else {
							    alert("不跳转 报错")
								alert(data.errorMsg)
                                //location.href="register_nook.html";
							    $("#errorMsg").html(data.errorMsg);
							}
						},"json");
						//以json格式接收数据 因为json做为客户端与服务器端传递数据的载体
					}
                    //2.不让页面跳转 表单不提交 否则表单会自己做一次提交操作
                    return false;
                });

重点代码解释

 

 

3.4后端判断用户名信息是否被注册方式实现

3.4.1表示层

@WebServlet("/registerUserServlet")
public class RegisterUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1设置编码 因为要提交数据是post请求 获取数据请求 确保浏览器发给服务器loginServlet的参数是以汉字的编码来提取
        request.setCharacterEncoding("utf-8");
        //校验验证码
        String check = request.getParameter("check");
        //获取验证码
        HttpSession session = request.getSession();
        String checknum= (String) session.getAttribute("CHECKCODE_SERVER");
        //为了保证验证码只能使用一次
        session.removeAttribute("CHECKCODE_SERVER");

        //验证比较 忽略大小写
        if (checknum==null||!checknum.equalsIgnoreCase(check)){
            //验证码错误
            ResultInfo info = new ResultInfo();
            // 注册失败
            info.setFlag(false);
            info.setErrorMsg("验证码错误");
            System.out.println("验证码错误");
            //序列化info
            ObjectMapper mapper = new ObjectMapper();
            //把info（java类型对象）转为json类型对象
            String json = mapper.writeValueAsString(info);
            response.getWriter().write(json);
            return;
            //这里加return表示只有执行了if里面语句 就不往下执行了之后的就是验证码判断正确的内容
        }
        System.out.println("验证码正确");


        //1获取数据
        Map<String,String[]> map =  request.getParameterMap();
        //2封装数据对象
        User user = new User();
        try {
            //把获取的所有请求参数映射到bean中
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //调用service完成注册
        UserService userService = new UserServiceImpl();
        boolean flag = userService.regist(user);
        //调用ResultInfo中封装好的方法
        ResultInfo info = new ResultInfo();
        //4响应结果
        if (flag){
            //注册成功
            info.setFlag(true);
        }else {
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败");
        }
        //将info对象序列化为json类型数据 并传输到客户端 因为之前已经把需要反馈给客户端的数据信息封装到info中
        //创建json核心对象
        ObjectMapper mapper = new ObjectMapper();
        //将对象转为json字符串
        String json = mapper.writeValueAsString(info);
        /*//设置客户端响应接收服务器端数据的格式  不用写了在客户端设置了接收服务器端数据类型为json
        response.setContentType("application/json;charset=utf-8");*/
        //将json数据写回客户端 可以用字节流/字符流
        response.getWriter().write(json);
    }

验证输入的验证码是否正确 验证码不正确则不进行用户名是否存在的查找方式

如果验证码正确则调用业务逻辑层调用数据访问层来访问数据信息 并判断用户名是否存在

3.4.2业务逻辑层

public class UserServiceImpl implements UserService {
    /**
     * 注册用户
     * @param user
     * @return
     */
    UserDao userDao = new UserDaoImpl();
    @Override
    public boolean regist(User user) {
       // System.out.println("srvice"+user.getBirthday());
        //调用dao中从数据查找数据 是否用户名已经被注册
        //1 根据用户查询用户对象
        //调用dao的findByUsername方法
        User user1 = userDao.findByUsername(user.getUsername());
        //System.out.println("srvice"+user.getUsername());
        //判断user1是否为null如果为null说明数据库中没有这个数据对象
        if (user1!=null){
            //用户名存在 注册失败
            return false;
        }else {
            //2 保存用户信息
            //调用dao的save方法
            userDao.save(user);
            return true;
        }

    }
}

3.4.3 数据访问层

public class UserDaoImpl implements UserDao {
    //获取数据库连接
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public User findByUsername(String username) {
        User user = null;
        try {
            //定义sql
            String sql = "select *from tab_user where username = ?";
            //从数据库中查询
            //如果没有查询到会报异常而不是返回 null 所以抓取异常定义其返回null
            user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username);
            System.out.println("信息存在");
        } catch (Exception e) {
            System.out.println("信息不存在");
            //如果没有获取到数据 返回默认的user=null
        }
        return user;
    }

    @Override
    public void save(User user) {
        System.out.println("save"+user);
        //定义sql
        String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email) values(?,?,?,?,?,?,?)";
        //执行sql  如果更新数据成功会返回一个int类型数据
        template.update(sql,user.getUsername(),user.getPassword(),user.getName(),user.getBirthday(),user.getSex(),user.getTelephone(),user.getEmail());
    }
}

重要代码解释

4本章结语

因为程序其实还是比较复杂，仅此仅仅记录一些关键思路，逻辑表述可能比较跳动。欢迎有问题进行交流