用户的注册登陆流程及代码实现-阿里云开发者社区

开发者社区> kdmktdi2qut24> 正文

用户的注册登陆流程及代码实现

简介: 没有SSM框架前项目分包分层是这样的. (其中的命名不太规范,应省略_) 在有了框架之后项目使用SSM后sql语句都半封装在了.....xml文件中.对应的Dao的接口中的方法,实现对数据库的增删改查操作.
+关注继续查看

没有SSM框架前项目分包分层是这样的. (其中的命名不太规范,应省略_)

在有了框架之后项目使用SSM后sql语句都半封装在了.....xml文件中.对应的Dao的接口中的方法,实现对数据库的增删改查操作.获取JDBC链接写在了mybatis的xml配置文件里了.

而servlet也变成了一个,并使用Spring,SpringMVC提供的IOC,DI,视图解析等多工具,只使用指定的@...注解就可以实现生成bean的对象,指定哪个方法为哪个/*.do(action)路径等.

总体代码量减少了,需要配置的xml文件多了.大部分的事情好像都交给了框架去做.忽然感觉一下落了空.没关系,还有重要的事情要处理.

上面的是一个简单的用户登陆的页面,在类似 jq22 这样的网站上可以找到类似的jquery的相关工具js,如验证码.页面效果.

当判定用户输入的验证码与给出的一致后,进入用户名及密码的判定,从数据库查询该用户名和密码,如果核对正确,则登陆成功.反之.则反之.

具体注册和登陆要使用ajax与json去传递数据,因为这样可以预先判定用户名是否已注册,已经注册的话,直接返回给用户说已经注册了,你就别用这个名字了,然后可以跟一系列的随机数字在这个名字后面(但这样是不是还是已经注册了的,判定起来就略麻烦些)

  <!-- 登陆验证码,判定后如果成功,再执行登陆方法 -->
  <script>
        $.idcode.setCode();
            
            $("#loginButton").click(function (){
                var IsBy = $.idcode.validateCode(); 
                /* alert(IsBy); */
                console.log(IsBy);
                if(!IsBy){ //如果验证码通过,则执行ajax的方法
                  event.preventDefault();
                }else{
                  loginUser();
                }
                
            });
   </script>

登陆:

 <!-- 登陆的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 -->
    <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;
        }
        
    }

...

接下来是对数据库表的设计以及商家入驻及套餐内容展示.

感谢徐老大的xJsonBindView.js

 

将编程看作是一门艺术,而不单单是个技术。 敲打的英文字符是我的黑白琴键, 思维图纸画出的是我编写的五线谱。 当美妙的华章响起,现实通往二进制的大门即将被打开。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C#代码实现矢量画图
原文:C#代码实现矢量画图 版权声明:本文为博主原创文章,转载请附上链接地址。 https://blog.csdn.net/ld15102891672/article/details/80275969 ...
964 0
阿里云openapi签名实现代码(基于C#)
部分开发者在接触阿里云openAPi调用的时候,Signature的构造和生成一直都是一只拦路虎,本文中将基于C#,和点播的APi:getPlayAuth 实现签名的构造,仅供大家参考。
554 0
在C++下实现的程序拨号代码
下面是一段拨号代码(摘自Nokia的例子),代码虽然不多,但很多地方都值得学习,例如:对R类的使用,清理;server/client机制;参数传递机制;编码风格;注释风格等等自己体会吧。
566 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8425 0
tensorflow笔记:流程,概念和简单代码注释
1.tensorflow的运行流程 tensorflow的运行流程主要有2步,分别是构造模型和训练。 在构造模型阶段,我们需要构建一个图(Graph)来描述我们的模型。所谓图,也可以理解为流程图,就是将数据的输入->中间处理->输出的过程表示出来,就像下面这样。
1502 0
从HelloWorld看Knative Serving代码实现
Knative Serving以Kubernetes和Istio为基础,支持无服务器应用程序和函数的部署并提供服务。我们从部署一个HelloWorld示例入手来分析Knative Serving的代码细节。
1518 0
「crudapi」零代码实现订单序列号Sequence
本文通过产品编码和订单流水号介绍一下序列号(Sequence)在crudapi增删改查接口中的应用。
78 0
从0开始:500行代码实现 LSM 数据库
LSM-Tree 是很多 NoSQL 数据库引擎的底层实现,例如 LevelDB,Hbase 等。本文基于《数据密集型应用系统设计》中对 LSM-Tree 数据库的设计思路,结合代码实现完整地阐述了一个迷你数据库,核心代码 500 行左右,通过理论结合实践来更好地理解数据库的原理。
10974 0
118
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载