前言
现在是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"),这样就可以实现初次登录提醒，后面不管在怎么加载都不会提醒了。
