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

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

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

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

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

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

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

  1. //全局定义一个 loginType变量，用来标识登录方式；1代表密码登录，2代表验证码登录
  2.   public loginType:number = 1;
  3.  //账号密码或者验证码登录
  4.     public loginSelect(loginSelectFlag){//loginSelectFlag传入1或者是2
  5.         this.loginType=loginSelectFlag;
  6.         if(loginSelectFlag == 2) {
  7.             (<HTMLElement>this.$('.get-code-login')).style.display="none";
  8.             (<HTMLElement>this.$('.password-login')).style.display="block";
  9.         }else{
  10.             (<HTMLElement>this.$('.password-login')).style.display="none";
  11.             (<HTMLElement>this.$('.get-code-login')).style.display="block";
  12.         }
  13.     }
二、点击获取验证码的相关逻辑

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

  1. //首先定义相关变量：
  2.    //登录service
  3.     public loginService:LoginService;
  4.     //获取短信验证码倒计时
  5.     private countdown:number = 60;
  6.     //定时任务
  7.     private timeId:number;
  8.     //是否需要短信验证码
  9.     public isNeedSmsc = ISSMSC;
  10.     //是否可调用获取验证码接口
  11.      private isCanGetSms:boolean = true;
  12.  /**
  13.      * 获取手机验证码
  14.      */
  15.     public getSmsCode(){
  16.         if(this.isMobileValidate()){
  17.             //手机号码合法,调用相关接口
  18.             this.getSmsCodeInterface();
  19.         }
  20.     }
  21.     /**
  22.      * 校验手机号
  23.      */
  24.     public isMobileValidate(){
  25.         let mobile = (<HTMLInputElement>this.$("input[name='userName']")).value.trim();
  26.         if(mobile == ''){//检查手机号是否输入
  27.             this.alert('请输入手机号码');
  28.             return false;
  29.         }else {
  30.             let reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[189])[0-9]{8}$/;
  31.             let isMobileValid = reg.test(mobile);
  32.             if(!isMobileValid){
  33.                 this.alert('手机号码不合法,请重新输入');
  34.                 return false;
  35.             }
  36.         }
  37.         return true;
  38.     }
  39.     /**
  40.      * 手机号码合法,调用相关接口
  41.      */
  42.     public getSmsCodeInterface(){
  43.         let self = this;
  44.         this.isCanGetSms = false;
  45.         self.reRender('.get-smsc');//reRender()方法是重新进行页面渲染函数
  46.         let countFun = function (){
  47.             self.countdown--;
  48.             if(self.countdown==0){
  49.                 self.countdown=60;
  50.                 self.isCanGetSms = true;
  51.                 window.clearInterval(self.timeId);
  52.             }
  53.             self.reRender('.get-smsc');
  54.         };
  55.         self.timeId = window.setInterval(countFun,1000,60);
  56.         let getCodeByPhoneRequest = new GetCodeByPhoneRequest();
  57.         getCodeByPhoneRequest.phoneNum = (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).value;
  58.         getCodeByPhoneRequest.bizType = '2';//bizType 代表的是注册还是登录，定义的是2代表登录
  59.   //getCodeByPhone()是调用接口的方法函数
  60.         this.loginService.getCodeByPhone(getCodeByPhoneRequest).then((getSmsResponse:GetCodeByPhoneResponse)=>{
  61.             if(getSmsResponse.code == '200'){
  62.                 this.notify('success',getSmsResponse.msg);
  63.             }else {
  64.                 this.alert(getSmsResponse.msg);
  65.                 window.clearInterval(this.timeId);
  66.                 this.timeId = null;
  67.                 this.countdown = 60;
  68.                 this.isCanGetSms = true;
  69.                 this.reRender('.get-smsc');
  70.             }
  71.         }).catch((error)=>{
  72.             this.alert(error);
  73.         })
  74.     }

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

  1. public getCodeByPhone(getCodeByPhoneRequest:GetCodeByPhoneRequest):Promise<GetCodeByPhoneResponse>{
  2.       return new Promise((resolve,reject)=>{         
  3. //用的fetch方法调用接口，获取后台数据
  4.       this.initFetch(PATHROOT.GPFAPI+'/register/getCode',getCodeByPhoneRequest).then((getSmsResponse:GetSmsResponse)=>{
  5.                 if(getSmsResponse.code == "200"){
  6.                     resolve(getSmsResponse);
  7.                 } else {
  8.                     reject(getSmsResponse.msg);
  9.                 }
  11.             }).catch((error) => {
  12.                 reject(error);
  13.             });
  14.         });
  15.     }
