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）：開發店鋪詳情（一）

1. 界面相關效果

---

這一部分內容，回到之前完成的 Login.vue 頁面，做邏輯之前先完成一些必要的效果。

• 切換登錄
  1）設置布爾值 logingwey: true, // 短信登錄為true,密碼登錄為false
  2）設置相關 class
  

• 手機號合法檢查
  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請求
      }
    }

• 切換顯示或隱藏密碼
  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 = ''
    }

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的基本用法
  

3. 結束

放在一篇有點長，分第二篇