Vue組件開發(fā)之LeanCloud帶圖形校驗碼的短信發(fā)送功能

更新時間：2017年11月07日 15:44:48 投稿：mrr

Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動及組件化的特性使得前端開發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗碼官方文檔基礎上，從封裝需要出發(fā)開發(fā)一個簡單的短信圖形驗證Vue組件,具體內(nèi)容詳情大家參考下本文

有15萬開發(fā)者使用LeanCloud服務，其中不乏知乎、懂球帝、愛范兒、拉卡拉等知名應用，LeanCloud提供了數(shù)據(jù)存儲、即時消息……等一站式服務，并從常用的用戶管理需求出發(fā)，提供了郵箱驗證、短信驗證……等用戶賬戶相關的服務。

為防止攻擊者惡意發(fā)送海量短信造成用戶賬戶損失并影響正常業(yè)務，LeanCloud推出了免費圖形校驗碼服務，并且可以在應用設置中設置“強制短信驗證服務使用圖形校驗碼”。

Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動及組件化的特性使得前端開發(fā)更為快捷便利。

LeanCloud提供的由客戶發(fā)起的短信發(fā)送場景主要有用戶驗證、用戶密碼重置，雖然不是很多場景，但如果每個場景下都單獨進行圖形校驗碼相關開發(fā)，則費時費力且對一些需要統(tǒng)一設置的參數(shù)調(diào)整不夠靈活。

組件命名為Mobile，基于Element-UI的Form組件和Input組件進行開發(fā)，如果用戶對布局和樣式有特殊要求，只需要改為自己相應的組件，或者使用原生HTML元素并設置樣式即可，同時需要將Element-UI提供的$message改為自己相應的API調(diào)用。

組件行為

開發(fā)的Mobile組件用于發(fā)送短信驗證碼，因此需要能夠輸入手機號碼和圖形校驗碼，并可觸發(fā)發(fā)送短信的動作，觸發(fā)發(fā)送短信動作成功后，需要禁用發(fā)送短信功能，并進行倒計時，倒計時結(jié)束后才能重新發(fā)送短信。

因此具體的組件行為主要是以下幾點：

提供一個輸入手機號的輸入框，該輸入框內(nèi)容可以由用戶輸入，也可以從用戶信息中獲取。
提供一個輸入圖形校驗碼的輸入框。
頁面加載完畢顯示圖形校驗碼。
提供一個發(fā)送短信的按鈕，用戶點擊發(fā)送短信的按鈕，校驗圖形校驗碼，若校驗通過，使用手機號碼，并以圖形校驗碼校驗返回的validataionToken作為option參數(shù)發(fā)送短信。
短信發(fā)送成功，禁用發(fā)送短信的按鈕，啟動定時器進行倒計時，倒計時結(jié)束后恢復發(fā)送短信的按鈕。
組件使用Element-UI的Form組件的布局，需要考慮el-form的labelWidth標簽寬度設置與父組件中的el-form匹配。

其中發(fā)送短信的行為必須調(diào)用不同場景下的API，因此我們需要將此按鈕綁定的事件emit到父組件，由父組件決定具體調(diào)用哪個API。

組件props

從上述組件行為出發(fā)，分析需要傳入組件的props：

表示手機號碼屬性。我們發(fā)送短信驗證碼的目的是最終用于后續(xù)的驗證或密碼重置操作，可以從外部傳入，并且能夠在組件內(nèi)部修改后返回父組件，因此該屬性必須是雙向綁定的，Vue組件中雙向綁定的屬性有兩種，一是自定義v-model，屬性名必須是value，一是可以使用.sync修飾符綁定的屬性，這里將手機號碼屬性設置為Mobile組件的v-model屬性，屬性名為value。
通知Mobile組件短信已發(fā)送的屬性。屬性名為smsSent，類型為Boolean，以禁用發(fā)送短信的按鈕，并啟動倒計時。
el-form的labelWidth屬性。設置默認值，并接受來自父組件中傳遞的數(shù)據(jù)以保持與父組件中其他元素/組件布局一致。

組件的props選項如下：

props: {
 labelWidth: {
 type: String,
 default: '100px'
 },
 value: String,
 smsSent: Boolean
},

組件模板中，與props相關的考量主要有如下三方面：

組件的根元素是一個el-form組件，其label-width屬性綁定到來自父組件的labelWidth屬性， <el-form ref="mobile-form"> 。

手機號碼輸入框使用el-input組件，綁定到value屬性，要實現(xiàn)雙向綁定，不能直接使用v-model進行數(shù)據(jù)綁定，而是要將v-model綁定轉(zhuǎn)換為v-bind:value屬性綁定和@input事件綁定， <el-input :value="value" @input="value => $emit('input', value)"> ，這樣就可以實現(xiàn)“v-model透傳”。