三、点击登录会进行的相关逻辑
  1. //点击登录
  2.     public toLogin(loginFlag){
  3.         this.loginType=loginFlag;
  4.         let userName = (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).value.trim();
  5.         let password = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value.trim();
  6.         let pwMd5 = this.getPassword();
  7.         if(userName =="" || password==""){
  8.             if(this.loginType == 2) {
  9.                 this.alert("请输入用户名或验证码");
  10.             }else {
  11.                 this.alert("请输入用户名或密码");
  12.             }
  13.             if(userName==""){
  14.                 (<HTMLInputElement>this.holder.querySelector("input[name='userName']")).dispatchEvent(new CustomEvent("focus"))
  15.             }
  16.         }else {
  17.             this.showPreloader("登录中...");
  18.             let loginRequest = new LoginRequest();
  19.             loginRequest.un = userName;
  20.             if(this.loginType == 1){
  21.                 loginRequest.pw = pwMd5;
  22.             }else {
  23.                 loginRequest.pw = password;
  24.                 loginRequest.smsc = password;
  25.             }
  26.             //mc 为机器码，切换账户和写在应用(即本地数据库清空)则用新生成的uuid
  27.             if(userName == this.oldAccount && this.oldDeviceCode !=''){
  28.                 loginRequest.mc = this.oldDeviceCode;
  29.             }else {
  30.                 loginRequest.mc = uuidv4();
  31.             }
  32.             // loginRequest.isSavePass  = (<HTMLInputElement>this.holder.querySelector("input[name='swt_pass_save']")).checked == true ? "1" : "0";
  33.             loginRequest.isSavePass = '0';
  34.             //getQueryString是对密码进行加密的方法
  35.             loginRequest.pt = getQueryString('pt')?getQueryString('pt'):'';
  36.             //调用登录方法
  37.             this.loginFun(loginRequest);
  38.         }
  39.     }
  40.     /**
  41.      * 调用登录方法
  42.      * @param {LoginRequest} loginRequest
  43.      */
  44.     public loginFun(loginRequest:LoginRequest){
  45.         let password = (<HTMLInputElement>this.holder.querySelector("input[name='password']")).value;
  46.         this.isPwdLegal = true;
  47.         //校验密码是否符合规则
  48.         let pwdRule = PASSWORD_RULE[PASSWORDRULE];
  49.         if(pwdRule.regExpression){
  50.             let re = new RegExp(pwdRule.regExpression);
  51.             if(!re.test(password)){
  52.                 this.isPwdLegal = false;
  53.             }else {
  54.                 this.isPwdLegal = true;
  55.             }
  56.         }
  57.         if(this.loginType == 1){
  58.             this.loginService.login(loginRequest).then((resp:LoginAllResponse)=>{
  59.                 this.loginSuccess(resp);
  60.             }).catch((error)=>{
  61.                 this.hidePreloader();
  62.                 this.alert(error);
  63.             });
  64.         } else {
  65.             this.loginService.loginBySMSC(loginRequest).then((resp:LoginAllResponse)=>{
  66.                 this.loginSuccess(resp);
  67.             }).catch((error)=>{
  68.                 this.hidePreloader();
  69.                 this.alert(error);
  70.             });
  71.         }
  72.     }
  73.     /**
  74.      * 登录成功后进行的操作
  75.      * @param {LoginAllResponse} resp
  76.      */
  77.     public loginSuccess(resp:LoginAllResponse){
  78.         if(resp.code == '200'){
  79.             this.hidePreloader();
  80.             if(this.isBindUser && isWeixin()){
  81.                 this.showPreloader('正在关联微信,请稍后...');
  82.                 this.loginService.findOpenId().then((openId:string)=>{
  83.                     this.openId = openId;
  84.                     return this.userInfoService.getCurrUserInfo();
  85.                 }).then((userInfo)=>{
  86.                     let bindUserRequest = new BindOrUnbindUserRequest();
  87.                     bindUserRequest.userId = userInfo.loginAccount;
  88.                     bindUserRequest.openId = this.openId;
  89.                     bindUserRequest.serviceCode = 'yanyuke';
  90.                     return this.loginService.bindUser(bindUserRequest);
  91.                 }).then((bindResp)=>{
  92.                     if(bindResp.code == 200){
  93.                         this.notify('success','该账号已与微信关联');
  94.                     }
  95.                     this.hidePreloader();
  96.                     this.retailerLoginCallback(resp.data,this.isPwdLegal);
  97.                 }).catch((error)=>{
  98.                     this.retailerLoginCallback(resp.data,this.isPwdLegal);
  99.                     this.hidePreloader();
  100.                     this.alert(error);
  101.                 })
  102.             }else {
  103.                 this.retailerLoginCallback(resp.data,this.isPwdLegal);
  104.             }
  106.         }else if(resp.code == '401'){
  107.             //用户名密码错误
  108.             this.hidePreloader();
  109.             this.alert(resp.msg);
  110.         }else if(resp.code == '402'){
  111.             //机器码不匹配
  112.             this.hidePreloader();
  113.         }else if(resp.code == '403'){
  114.             //短信码不正确
  115.             this.hidePreloader();
  116.             this.alert(resp.msg);
  117.         }
  118.     }

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

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

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

  1. }
  2.     //忘记密码
  3.     public resetPwd() {
  4.         let verifyPhoneComp = new VerifyPhoneComponent((resetPwdRequest:ResetPwdRequest) => {
  5.             let changePwdComp = new ChangePwdComponent(resetPwdRequest,(resetPwdRequest:ResetPwdRequest) => {
  6.                 this.onBack();
  7.             });
  8.             this.view.loadController(changePwdComp);
  9.         });
  10.         this.view.loadController(verifyPhoneComp);
  11.     }
