vue实战（7）：完整开发登录页面（一）

加速度

转眼又到端午放假，趁着这期间再整理一篇，这个小项目不大，但是时间拖的比较久，期间浪费了不少时间，加快速度，争取早点结束掉。

0. 其它

vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频

1. 界面相关效果

---

这一部分内容，回到之前完成的 Login.vue 页面，做逻辑之前先完成一些必要的效果。

• 切换登录
  1）设置布尔值 logingwey: true, // 短信登录为true,密码登录为false
  2）设置相关 class
  登录切换.gif

• 手机号合法检查
  1）判断输入的手机号的位数

computed: {
    // 返回true或者false，用test（），判断是否输入了11位1开头的数字
    logincode () {
      return /^1\d{10}$/.test(this.phone)
    }
  },

2）判断是否可以发送验证码

<button :disabled="!logincode" 
        class="get_verification" 
        :class="{login_code: logincode}" 
        @click.prevent ="righttime">
    {{timenum > 0 ? `已发送${timenum}s` : '获取验证码'}}
 </button>

• 倒计时效果
  1）设置倒计时为30秒

righttime () {
      // 倒计时
      if (!this.timenum) {
        this.timenum = 30 // 初始值为30秒
        let clertime = setInterval(() => { // 计时器
          this.timenum--
          if (this.timenum <= 0) { // 如果减到0则清楚计时器
            clearInterval(clertime)
          }
        }, 1000)
        // ajax请求
      }
    }

发送验证码倒计时.gif

• 切换显示或隐藏密码
  1）两个 input 设置密码显示与隐藏

<section class="login_verification">
  <input type="password" maxlength="8" placeholder="密码" 
         v-if="showpwd" v-model="pwd">
  <input type="text" maxlength="8" placeholder="密码" 
         v-else v-model="pwd">
      <div class="switch_button " :class="showpwd ? 'on' : 'off'" 
           @click="showpwd = !showpwd">
           <div class=""></div>
       <span class="switch_text">{{showpwd ? '显示' : 'abc'}}</span>
      </div>
</section>

• 前台验证提示
  1）新建 AlertTip 文件夹与 AlertTip.vue 文件
  2）搭好页面与 css

<template>
  <div class="alert_container">
    <section class="tip_text_container">
      <div class="tip_icon">
        <span></span>
        <span></span>
      </div>
      <p class="tip_text">{{alertText}}</p>
      <div class="confrim" @click="closeTip">确认</div>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    alertText: String
  },
  methods: {
    closeTip () {
      // 分发自定义事件
      this.$emit('closeTip')
    }
  }
}
</script>

3）login.vue 页调用并判断

showalert (alertText) {
      this.alertshow = true
      this.alertText = alertText
    },
    // 登录
    login () {
      if (this.logingwey) { // 短信登录
        const { logincode, phone, code } = this
        if (!this.logincode) {
          // 手机号有误
          this.showalert('手机号有误')
        } else if (!this.code) {
          // 验证码有误
          this.showalert('验证码有误')
        }
      } else { // 密码登录
        const { name, pwd, captcha } = this
        if (!this.name) {
          // 用户名不能为空
          this.showalert('用户名不能为空')
        } else if (!this.pwd) {
          // 密码不能为空
          this.showalert('密码不能为空')
        } else if (!this.captcha) {
          // 验证码有误
          this.showalert('验证码有误')
        }
      }
    },
    closeTip () {
      this.alertshow = false
      this.alertText = ''
    }

提示弹窗.gif

2. 动态一次性图形验证码

---

• 把 src 换成接口
  <img class="get_verification" src="http://localhost:4000/captcha" @click="getCaptcha" ref="captchas" alt="captcha">
• 添加点击事件，点击刷新图片

// 刷新图片验证码
   getCaptcha () {
     this.$refs.captchas.src = `http://localhost:4000/captcha?time=${Date.now()}`
   }

• $refs 的基本用法
  VUE中$refs的基本用法
  图片验证码刷新.gif

3. 结束

放在一篇有点长，分第二篇

点个赞呗！