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

一时失言乱红尘 2021-11-26 16:54 323阅读 0赞

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

### 0. 其它 ###

[vue实战（1）：准备与资料整理][vue_1]  
[vue实战（2）：初始化项目、搭建底部导航路由][vue_2]  
[vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由][vue_3]  
[vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态][vue_4_postman_ajax_vuex]  
[vue实战（5）：总结一][vue_5]  
[vue实战（6）：异步显示数据、开发Star组件][vue_6_Star]  
[vue实战（7）：完整开发登录页面（一）][vue_7]  
[vue实战（8）：完整开发登录页面（二）][vue_8]  
[vue实战（9）：总结二][vue_9]  
[vue实战（10）：开发店铺详情（一）][vue_10]

### 1. 界面相关效果 ###

--------------------

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

*  **切换登录**  
    1）设置布尔值 `logingwey: true, // 短信登录为true,密码登录为false`  
    2）设置相关 *class*  
    ![登录切换.gif][.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][.gif 1]

*  **切换显示或隐藏密码**  
    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][.gif 2]

### 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的基本用法][VUE_refs]  
    ![图片验证码刷新.gif][.gif 3]

### 3. 结束 ###

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

![点个赞呗！][1240]

转载于:https://www.cnblogs.com/jry199506/p/11040149.html

[vue_1]: https://www.jianshu.com/p/880f687fdba4
[vue_2]: https://www.jianshu.com/p/1f97678c3170
[vue_3]: https://www.jianshu.com/p/c08cb65ae59c
[vue_4_postman_ajax_vuex]: https://www.jianshu.com/p/7d82d80e42fe
[vue_5]: https://www.jianshu.com/p/7a4bb4397df4
[vue_6_Star]: https://www.jianshu.com/p/f9ed32294bbb
[vue_7]: https://www.jianshu.com/p/9367e150965e
[vue_8]: https://www.jianshu.com/p/8bb98896d0e0
[vue_9]: https://www.jianshu.com/p/813ee551a18a
[vue_10]: https://www.jianshu.com/p/8d43696a168d
[.gif]: /images/20211126/50a4022cda9f48ff9803570d45dbe2db.png
[.gif 1]: /images/20211126/91fbedcd225a4e66906e947fbbb25523.png
[.gif 2]: /images/20211126/d5db45552a0643a1aff3ccaa44901c9b.png
[VUE_refs]: https://blog.csdn.net/wh710107079/article/details/88243638
[.gif 3]: /images/20211126/e4195e8ad19141dbbe34446da9a8aa15.png
[1240]: /images/20211126/6609b09aa12949ba964698941b32f7ef.png