Vue組件開發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為歙縣等服務(wù)建站，歙縣等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為歙縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

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

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

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

組件行為

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

因此具體的組件行為主要是以下幾點(diǎn)：

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

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

組件props

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

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

組件的props選項(xiàng)如下：

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：Vue組件開發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://bm7419.com/article14/cdgide.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站維護(hù)、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)