用戶的註冊登錄流程及代碼實現

時間 2021-08-15

標籤 html jquery ajax 正則表達式 sql 數據庫 json bootstrap 網絡 session 欄目 HTML 简体版

原文原文鏈接

沒有SSM框架前項目分包分層是這樣的. (其中的命名不太規範,應省略_)html

在有了框架以後項目使用SSM後sql語句都半封裝在了.....xml文件中.對應的Dao的接口中的方法,實現對數據庫的增刪改查操做.獲取JDBC連接寫在了mybatis的xml配置文件裏了.jquery

而servlet也變成了一個,並使用Spring,SpringMVC提供的IOC,DI,視圖解析等多工具,只使用指定的@...註解就能夠實現生成bean的對象,指定哪一個方法爲哪一個/*.do(action)路徑等.ajax

整體代碼量減小了,須要配置的xml文件多了.大部分的事情好像都交給了框架去作.突然感受一下落了空.不要緊,還有重要的事情要處理.正則表達式

上面的是一個簡單的用戶登錄的頁面,在相似 jq22 這樣的網站上能夠找到相似的jquery的相關工具js,如驗證碼.頁面效果.sql

當斷定用戶輸入的驗證碼與給出的一致後,進入用戶名及密碼的斷定,從數據庫查詢該用戶名和密碼,若是覈對正確,則登錄成功.反之.則反之.數據庫

具體註冊和登錄要使用ajax與json去傳遞數據,由於這樣能夠預先斷定用戶名是否已註冊,已經註冊的話,直接返回給用戶說已經註冊了,你就別用這個名字了,而後能夠跟一系列的隨機數字在這個名字後面(但這樣是否是仍是已經註冊了的,斷定起來就略麻煩些)json

  <!-- 登錄驗證碼,斷定後若是成功,再執行登錄方法 -->
  <script>
        $.idcode.setCode();
            
            $("#loginButton").click(function (){
                var IsBy = $.idcode.validateCode(); 
                /* alert(IsBy); */
                console.log(IsBy);
                if(!IsBy){ //若是驗證碼經過,則執行ajax的方法
                  event.preventDefault();
                }else{
                  loginUser();
                }
                
            });
   </script>

登錄:bootstrap

 <!-- 登錄的ajax方法 -->
   <script>
   
   function loginUser(){
   console.log("in loginUser() ~");
     var user_name = $("#user_name").val();
     var user_pwd = $("#user_pwd").val();
     
       /* var passPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/; */
       var namePattern = /^[a-zA-Z0-9_-]{4,16}$/;
       
      if(namePattern.test(user_name)){
        console.log(user_name);
        console.log(user_pwd);
        //用戶名RegExp正確後,再斷定其是否已經在數據庫中存在
        $.ajax({
            url:"<%=path%>/user/queryUserByNameAndPwd.do", //根據用戶名查詢用戶實例
            type:"POST",
            data:{"user_name":user_name, "user_pwd":user_pwd},
            dataType:"json",
            success:function(data){//響應回傳成功後到這裏
                if(data.code==1){//若是用戶名密碼正確,則登錄.
                    console.log(data.message);
                    document.forms["loginForm"].submit();
                    window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp";
                    /* return true; */
                }else if(data.code==0){
                    alert(data.message);
                    /* return false; */
                }else{
                    //用戶實例不爲空,但用戶名不等於該查詢的用戶名 (概率微乎其微)
                    alert("網絡錯誤,請稍後再試");
                    //發送BUG信息到管理員
                    /* return false; */
                }
                
            }
        })
      }
   
   }
   </script>

用戶登錄後返回首頁,若是不調用window.location.href方法迴轉到index.jsp,會顯示.do路徑,我想還有別的方法能夠解決這一問題.!網絡