四、点击注册进行的相关逻辑
  1. public register(){
  2.         if(this.isNeedSmsc){
  3.             this.registerBySmsc();
  4.         }else {
  5.             this.registerNotSmsc();
  6.         }
  7.     }
  9. /**
  10.      * 注册-需要短信验证码
  11.      */
  12.     public registerBySmsc() {
  13.         //校验手机号码
  14.         if (!this.isMobileValidate()) {
  15.             return;
  16.         }
  17.         //校验验证码
  18.         let smsc = (<HTMLInputElement>this.$("input[name='smsc']")).value.trim();
  19.         if (smsc == '') {
  20.             this.alert('请输入验证码');
  21.             return;
  22.         }
  23.         //校验密码
  24.         let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
  25.         let confPwd = (<HTMLInputElement>this.$("input[name='confPwd']")).value.trim();
  26.         if(pwd==''){
  27.             this.alert('请输入密码');
  28.             return;
  29.         }
  30.         if(confPwd==''){
  31.             this.alert('请输入确认密码');
  32.             return;
  33.         }
  34.         if(pwd != confPwd){
  35.             this.alert('两次密码输入的不一致，请重新输入');
  36.             return;
  37.         }
  38.         //校验密码是否符合规则
  39.         let pwdRule = PASSWORD_RULE[PASSWORDRULE];
  40.         if(pwdRule.regExpression){
  41.             let re = new RegExp(pwdRule.regExpression);
  42.             if(!re.test(pwd)){
  43.                 this.alert(pwdRule.msg);
  44.                 return;
  45.             }
  46.         }
  47.         //调用接口
  48.         this.registerInterface();
  49.     }
  50.     public registerInterface(){
  51.         let self = this;
  52.         let mobile = (<HTMLInputElement>this.$("input[name='mobile-num']")).value.trim();
  53.         let smsCode = '';
  54.         if(this.isNeedSmsc){
  55.             smsCode = (<HTMLInputElement>this.$("input[name='smsc']")).value.trim();
  56.         }else {
  57.             smsCode = '6666';
  58.         }
  59.         let registerRequest = new RegisterRequest();
  60.         //组织ID;大众用户，传037f17e0ab5911e8b27f9ff6cddfd4ea
  61.         registerRequest.gggId = '037f17e0ab5911e8b27f9ff6cddfd4ea';
  62.         //密码（MD5）
  63.         registerRequest.gguaPwd = this.getPassword();
  64.         //0.PC端；1.移动端；2.微信；3.通用
  65.         registerRequest.gguaType = '2';
  66.         //0.正常；1.锁定
  67.         registerRequest.gguaStatus = '0';
  68.         //0.CA；1.密码；2.综合
  69.         registerRequest.gguaLoginType = '2';
  70.         //机器码
  71.         registerRequest.gguaMc = uuidv4();
  72.         //用户账号；手机注册为注册手机号
  73.         registerRequest.gguaAccount = mobile;
  74.         //短信码
  75.         registerRequest.smsCode = smsCode;
  76.         //初始角色编码(大众用户：LIC_PERSONS)，不传或者系统中没有的角色，用户将没有角色
  77.         registerRequest.ggroCode = 'LIC_PERSONS';
  78.         //  this.loginService.register(registerRequest)调用注册接口方法
  79.         this.loginService.register(registerRequest).then((registerResponse:RegisterResponse)=>{
  80.             // this.notify('success',registerResponse.msg);
  81.             this.alert('账号注册成功',()=>{
  82.                 self.onBack();
  83.             });
  85.         }).catch((error)=>{
  86.             this.alert(error);
  87.         })
  88.     }
  89.     //加密密码
  90.     public getPassword():string{
  91.         let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
  92.         //密码扩展
  93.         let PWD_EXTEND = "4aSys";
  94.         let pwMd5 = '';
  95.         if(pwd!=""){
  96.             // pwMd5 = String(CryptoJS.MD5(String(CryptoJS.MD5(pwd))+PWD_EXTEND));
  97.             pwMd5 = String(CryptoJS.MD5(pwd));
  98.             console.log('pwMd5',pwMd5);
  99.         }
  100.         return pwMd5;
  101.     }
  103.     /**
  104.      * 注册-不需要短信验证码
  105.      */
  106.     public registerNotSmsc(){
  107.         //校验手机号码
  108.         if (!this.isMobileValidate()) {
  109.             return;
  110.         }
  111.         //校验密码
  112.         let pwd = (<HTMLInputElement>this.$("input[name='pwd']")).value.trim();
  113.         let confPwd = (<HTMLInputElement>this.$("input[name='confPwd']")).value.trim();
  114.         if(pwd==''){
  115.             this.alert('请输入密码');
  116.             return;
  117.         }
  118.         if(confPwd==''){
  119.             this.alert('请输入确认密码');
  120.             return;
  121.         }
  122.         if(pwd != confPwd){
  123.             this.alert('两次密码输入的不一致，请重新输入');
  124.             return;
  125.         }
  126.         //校验密码是否符合规则
  127.         let pwdRule = PASSWORD_RULE[PASSWORDRULE];
  128.         if(pwdRule.regExpression){
  129.             let re = new RegExp(pwdRule.regExpression);
  130.             if(!re.test(pwd)){
  131.                 this.alert(pwdRule.msg);
  132.                 return;
  133.             }
  134.         }
  135.         let getCodeByPhoneRequest = new GetCodeByPhoneRequest();
  136.         getCodeByPhoneRequest.phoneNum = (<HTMLInputElement>this.holder.querySelector("input[name='mobile-num']")).value;
  137.         getCodeByPhoneRequest.bizType = '1';
  138.         this.loginService.getCodeByPhone(getCodeByPhoneRequest).then((getSmsResponse:GetCodeByPhoneResponse)=>{
  139.             if(getSmsResponse.code == '200'){
  140.                 this.registerInterface();
  141.             }else {
  142.                 this.alert(getSmsResponse.msg);
  143.             }
  145.         }).catch((error)=>{
  146.             this.alert(error);
  147.         })
  149.     }

