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

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

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

效果图：

即点击验证码登录时会切换到验证码登录，可以看到登录密码输入框的信息变成验证码输入框的信息，思想：

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;
    }