以後用戶須要退出時:session

 <!-- 清除session -->
    <script>
        function removeSessoin(){
        console.log("清除session");
        
           $.ajax({
            url:"<%=path%>/user/removeSession.do", //清除用戶sessoin
            type:"POST",
            data:{},
            dataType:"json",
            success:function(data){//響應回傳成功後到這裏
                if(data.removeCode==1){//若是用戶名重複,則<
                    alert("您已退出登錄!歡迎下次光臨????");
                    window.location.href="http://localhost:8084/OrderSystemM/Test1/index.jsp";
                }else if(data.removeCode==0){
                    alert("退出失敗!請聯繫!");
                }else{
                    //用戶實例不爲空,但用戶名不等於該查詢的用戶名 (概率微乎其微)
                    alert("網絡錯誤,請稍後再試");
                    //發送BUG信息到管理員
                }
            }
        })
        
    }
    </script>

在用戶註冊時,將bootstrap的插件又get了幾個新方法.

 <!-- 註冊用戶的ajax方法 -->
   <script>
   
   //註冊按鈕點擊執行註冊斷定
   $("#regButton").click(registerUser);
   //用戶名失去焦點時,執行查詢該用戶名是否已經存在的ajax操做
   $("#user_nameReg").blur(userNameJudger);
   //密碼框失焦,執行密碼斷定
   $("#user_pwdReg").blur(pwdCompare);
   //密碼2變更時執行
   $("#user_pwdReg2").change(pwdCompare);
   
   
   
   //用戶名的正則表達式
   var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
   //密碼的正則表達式
   var pPattern = /^.*(?=.{6,30})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
   
   //設定用戶名的斷定boolean
   var nameFlag = false;
   var user_nameReg = $("#user_nameReg").val();
   //用戶名斷定
   function userNameJudger(){
        
     var user_nameReg = $("#user_nameReg").val();
        if(user_nameReg != null && user_nameReg !=''){
            //用戶名不爲空
            if(uPattern.test(user_nameReg)){
                //用戶名格式正式
                console.log("用戶名格式正確");
                //格式正確後斷定是否已經存在數據庫中
                //ajax
                $.ajax({
                    url:"<%=path%>/user/queryUserInsByName.do",
                    type:"POST",
                    data:{"user_name":user_nameReg},
                    dataType:"json",
                    success:function(data){
                        if(data.exist==1){
                            $("#nameSp").html("&nbsp;&nbsp;&nbsp; <label class='text-danger'><strong>×用戶名已經重複</strong></label>");
                            nameFlag = false;
                            /* alert(data.message); */
                        }else{
                            $("#nameSp").html("&nbsp;&nbsp;&nbsp; <label class='text-success'><strong>√</strong></label>");
                            nameFlag = true;
                            /* alert(data.message); */
                        }
                    }
                
                })
            }else{
                nameFlag = false;
                console.log("用戶名格式不正確");
                //用戶名格式不正確
                /* alert("用戶名格式錯誤,應爲4到16位（可以使用 : 字母，數字，下劃線，減號）"); */
                /* <label   data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">右側的 Tooltip</label> */
                $("#nameSp").html("&nbsp;&nbsp;&nbsp; <label data-toggle='tooltip' data-placement='right'  title='用戶名格式錯誤,應爲4到16位.可以使用 : 字母，數字，下劃線，減號'><p class='text-warning'>????用戶名格式錯誤,點我查看具體緣由.</p></label>");
                $("[data-toggle='tooltip']").tooltip();
                
          }
       }else{
           //用戶名不能爲空
           nameFlag = false;
           $("#nameSp").html("&nbsp;&nbsp;&nbsp; <label class='text-danger'><strong>????用戶名不能爲空</strong></label>");
       }
   }
   
  /* tHIS FUNCTION IS SLOW  
  function getNameBool(){
    userNameJudger();
       return nameFlag;
   } */
 

   /* 設置密碼的斷定boolean */
   var pwdFlag = false;
   
   
   //密碼格式及相同比較,若是相同,pwdFlag爲true
   function pwdCompare(){
       pwdFlag = false;
       var user_pwd1Reg = $("#user_pwdReg").val();
       var user_pwd2 = $("#user_pwdReg2").val();
       
       if(user_pwd1Reg != null && user_pwd1Reg != ''){
            //若是密碼1不爲空,不爲空字符串
       if(pPattern.test(user_pwd1Reg)){
              //密碼格式正確,繼續斷定兩個密碼是否相同
              console.log("密碼1格式正確");//ok
              $("#pwd1Sp").html("&nbsp;&nbsp;&nbsp; <label class='text-success'><strong>√</strong></label>");
              if(user_pwd1Reg===user_pwd2){
                      //兩個密碼相同,格式也正確
                      /* alert("密碼一致~能夠註冊");//ok */
                      pwdFlag = true;
                      $("#pwd1Sp").html("&nbsp;&nbsp;&nbsp; <label class='text-success'><strong>√</strong></label>");
                      $("#pwd2Sp").html("&nbsp;&nbsp;&nbsp; <label class='text-success'><strong>√</strong></label>");
                      return pwdFlag;
              }else{
                      //第一個密碼格式正確,第二個密碼跟第一個不相同
                      /* alert("兩個密碼不一樣~");//ok */
                      if(user_pwd2==''){
                          pwdFlag = false;
                          $("#pwd2Sp").html("&nbsp;&nbsp;&nbsp; <label class='text-warning'><strong>請輸入重複密碼.</strong></label>");
                          return pwdFlag;
                      }else{
                          pwdFlag = false;
                          $("#pwd2Sp").html("&nbsp;&nbsp;&nbsp; <label class='text-danger'><strong>重複密碼錯誤.</strong></label>");
                          return pwdFlag;
                      }
              }
       }else{
               //密碼1格式錯誤
               pwdFlag = false;
               /* alert("密碼格式錯誤,需求6-30位,包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符");//ok */
               $("#pwd1Sp").html("&nbsp;&nbsp;&nbsp; <label data-toggle='tooltip' data-placement='right'  title='密碼格式錯誤,需求6-30位,包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符'><p class='text-warning'>????密碼格式錯誤,點我查看具體緣由.</p></label>");
                $("[data-toggle='tooltip']").tooltip();
                return pwdFlag;
       }
     }else{
        //若是密碼1爲空,爲空字符串,判斷重複密碼是否空
        if(user_pwd2 != null && user_pwd2 != ''){
               pwdFlag = false;
            //若是密碼1爲空,密碼2不空,則清空密碼2,關注密碼1輸入框提示先輸入密碼1
            $("#user_pwdReg2").val('');//ok
            console.log("密碼2被清空,先填寫密碼1");//ok
            $("#user_pwdReg").focus();//ok
            /* alert("先要輸入密碼1~"); //ok */
            $("#pwd2Sp").html("&nbsp;&nbsp;&nbsp; <label class='text-warning'><strong>請先輸入上面的密碼.</strong></label>");
            return pwdFlag;
        }
     
     }
   
   }
   
   
   //註冊新用戶的一系列focus,blur事件.
   