调用注册接口的相关办法

  1. public register(registerRequest:RegisterRequest):Promise<RegisterResponse>{
  2.         return new Promise((resolve,reject)=>{
  3.             下面的'/register'是要调用的注册接口
  4.             this.initFetch(PATHROOT.GPFAPI+'/register',registerRequest).then((getSmsResponse:RegisterResponse)=>{
  5.                 if(getSmsResponse.code == "200"){
  6.                     resolve(getSmsResponse);
  7.                 } else {
  8.                     reject(getSmsResponse.msg);
  9.                 }
  10.             }).catch((error) => {
  11.                 reject(error);
  12.             });
  13.         });
  14.     }

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

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

发表评论

表情：
评论列表 （有 0 条评论，598人围观）

还没有评论，来说两句吧...

相关阅读

    相关 【Java案例】用户登录注册

    案例介绍： 编写程序实现简单的用户登录注册功能。程序包含以下4个功能： （1）登录功能，用户输入正确的账号密码登录成功； （2）注册功能，输入用户名和密码进行注册； （

    迷南。迷南。/ 0 赞/ 145 阅读

    相关 登录注册案例

    在集合的基础上，我们可以做一个登录注册案例 登陆注册案例分析： 利用面向对象的思想，我们必须先找到能完成某个功能的类，接着调用里面的方法完成它 登陆注册案例中的类：

    妖狐艹你老母妖狐艹你老母/ 0 赞/ 91 阅读

    相关 用户注册登录流程

    用户注册: 1.用户填写参数,移出鼠标效验手机号,登录账号,邮箱, 2.判断用户id是否是超级管理员用户,超级管理员是不允许修改的 3.随机生成盐,用户赋值盐

    旧城等待，旧城等待，/ 0 赞/ 729 阅读

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

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

    旧城等待，旧城等待，/ 0 赞/ 599 阅读