JavaWeb-旅遊網-註冊和登錄

最近仿照着黑馬旅遊網寫了個旅遊網項目，界面和圖片用的是黑馬的，畢竟界面太難畫…，但是不是響應式的，等改天用Bootstrap重構成響應式的，功能跟黑馬的基本一樣，我在此基礎上進行了一些添加和優化。
在寫的過程，收穫到了很多知識，所以總結一下這幾天所收穫同時也重新梳理整個項目的流程，涉及的功能較多，我會分成幾篇博客進行總結
本次沒有使用jsp，前端單純的就是html,後臺提供接口，通過Ajax進行請求
因爲用的是黑馬的界面和圖片，如果涉及侵權了，請聯繫我，我會道歉並且刪除博客。

JavaWeb-旅遊網-導航條和分頁展示
JavaWeb-旅遊網-線路搜索
JavaWeb-旅遊網-詳情展示
JavaWeb-旅遊網-點擊收藏

註冊

功能：註冊提交後會發送給用戶一封激活郵件，只有激活用戶纔可登錄到主界面
頁面：

前端使用JQuery對用戶輸入的信息進行校驗,只有當全部信息符合要求時纔可進行註冊

			//檢驗用戶名
			function checkUserName() {
				//1.獲取用戶名的值
				var username = $("#username").val();
				//2.定義正則
				var reg_username = /^\w{2,10}$/;
				//3.判斷
				var flag = reg_username.test(username);
				if (flag){
				    //合法用戶名
                    $("#username").css("border","");
				} else{
				    //非法用戶名,紅色邊框提示非法
					$("#username").css("border","1px solid red");
				}
				return flag;
            }
            //檢驗密碼
			function checkPassWord() {
                //1.獲取用戶名的值
                var password = $("#password").val();
                //2.定義正則
                var reg_password = /^\w{6,20}$/;
                //3.判斷
                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() {
                //1.獲取用戶名的值
                var username = $("#name").val();
                //3.判斷
				var flag = true;
                if (username.length == 0){
                    //姓名爲空
					flag = false;
                    $("#name").css("border","1px solid red");
                } else{
                    flag = true;
                    $("#name").css("border","");
                }
                return flag;
            }
            //檢驗手機號
            function checkTel() {
                //1.獲取用戶名的值
                var telephone = $("#telephone").val();
                //正則
                var reg_tel = /^[1][3,4,5,7,8][0-9]{9}$/;
                //3.判斷
                var flag = reg_tel.test(telephone);
                if (!flag){
                    $("#telephone").css("border","1px solid red");
                } else{
                    $("#telephone").css("border","");
                }
                return flag;
            }
            //檢驗出生日期
            function checkBirth() {
                //1.獲取用戶名的值
                var birthday = $("#birthday").val();
                //3.判斷
                var flag = true;
                if (birthday.length == 0){
                    //姓名爲空
                    flag = false;
                    $("#birthday").css("border","1px solid red");
                } else{
                    flag = true;
                    $("#birthday").css("border","");
                }
                return flag;
            }
            $(function(){
                //當表單提交，調用所有校驗方法,返回爲true，表單提交
				$("#registerForm").submit(function(){
				    if (checkUserName()&&checkPassWord()&&checkEmail()&&checkName()&&checkTel()&&checkBirth()){
				        //檢驗通過，發送Ajax請求，提交表單的數據,$(this).serialize()該方法將表單數據序列化成: key=value&key=value的格式
						$.post("user/regist",$(this).serialize(),function (data) {
							if(data.flag){
							    //註冊成功
								location.href="register_ok.html"
							}else{
							    //註冊失敗,添加提示信息
								$("#errorMsg").html(data.errorMsg);
							}
                        })
					}
				    return false;
				});
                //當某個組件失去焦點，調用對應的校驗
				$("#username").blur(checkUserName)
				$("#password").blur(checkPassWord)
				$("#email").blur(checkEmail)
				$("#name").blur(checkName)
				$("#telephone").blur(checkTel)
				$("#birthday").blur(checkBirth)
            });

不符合要求的信息會有紅框提示

信息都符合要求後，發送Ajax請求，後臺進行註冊,使用了MD5加鹽（用戶名+密碼）的方式對用戶密碼進行加密，註冊完成後發送激活郵件給用戶
後臺代碼：

public void regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //獲取數據
        Map<String,String[]> map = request.getParameterMap();
        //封裝對象
        User user = new User();
        try {
            BeanUtils.populate(user,map );
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //調用service完成註冊
        UserService service = new UserServiceImpl();
        boolean flag = service.regist(user);
        ResultInfo info = new ResultInfo();
        //響應消息
        if(flag){
            //註冊成功
            info.setFlag(true);
        }else {
            //註冊失敗
            info.setFlag(false);
            info.setErrorMsg("註冊失敗");
        }
        //將info對象序列化爲Json,返回客戶端
        //將json數據寫回客戶端
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(getJson(info));

    }

用戶只有在激活了賬戶後才能進行正常的使用，每個用戶都會自動生成唯一的激活碼，後臺根據唯一的激活碼進行激活狀態的更改

  public boolean regist(User user) {
        //根據用戶名查詢用戶對象
        User u = userDao.findByUserName(user.getUsername());
        if(null != u){
            return false;
        }
        //郵件激活準備
        //設置激活碼，唯一字符串
        user.setCode(UuidUtil.getUuid());
        //設置激活狀態
        user.setStatus("N");
        //保存用戶信息
        userDao.regist(user);
        //激活郵件發送
        String content = "<a href ='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>點擊激活【黑馬旅遊網】</a>";
        MailUtils.sendMail(user.getEmail(),content ,"激活郵件" );

        return true;
    }

激活賬戶

     //獲取激活碼
        String code = request.getParameter("code");
        if(null != code){
            //調用service完成激活
            UserService service = new UserServiceImpl();
            boolean flag = service.active(code);
            //判斷標記
            String msg = null;
            if(flag){
                msg = "激活成功，請<a href='login.html'>登錄</a>";
            }else {
                msg = "激活失敗";
            }
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write(msg);
        }

用戶收到的郵件

登錄

功能：用戶輸入用戶名，密碼和驗證碼，來到主界面
頁面：

前端通過JavaScript對登錄信息進行簡單的非空判斷，只有都寫了才能點擊登錄

	function checkUserName(){
		    var username = $("#username").val();
            var flag = true;
            if (username.length == 0){
                //姓名爲空
                flag = false;
                $("#username").css("border","1px solid red");
            } else{
                flag = true;
                $("#username").css("border","");
            }
            return flag;
		}
        //檢查密碼是否輸入
        function checkPassWord(){
            var password = $("#password").val();
            var flag = true;
            if (password.length == 0){
                //姓名爲空
                flag = false;
                $("#password").css("border","1px solid red");
            } else{
                flag = true;
                $("#password").css("border","");
            }
            return flag;
        }
        //檢查驗證碼是否輸入
        function checkCode(){
            var code = $("#check").val();
            var flag = true;
            if (code.length == 0){
                //姓名爲空
                flag = false;
                $("#check").css("border","1px solid red");
            } else{
                flag = true;
                $("#check").css("border","");
            }
            return flag;
        }

發送Ajax，後臺對登錄信息進行認證將結果以json格式返回到前端，前端根據結果進行相應處理，
前端代碼：

$(function () {
            //給登錄按鈕註冊點擊事件
            $("#btn_submit").click(function(){
				//Ajax請求，提交表單數據
				if (checkUserName&&checkPassWord()&&checkCode()){
                    $.post("user/login",$("#loginForm").serialize(),function (data) {
                        //處理響應結果
                        if (data.flag){
                            //登錄成功
                            location.href="index.html"
                        }else{
                            //登錄錯誤，顯示提示信息同時更新驗證碼
                            $("#errorMsg").css("visibility","visible");
                            $("#errorMsg").html(data.errorMsg);
                            changeCheckCode();
                        }
                    });
				}
				return false;
            });
        })

後臺代碼：後臺進行認證時，先將前端傳過來的密碼進行MD5加密，然後再同數據庫進行認證，同時判斷驗證碼是否正確以及賬戶是否激活，提示以相應的信息

   public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //驗證碼校驗
        String check = request.getParameter("check");
        String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
        //保證驗證碼只能使用一次
        request.getSession().removeAttribute("CHECKCODE_SERVER");
        if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){
            ResultInfo info = new ResultInfo();
            info.setFlag(false);
            info.setErrorMsg("驗證碼錯誤");
            //將info對象序列化爲Json,返回客戶端
            //將json數據寫回客戶端
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(getJson(info));
            return;
        }
        //獲取用戶名和密碼
        Map<String,String[]> map = request.getParameterMap();
        //封裝對象
        User user = new User();
        try {
            BeanUtils.populate(user,map );
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //將密碼轉換成MD5加密，再後數據進行對比
        String password = user.getPassword();
        try {
            user.setPassword(Md5Util.encodeByMd5(user.getUsername()+password));
            System.out.println("MD5: "+Md5Util.encodeByMd5(user.getUsername()+password));
        } catch (Exception e) {
            e.printStackTrace();
        }
        //查詢
        UserService service = new UserServiceImpl();
        User u = service.login(user);
        //判斷用戶信息是否正確
        ResultInfo info = new ResultInfo();
        if(null == u){
            info.setFlag(false);
            info.setErrorMsg("用戶名或密碼錯誤");
        }
        if(null != u&& !"Y".equals(u.getStatus())){
            //未激活
            info.setFlag(false);
            info.setErrorMsg("尚未激活，請激活後重新登錄");
        }
        if(null != u &&"Y".equals(u.getStatus())){
            //將user對象存進session
            request.getSession().setAttribute("user",u);
            info.setFlag(true);
        }
        //JSON格式
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(getJson(info));

    }

登錄後的用戶名顯示

未登錄前

登錄後

因爲前後端分離，所以沒法像之前那樣通過session獲得用戶，這裏依然使用Ajax向後臺請求用戶信息

 $.get("user/findUser",{},function (data) {
           var msg = "歡迎，"+data.username;
           //顯示登錄後的div
           $("#login").css('display','block');
           //將登錄前的div隱藏
           $("#logout").css('display','none');
           $("#name").html(msg);
        });

後臺代碼

    public void findUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //從session中獲取登錄用戶
        Object user = request.getSession().getAttribute("user");
        //將user寫回客戶端
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(getJson(user));
    }

這裏額外記錄一點，display屬性把元素隱藏後，隱藏的元素不會佔據位置，看不見也摸不着，而visibility屬性把元素隱藏後，隱藏的元素還是會佔據位置，看不見但摸得着

visibility:visible(顯示)/hidden(隱藏)
display:none(隱藏)/show(顯示)

退出

退出就會簡單了，把用戶信息從session中移除，刪除session，然後重定向到登錄頁面即可

    public void exit(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        HttpSession session = request.getSession();
        session.removeAttribute("user");
        session.invalidate();
        response.sendRedirect(request.getContextPath()+"/login.html");
    }