多信息登录、检测用户信息是否完善且引导补全

 muxiongxiong   2022-05-01 09:00   305 人阅读  0 条评论

大家好,我是雄雄,欢迎关注:穆雄雄的博客

前言

现在是2022年4月28日13:41:29

今天分享两块内容。

1.需求:用户可以通过手机号、邮箱来注册我们的系统,用户完成之后,可以去完善自己的个人信息,比如修改手机号,邮箱以及用户名。下次上来,用户可以使用手机号、邮箱以及用户名三种中的任何一种方式登录系统。

2.登录系统之后,检测用户信息是否完善,比如手机号、邮箱、用户名等,如果不完善,则引导用户去完善个人信息,完善了之后就可以用不同信息对其账号登录。

实现方法

使用手机号、邮箱、用户名以及账号登录系统

其实这个实现起来挺简单的,就是当时绕了很大的坑,给绕进去了。。。。刚开始想了个很简单的方法,就是:判断当前输入的信息长度是不是11位,是的话就是手机号,不是的话,看看有没有@符号,有则是邮箱,否则是账号;但是后来仔细琢磨了下,万一有的用户的账号正好也是11位呢,岂不是直接就乱了。

像这样的需求,直接可以在后台的sql中实现,但当时写sql的时候写了好几种形式:

第一种:

	SELECT * FROM blade_user 
	WHERE (email='muxiongxiong' AND PASSWORD = 'muxiongxiong')
	OR (NAME = 'muxiongxiong'  AND PASSWORD = 'muxiongxiong')
	OR (phone = 'muxiongxiong'  AND PASSWORD = 'muxiongxiong')
	OR (account = 'muxiongxiong'  AND PASSWORD = 'muxiongxiong')

第二种:

	SELECT * FROM blade_user  
WHERE email || NAME || phone || account LIKE '%muxiongxiong%'  AND PASSWORD = 'muxiongxiong'

第三种:

	SELECT * FROM blade_user  
	WHERE 
	(email= 'muxiongxiong' OR NAME= 'muxiongxiong' OR phone= 'muxiongxiong' or account ='muxiongxiong')  
	AND PASSWORD = 'muxiongxiong'

第一种和第三种基本上一样,第二种写法比较新奇,思路是这样的,将这几个字段,用户名,邮箱,电话,账号都拼接在一起,然后通过模糊查询的like去匹配,然后和密码比对进行查询。这几种方式的效率基本都差不多,用哪种都可以。前提是得限制用户的手机号,邮箱,账号以及用户名都是唯一的,极端情况下的话,就是A的账号和B的手机号一样,或者其他字段一样,可能会查询出来多条数据。

刚开始绕弯是因为我把手机号、邮箱等这几个字段理解成了不一样的了,于是结果总是有好多个,还以为自己的sql写错了呢,后来朋友看出来了问题所在,一语指出…

检测用户信息是否完善,否则引导其去完善

登录系统之后需要先拿到当前用户的信息,如果检测到手机号等信息都是完整的,就不需要操作,否则弹框提醒用户去完善个人信息,如下图所示:

点击确认即可直接去个人中心完善自己的信息。

关于弹出框的时机,之前考虑过一进首页就加载,弹出一遍;但是当在使用的过程中,发现这样用户体验度太不好了,包括刷新当前页面的时候也会出现,所以这种方法果断放弃。于是想到了加个标识,每隔20分钟弹出一次,最后发现这种方法在页面加载的时候,也会重复执行,也放弃了。

后来同事用了个别的方法,就是用户首次登陆的时候检测,然后弹出框。通过session的方法来实现的,效果还不错,下面是实现的代码:

	 //查询当前用户的信息
    getCurrentUserInfoDetail(){
      if(!sessionStorage.getItem("isReload")){
        //存入session
        sessionStorage.setItem("isReload","true");
        if(!this.isShowUserInfo){
          this.isShowUserInfo = true;
          getCurrentUserInfo().then(res=>{
            this.userDetails = res.data.data;
            //查看手机号,邮箱,用户名是否为空,是的话跳转到个人信息进行维护
            if(this.userDetails.phone == null || this.userDetails.email == '' || this.userDetails.name == ''){
              //弹出确认的框
              this.$confirm('您的个人信息不完善,请前往个人信息进行维护', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                //确定走这里
                console.log("确定");
                this.$router.push({path: '/info'});
              }).catch(() => {
                //取消的话走这里
              });
            }
          });
        }
      }
    },
      //取消的话走这里
              });
            }
          });
        }
      }
    },

sessionStorage就是vue页面使用的session,不用导入,可以直接拿出来用,给session中设置值: sessionStorage.setItem("isReload","true");,从session中获取值:sessionStorage.getItem("isReload"),这样就可以实现初次登录提醒,后面不管在怎么加载都不会提醒了。

本文地址:http://muxiongxiong.cn/?id=1380
版权声明:本文为原创文章,版权归 muxiongxiong 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?