（間接）發(fā)送短信按鈕的禁用狀態(tài)。發(fā)送短信按鈕的禁用狀態(tài)由倒計時的計數(shù)器組件data數(shù)據(jù)觸發(fā)，當該數(shù)據(jù)不為0時，發(fā)送短信的按鈕禁用。倒計時觸發(fā)方式是通過父組件中綁定的smsSent屬性，因此需要在子組件中watch該屬性，并在該值為真是設置倒計時計數(shù)器，并通過setInterval進行倒計時。

圖形校驗碼加載

為在組件加載時顯示圖形校驗碼，需要在組件的mounted生命周期鉤子中調(diào)用LeanCloud的API。

在AV.Captcha.request()的回調(diào)中綁定校驗碼輸入框、圖形校驗碼元素以及發(fā)送短信按鈕元素，綁定參數(shù)對象的三個屬性均可以是表示元素id的string或?qū)嶋HHTMLElement，由于我們創(chuàng)建的是Vue組件，因此直接使用組件的$refs屬性來指定實際HTMLElement，需要注意的是，el-input中input元素是ref的$el屬性的children[0]，而el-button中button元素是ref的$el。

綁定函數(shù)還需要傳入第二個參數(shù)，這是一個含有success和error方法的對象，用于提供圖形校驗碼校驗成功和失敗的操作。

發(fā)送短信驗證碼

發(fā)送短信驗證碼在傳遞的第二個參數(shù)對象的success方法中進行，在這里，我們首先更新組件的smsSent屬性為false，這樣，當在父組件中實際完成短信發(fā)送之后設置smsSent為true時才會觸發(fā)針對smsSent屬性的watcher，同時，需要注意在父組件中綁定smsSent屬性時，必須使用.sync修飾符。然后向父組件emit自定義sendSmsCode事件，并將success回調(diào)時的validateToken參數(shù)透傳過去。

mounted () {
 this.$emit('update:smsSent', false)
 AV.Captcha.request().then((captcha) => {
 captcha.bind({
 textInput: this.$refs.captcha.$el.children[0],
 image: this.$refs.captchaImage,
 verifyButton: this.$refs.sendSms.$el
 }, {
 success: (validateToken) => {
 this.$emit('sendSmsCode', validateToken)
 },
 error: () => {
 this.$message.error('請輸入正確的圖形校驗碼！')
 }
 })
 })
}

組件使用

首先在父組件的組件選項中添加包含Mobile組件的components，然后在模板中添加mobile組件。

<mobile v-model="mobileForm.mobile"
 :sms-sent.sync="mobileForm.smsSent"
 @sendSmsCode="sendSms"></mobile>

其中綁定sendSmsCode事件的方法如下：

sendSms (validateToken) {
 this.sendSmsCode({
 mobile: this.mobileForm.mobile,
 validateToken
 }).then(() => {
 this.mobileForm.smsSent = true
 })
},

完整組件代碼

<template>
 <el-form class="mobile-form"
  :label-width="labelWidth"
  ref="mobile-form">
 <el-form-item label="手機號碼" prop="mobile">
 <el-input :value="value"
  @input="value => $emit('input', value)"
  :maxlength="11"
  type="tel">
 </el-input>
 </el-form-item>
 <el-form-item label="圖形校驗碼">
 <el-input type="text" ref="captcha"></el-input>
 <img ref="captchaImage">
 </el-form-item>
 <el-form-item>
 <el-button type="info"
   ref="sendSms"
   :disabled="smsCodeCountingDown > 0 ||
    value.length !== 11">
 發(fā)送驗證碼
 </el-button>
 <span v-if="smsCodeCountingDown > 0">
   {{smsCodeCountingDown}} 秒后重新發(fā)送
  </span>
 </el-form-item>
 </el-form>
</template>
<script>
 import AV from 'leancloud-storage'
 export default {
 data () {
 return {
 smsCodeCountingDown: 0
 }
 },
 props: {
 labelWidth: {
 type: String,
 default: '100px'
 },
 value: String,
 smsSent: Boolean
 },
 watch: {
 smsSent (val) {
 if (val) {
  this.smsCodeCountingDown = 30
  let countingDownInterval = setInterval(() => {
  this.smsCodeCountingDown--
  if (this.smsCodeCountingDown === 0) {
  clearInterval(countingDownInterval)
  }
  }, 1000)
 }
 }
 },
 mounted () {
 AV.Captcha.request().then((captcha) => {
 captcha.bind({
  textInput: this.$refs.captcha.$el.children[0],
  image: this.$refs.captchaImage,
  verifyButton: this.$refs.sendSms.$el
 }, {
  success: (validateToken) => {
  this.$emit('update:smsSent', false)
leancloud  this.$emit('sendSmsCode', validateToken)
  },
  error: () => {
  this.$message.error('請輸入正確的圖形校驗碼！')
  }
 })
 })
 }
 }
</script>
<style scoped>
 .sms-code-form {
 width: 360px;
 }
</style>

總結(jié)

以上所述是小編給大家介紹的Vue組件開發(fā)之LeanCloud帶圖形校驗碼的短信發(fā)送功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: