移动端用户登录&注册案例

旧城等待， 2021-10-23 16:36 405阅读 0赞

用的是TypeScript语言，主要是展示相关的思想逻辑，而不是语法。会说明注册和登录页面进行局部切换的逻辑、用账号密码登录的相关逻辑、用手机号和验证码登录的相关逻辑、获取验证码的相关逻辑，忘记密码的相关逻辑，最后点击登录的相关逻辑

> ###### 一、注册和登录页面进行局部切换 ######

![在这里插入图片描述][20190815193056445.png]效果图：  
![在这里插入图片描述][20190815193117635.gif]  
即点击验证码登录时会切换到验证码登录，可以看到登录密码输入框的信息变成验证码输入框的信息，思想：

1.  将账号输入框写在一个li标签里面；
2.  将密码输入框、验证码登录文字、注册账号登录文字、登录按钮写在一个li标签里面；
3.  将验证码输入框、验证码登录文字、注册账号登录文字、登录按钮写在一个li标签里面；

第2和3步骤的样式完全一样，再给3加一个display:none属性给隐藏掉，再给2和3的里面的验证码登录文字加上点击函数，即点击验证码登陆时上面第二步骤内容隐藏掉；点击账号密码登陆时上面第三步骤内容隐藏掉。点击函数内容如下

//全局定义一个 loginType变量，用来标识登录方式；1代表密码登录，2代表验证码登录
      public loginType:number = 1;
     //账号密码或者验证码登录
        public loginSelect(loginSelectFlag){//loginSelectFlag传入1或者是2
            this.loginType=loginSelectFlag;
            if(loginSelectFlag == 2) {
                (<HTMLElement>this.$('.get-code-login')).style.display="none";
                (<HTMLElement>this.$('.password-login')).style.display="block";
            }else{
                (<HTMLElement>this.$('.password-login')).style.display="none";
                (<HTMLElement>this.$('.get-code-login')).style.display="block";
            }
        }

> ###### 二、点击获取验证码的相关逻辑 ######

点击之后要判断输入的手机号是否符合号码规则，符合之后验证码开始进行60s倒计时，输入验证码之后判断是否输入正确

//首先定义相关变量：
       //登录service
        public loginService:LoginService;
        //获取短信验证码倒计时
        private countdown:number = 60;
        //定时任务
        private timeId:number;
        //是否需要短信验证码
        public isNeedSmsc = ISSMSC;
        //是否可调用获取验证码接口
         private isCanGetSms:boolean = true;
     /**
         * 获取手机验证码
         */
        public getSmsCode(){
            if(this.isMobileValidate()){
                //手机号码合法,调用相关接口
                this.getSmsCodeInterface();
            }
        }
        /**
         * 校验手机号
         */
        public isMobileValidate(){
            let mobile = (<HTMLInputElement>this.$("input[name='userName']")).value.trim();
            if(mobile == ''){//检查手机号是否输入
                this.alert('请输入手机号码');
                return false;
            }else {
                let reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[189])[0-9]{8}$/;
                let isMobileValid = reg.test(mobile);
                if(!isMobileValid){
                    this.alert('手机号码不合法,请重新输入');
                    return false;
                }
            }
            return true;
        }
        /**
         * 手机号码合法,调用相关接口
         */
        public getSmsCodeInterface(){
            let self = this;
            this.isCanGetSms = false;
            self.reRender('.get-smsc');//reRender()方法是重新进行页面渲染函数
            let countFun = function (){
                self.countdown--;
                if(self.countdown==0){
                    self.countdown=60;
                    self.isCanGetSms = true;
                    window.clearInterval(self.timeId);
                }
                self.reRender('.get-smsc');
            };
            self.timeId = window.setInterval(countFun,1000,60);
            let getCodeByPhoneRequest = new GetCodeByPhoneRequest();
            getCodeByPhoneRequest.phoneNum = (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).value;
            getCodeByPhoneRequest.bizType = '2';//bizType 代表的是注册还是登录，定义的是2代表登录
      //getCodeByPhone()是调用接口的方法函数
            this.loginService.getCodeByPhone(getCodeByPhoneRequest).then((getSmsResponse:GetCodeByPhoneResponse)=>{
                if(getSmsResponse.code == '200'){
                    this.notify('success',getSmsResponse.msg);
                }else {
                    this.alert(getSmsResponse.msg);
                    window.clearInterval(this.timeId);
                    this.timeId = null;
                    this.countdown = 60;
                    this.isCanGetSms = true;
                    this.reRender('.get-smsc');
                }
            }).catch((error)=>{
                this.alert(error);
            })
        }

定义获取验证码的接口函数getCodeByPhone()

public getCodeByPhone(getCodeByPhoneRequest:GetCodeByPhoneRequest):Promise<GetCodeByPhoneResponse>{
          return new Promise((resolve,reject)=>{         
    //用的fetch方法调用接口，获取后台数据
          this.initFetch(PATHROOT.GPFAPI+'/register/getCode',getCodeByPhoneRequest).then((getSmsResponse:GetSmsResponse)=>{
                    if(getSmsResponse.code == "200"){
                        resolve(getSmsResponse);
                    } else {
                        reject(getSmsResponse.msg);
                    }
    
                }).catch((error) => {
                    reject(error);
                });
            });
        }

> ###### 三、点击登录会进行的相关逻辑 ######

//点击登录
        public toLogin(loginFlag){
            this.loginType=loginFlag;
            let userName = (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).value.trim();
            let password = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value.trim();
            let pwMd5 = this.getPassword();
            if(userName =="" || password==""){
                if(this.loginType == 2) {
                    this.alert("请输入用户名或验证码");
                }else {
                    this.alert("请输入用户名或密码");
                }
                if(userName==""){
                    (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).dispatchEvent(new CustomEvent("focus"))
                }
            }else {
                this.showPreloader("登录中...");
                let loginRequest = new LoginRequest();
                loginRequest.un = userName;
                if(this.loginType == 1){
                    loginRequest.pw = pwMd5;
                }else {
                    loginRequest.pw = password;
                    loginRequest.smsc = password;
                }
                //mc 为机器码，切换账户和写在应用(即本地数据库清空)则用新生成的uuid
                if(userName == this.oldAccount && this.oldDeviceCode !=''){
                    loginRequest.mc = this.oldDeviceCode;
                }else {
                    loginRequest.mc = uuidv4();
                }
                // loginRequest.isSavePass  = (<HTMLInputElement>this.holder.querySelector("input[name='swt_pass_save']")).checked == true ? "1" : "0";
                loginRequest.isSavePass = '0';
                //getQueryString是对密码进行加密的方法
                loginRequest.pt = getQueryString('pt')?getQueryString('pt'):'';
                //调用登录方法
                this.loginFun(loginRequest);
            }
        }
        /**
         * 调用登录方法
         * @param {LoginRequest} loginRequest
         */
        public loginFun(loginRequest:LoginRequest){
            let password = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value;
            this.isPwdLegal = true;
            //校验密码是否符合规则
            let pwdRule = PASSWORD_RULE[PASSWORDRULE];
            if(pwdRule.regExpression){
                let re = new RegExp(pwdRule.regExpression);
                if(!re.test(password)){
                    this.isPwdLegal = false;
                }else {
                    this.isPwdLegal = true;
                }
            }
            if(this.loginType == 1){
                this.loginService.login(loginRequest).then((resp:LoginAllResponse)=>{
                    this.loginSuccess(resp);
                }).catch((error)=>{
                    this.hidePreloader();
                    this.alert(error);
                });
            } else {
                this.loginService.loginBySMSC(loginRequest).then((resp:LoginAllResponse)=>{
                    this.loginSuccess(resp);
                }).catch((error)=>{
                    this.hidePreloader();
                    this.alert(error);
                });
            }
        }
        /**
         * 登录成功后进行的操作
         * @param {LoginAllResponse} resp
         */
        public loginSuccess(resp:LoginAllResponse){
            if(resp.code == '200'){
                this.hidePreloader();
                if(this.isBindUser && isWeixin()){
                    this.showPreloader('正在关联微信,请稍后...');
                    this.loginService.findOpenId().then((openId:string)=>{
                        this.openId = openId;
                        return this.userInfoService.getCurrUserInfo();
                    }).then((userInfo)=>{
                        let bindUserRequest = new BindOrUnbindUserRequest();
                        bindUserRequest.userId = userInfo.loginAccount;
                        bindUserRequest.openId = this.openId;
                        bindUserRequest.serviceCode = 'yanyuke';
                        return this.loginService.bindUser(bindUserRequest);
                    }).then((bindResp)=>{
                        if(bindResp.code == 200){
                            this.notify('success','该账号已与微信关联');
                        }
                        this.hidePreloader();
                        this.retailerLoginCallback(resp.data,this.isPwdLegal);
                    }).catch((error)=>{
                        this.retailerLoginCallback(resp.data,this.isPwdLegal);
                        this.hidePreloader();
                        this.alert(error);
                    })
                }else {
                    this.retailerLoginCallback(resp.data,this.isPwdLegal);
                }
    
            }else if(resp.code == '401'){
                //用户名密码错误
                this.hidePreloader();
                this.alert(resp.msg);
            }else if(resp.code == '402'){
                //机器码不匹配
                this.hidePreloader();
            }else if(resp.code == '403'){
                //短信码不正确
                this.hidePreloader();
                this.alert(resp.msg);
            }
        }

对用户输入的密码进行加密的方法

//加密密码
        public getPassword():string{
            //密码扩展
            let PWD_EXTEND = "4aSys";
            let pwMd5 = '';
            if((<HTMLInputElement>this.holder.querySelector("input[name='password']")).value!=""){
                let pw = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value;
                pwMd5 = String(CryptoJS.MD5(String(CryptoJS.MD5(pw))+PWD_EXTEND));
                console.log('pwMd5',pwMd5);
            }
            return pwMd5;
        }

点击忘记密码进行的相关操作

}
        //忘记密码
        public resetPwd() {
            let verifyPhoneComp = new VerifyPhoneComponent((resetPwdRequest:ResetPwdRequest) => {
                let changePwdComp = new ChangePwdComponent(resetPwdRequest,(resetPwdRequest:ResetPwdRequest) => {
                    this.onBack();
                });
                this.view.loadController(changePwdComp);
            });
            this.view.loadController(verifyPhoneComp);
        }

> ###### 四、点击注册进行的相关逻辑 ######

public register(){
            if(this.isNeedSmsc){
                this.registerBySmsc();
            }else {
                this.registerNotSmsc();
            }
        }

/**
         * 注册-需要短信验证码
         */
        public registerBySmsc() {
            //校验手机号码
            if (!this.isMobileValidate()) {
                return;
            }
            //校验验证码
            let smsc = (<HTMLInputElement>this.$("input[name='smsc']")).value.trim();
            if (smsc == '') {
                this.alert('请输入验证码');
                return;
            }
            //校验密码
            let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
            let confPwd = (<HTMLInputElement>this.$("input[name='confPwd']")).value.trim();
            if(pwd==''){
                this.alert('请输入密码');
                return;
            }
            if(confPwd==''){
                this.alert('请输入确认密码');
                return;
            }
            if(pwd != confPwd){
                this.alert('两次密码输入的不一致，请重新输入');
                return;
            }
            //校验密码是否符合规则
            let pwdRule = PASSWORD_RULE[PASSWORDRULE];
            if(pwdRule.regExpression){
                let re = new RegExp(pwdRule.regExpression);
                if(!re.test(pwd)){
                    this.alert(pwdRule.msg);
                    return;
                }
            }
            //调用接口
            this.registerInterface();
        }
        public registerInterface(){
            let self = this;
            let mobile = (<HTMLInputElement>this.$("input[name='mobile-num']")).value.trim();
            let smsCode = '';
            if(this.isNeedSmsc){
                smsCode = (<HTMLInputElement>this.$("input[name='smsc']")).value.trim();
            }else {
                smsCode = '6666';
            }
            let registerRequest = new RegisterRequest();
            //组织ID;大众用户，传037f17e0ab5911e8b27f9ff6cddfd4ea
            registerRequest.gggId = '037f17e0ab5911e8b27f9ff6cddfd4ea';
            //密码（MD5）
            registerRequest.gguaPwd = this.getPassword();
            //0.PC端；1.移动端；2.微信；3.通用
            registerRequest.gguaType = '2';
            //0.正常；1.锁定
            registerRequest.gguaStatus = '0';
            //0.CA；1.密码；2.综合
            registerRequest.gguaLoginType = '2';
            //机器码
            registerRequest.gguaMc = uuidv4();
            //用户账号；手机注册为注册手机号
            registerRequest.gguaAccount = mobile;
            //短信码
            registerRequest.smsCode = smsCode;
            //初始角色编码(大众用户：LIC_PERSONS)，不传或者系统中没有的角色，用户将没有角色
            registerRequest.ggroCode = 'LIC_PERSONS';
            //  this.loginService.register(registerRequest)调用注册接口方法
            this.loginService.register(registerRequest).then((registerResponse:RegisterResponse)=>{
                // this.notify('success',registerResponse.msg);
                this.alert('账号注册成功',()=>{
                    self.onBack();
                });
    
            }).catch((error)=>{
                this.alert(error);
            })
        }
        //加密密码
        public getPassword():string{
            let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
            //密码扩展
            let PWD_EXTEND = "4aSys";
            let pwMd5 = '';
            if(pwd!=""){
                // pwMd5 = String(CryptoJS.MD5(String(CryptoJS.MD5(pwd))+PWD_EXTEND));
                pwMd5 = String(CryptoJS.MD5(pwd));
                console.log('pwMd5',pwMd5);
            }
            return pwMd5;
        }
    
        /**
         * 注册-不需要短信验证码
         */
        public registerNotSmsc(){
            //校验手机号码
            if (!this.isMobileValidate()) {
                return;
            }
            //校验密码
            let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
            let confPwd = (<HTMLInputElement>this.$("input[name='confPwd']")).value.trim();
            if(pwd==''){
                this.alert('请输入密码');
                return;
            }
            if(confPwd==''){
                this.alert('请输入确认密码');
                return;
            }
            if(pwd != confPwd){
                this.alert('两次密码输入的不一致，请重新输入');
                return;
            }
            //校验密码是否符合规则
            let pwdRule = PASSWORD_RULE[PASSWORDRULE];
            if(pwdRule.regExpression){
                let re = new RegExp(pwdRule.regExpression);
                if(!re.test(pwd)){
                    this.alert(pwdRule.msg);
                    return;
                }
            }
            let getCodeByPhoneRequest = new GetCodeByPhoneRequest();
            getCodeByPhoneRequest.phoneNum = (<HTMLInputElement>this.holder.querySelector("input[name='mobile-num']")).value;
            getCodeByPhoneRequest.bizType = '1';
            this.loginService.getCodeByPhone(getCodeByPhoneRequest).then((getSmsResponse:GetCodeByPhoneResponse)=>{
                if(getSmsResponse.code == '200'){
                    this.registerInterface();
                }else {
                    this.alert(getSmsResponse.msg);
                }
    
            }).catch((error)=>{
                this.alert(error);
            })
    
        }

调用注册接口的相关办法

public register(registerRequest:RegisterRequest):Promise<RegisterResponse>{
            return new Promise((resolve,reject)=>{
                下面的'/register'是要调用的注册接口
                this.initFetch(PATHROOT.GPFAPI+'/register',registerRequest).then((getSmsResponse:RegisterResponse)=>{
                    if(getSmsResponse.code == "200"){
                        resolve(getSmsResponse);
                    } else {
                        reject(getSmsResponse.msg);
                    }
                }).catch((error) => {
                    reject(error);
                });
            });
        }

获取url后面查询参数的方法

export function getQueryString (name){
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null){
            let val = (<any>window).unescape(r[2]);
            if(!val || val=='null' || val=='undefined'){
                return  '';
            }else {
                return  val;
            }
        }else {
            return null;
        }

[20190815193056445.png]: /images/20211023/3fae44db49b145ce984db2bd557e4be2.png
[20190815193117635.gif]: /images/20211023/6f542a53fc654b6fb2c97255e49d7637.png