vue项目和小程序项目中的倒计时

倒计时

需求:同一账户连续登录失败2次,锁定该账户15分钟

后台做起来应该比前台简单,但是后台不做,那就拿到前台来做吧,主要是记录下来和小程序做下对比(语法)因为最近的项目在vue和微信小程序中来回跳转,今天vue项目,明天就是小程序项目,来回反复。

大致流程:点击登陆时,将账号密码验证码通过接口传给后台,后台进行比对,比对成功时跳转页面,账号密码错误比对失败时,清空账号密码验证框中的值,然后开始计数,即图中的num++。需要在data数据中先定义num,然后在方法中直接this.num即可拿到,this.num++,即可加1。当达到一定数时,将登陆按钮置换为不可登陆的状态。

vue项目中是以倒计时的状态在显示,在倒计时内不可登陆
vue项目和小程序项目中的倒计时
vue项目和小程序项目中的倒计时
代码片段:

  <input @click="userLogin()" value="登录" type="button" class="button" v-if="disabled">
  <button  class="button" v-else >{{count}}s后重新登陆</button>
 // 登录获取用户信息 token
        userLogin () {
          this.userModel.userMobile = this.userName
          this.userModel.userPwd = this.userPwd
          let result = this.checkResult()
          if (result) {
            this.$http.post(this.$baseUrl + ‘/user/login‘, JSON.stringify(this.userModel), {
              headers: {
                ‘Content-Type‘: ‘application/json;‘
              },
              emulateJSON: true
            }).then((Data) => {
              let data = Data.data
              if (data.success) {
                if (data.data.token) {
                  // eslint-disable-next-line no-undef
                  $cookies.set(‘userToken‘, data.data.token)
                  // eslint-disable-next-line no-undef
                  this.$store.commit(‘login‘, $cookies.get(‘userToken‘))
                  // 登录跳转
                  this.$router.push(‘/zhhome‘)
                }
              } else {
                this.changeCode()
                // 清空输入框内容
                this.$refs.identifyCode.value = ‘‘
                this.$message({ type: ‘error‘, duration: 3000, message: data.message, center: true })
                // 锁定登陆
                this.num++
                console.log(this.num)
                if (this.num >= 5) {
                  this.message = ‘同一账户连续登录失败5次,锁定该账户15分钟‘
                  this.$message({ type: ‘error‘, duration: 3000, message: this.message, center: true })
                  //  切换按钮
                  this.disabled = false
                    // 开始倒计时
                     this.timer = setInterval(() => { this.count-- }, 1000)// eslint-disable-line no-unused-vars
                     setTimeout(() => {
                        if (this.count === 0) {
                       clearInterval(this.timer)// eslint-disable-line no-unused-vars
                     }
                     }, 5000)
                     this.count = 5 // 避免时间到了再次输入的时候count为负值或其他(这一步很有必要)
                  console.log(this.count)
                    // 1000s之后再次切换登陆按钮
                  setTimeout(() => {
                    this.disabled = true
                    }, 5000)
                    clearTimeout()
                }
              }
            }).catch((error) => {
              Artery.message.error(error.message) // eslint-disable-line no-undef
            })
          } else {
            this.changeCode()
            // 清空输入框内容
            this.$refs.identifyCode.value = ‘‘
            this.$message({ type: ‘error‘, duration: 5000, message: this.message, center: true })
          }
        },

难点及思考点:

  • 在代码中直接写间歇函数时无法进行清除,会出现倒计时到0时不停,且为负的,肯定是不符合需求的,在data中写timer:"",将间歇计数函数清除掉时, clearInterval(this.timer)即可。

  • 延迟函数停止时还要将计数的数字归为原来的数字,否则下一次倒计时时就直接按照上一次的进行了,因为定时器类似于异步函数了,不能直接在下面将data中的count归为5,既然间歇延迟函数是异步函数我们也可以写一个异步函数,在倒计时结束时将数字归为原来的数字,即:

  • 					setTimeout(() => {
                            if (this.count === 0) {
                           clearInterval(this.timer)// eslint-disable-line no-unused-vars
                         }
                         }, 5000)
                         this.count = 5 // 避免时间到了再次输入的时候count为负值或其他(这一步很有必要)
    

小程序中的流程较为简单:在接口返回失败时,拿到后台返回的数据,并累计加数字,数字累计满足时切换另一个登陆的按钮,因为研发经理要求的是不用给用户提示倒计时,而是点击按钮提示 “输错次数过多,请30分钟后重试”

这个就不考虑使用间歇延迟函数让时间每秒减1。只需一个定时器即可。

onFailed: function (msg) { //onFailed回调
    wx.hideLoading();
    if (msg) {
      wx.showToast({
        title: msg,
        icon: "none"
      })
      // 判断输错次数
      // 获取data 中的值
         this.setData({
           num:(this.data.num)+1
         })
      // 如果输错次数达到5
      if(this.data.num===5){
        this.setData({
          login:false,
          login2: true,
          isShowSignButtton2: true
        })
        setTimeout(()=>{
          this.setData({
            num:0,
            login:true,
            isShowSignButtton: true,
            login2: false,
            isShowSignButtton2: false,
            isShowsgin: false
          })
        // },1000*60*30)
        },10000)

      }
    }else{
      wx.showToast({
        title:‘用户名或密码有误,请仔细检查或者联系系统管理员‘,
        icon: "none"
      })
    }
  },

两者不同的是:

  • 拿data中的值:

    • vue中直接this.num就可以拿到
    • 小程序中要this.data.num才可以拿到
  • 改变data中的值:

    • vue中直接this.num:2即可赋值
    • 小程序中要this.setData({num:2})
  • data中的值加1时:

    • vue中直接this.num++
    • 小程序中this.setData({num:(this.data.num)+1})

其实感觉不是生熟的问题,是习惯的问题。就突然切换不过来,嘻嘻??

vue项目和小程序项目中的倒计时

上一篇:浅谈C#取消令牌CancellationTokenSource


下一篇:SpringMVC同时支持多视图(JSP,Velocity,Freemarker等)的一种思路实现