/*    function getRegsiterInfo(){
   
       $()
   }
    */
   
   
   
   
   //註冊新用戶
   function registerUser(){
   console.log("in registerUser() ~");
   var user_nameTrue = $("#user_nameReg").val();
   var user_pwdTrue = $("#user_pwdReg").val();
   //執行用戶名判斷,是否已經存在或格式等.
   userNameJudger();
   if(pwdCompare() && nameFlag){
       
       $.ajax({
             url:"<%=path%>/user/insertNewUser.do",
              type:"POST",
              data:{"user_name":user_nameTrue,"user_pwd":user_pwdTrue},
              dataType:"json",
             success:function(data){
                 if(data.insertNum>0){
                     console.log("註冊成功");
                     //發送用戶名密碼到用戶郵箱(待添加)
                     console.log("用戶名:"+user_nameTrue+".密碼:"+user_pwdTrue);
                     //提交表單
                     document.forms["regForm"].submit();
                     /* 跳轉頁面並刷新獲取session及*/
                     window.location.href="http://localhost:8084/OrderSystemM/Test1/userinfo.jsp";
                     //
                 }else{
                     console.log("註冊失敗");
                 }
             }
       })
     }else{
        console.log("????阻止提交");
           event.preventDefault();
     }
     
   }
   
   
   </script>

基本註冊的流程是這樣,口述的話簡單說明爲,先斷定註冊的用戶名是否已經存在於了數據庫中,若是是,則提示已經存在,並阻止提交 nameFlag = false

兩次重複密碼進行比對,格式正確並二者相同,則返回true, 當這些具體知足了條件,將用戶註冊信息經過ajax及json註冊到數據庫,並返回註冊狀態碼1or0,

1的話頁面假性submit提交讓註冊框消失,並跳轉如userinfo用戶信息頁面. (這裏若是使用郵箱則能夠發送郵件給註冊郵箱,當用戶點擊後再判斷操做)

基本的controller 更新用戶

//動態更新用戶數據 用戶信息界面
    @RequestMapping("updateUser")
    @ResponseBody
    public Map<String,Object> updateUser(User user){
      Map<String,Object> map = new HashMap<String,Object>();
      int updateNum =     us.updateByPrimaryKeySelective(user);
      map.put("updateNum",updateNum);
      if(updateNum>0){
          map.put("message", "用戶數據更新成功????");
      }
      return map;
    }

註冊

//註冊新用戶,成功返回狀態碼1
    @RequestMapping("insertNewUser")
    @ResponseBody
    public Map<String,Object> insertNewUser(User u,HttpSession session){
        
        Map<String,Object> map = new HashMap<String,Object>();
        int insertNum = us.insertUser(u);
        if(insertNum>0){
            map.put("insertNum", insertNum);
            map.put("message", "註冊成功.");
            User user = us.queryUserByNameAndPwd(u);
            System.out.println(user);
            session.setAttribute("userID", user.getUser_id());
            //剛註冊,暱稱爲空,放入用戶名
            session.setAttribute("userName", u.getUser_name());
            return map;
        }else{
            map.put("insertNum", insertNum);
            map.put("message", "註冊失敗,請聯繫網站管理員.");
            return map;
        }
    }

根據session中的用戶id查詢用戶實例,將數據反填到用戶數據中

//根據用戶ID查詢用戶實例 從session中獲取ID
    @RequestMapping("getUserById")
    @ResponseBody
    public ModelMap getUserById(HttpSession session,ModelMap map){
        System.out.println(">>>>>>>>>>>>>>>>"+(Long)session.getAttribute("userID"));
        User user = us.queryUserById((Long)session.getAttribute("userID"));
        map.addAttribute("userIns",user);
/*        return "redirect:/user/showUser.do";*/    
        return map;
    }

用戶退出

//用戶退出.清空session
    @RequestMapping("removeSession")
    @ResponseBody
    public Map<String,Object> removeSession(HttpSession session){
        
        Map<String,Object> map = new HashMap<String,Object>();
        
        session.removeAttribute("userID"); //清空session 並沒有返回類型
        session.removeAttribute("userName");
        
        
        
        System.out.println("觸發removeSession");
        map.put("removeCode",1);
        return map;
        
    }

用戶名和密碼登錄

//用戶登錄進行ajax斷定 若是登錄成功判斷狀態碼並展現用戶姓名連接,及退出按鈕
    @RequestMapping("queryUserByNameAndPwd")
    @ResponseBody
    public Map<String,Object> queryUserByNameAndPwd(User user,HttpSession session){
        Map<String,Object> map = new HashMap<String,Object>();
        User u = us.queryUserByNameAndPwd(user);
        if(u!=null){
            //用戶存在登錄成功放入1
            map.put("message", "登錄成功????");
            map.put("code", 1);
            //sessoin放入用用戶名和密碼
            session.setAttribute("userID", u.getUser_id());
            
            //若是用戶暱稱不爲空,則將用戶暱稱進行展現
            if(u.getNick_name()!=null){
                session.setAttribute("userName", u.getNick_name());
                return map;
            }else{
                //暱稱爲空,放入用戶名
                session.setAttribute("userName", u.getUser_name());
                return map;
            }
        }else{
            //若是用戶爲空,則放入0
            System.out.println("密碼錯誤");
            map.put("message", "用戶名或密碼錯誤????");
            map.put("code", 0);
            return map;
        }
        
    }