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

創新互聯于2013年創立，先為歙縣等服務建站，歙縣等地企業，進行企業商務咨詢服務。為歙縣企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

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

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

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

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

組件行為

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

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

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

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

組件props

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

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

組件的props選項如下：

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

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

文章名稱：Vue組件開發之LeanCloud帶圖形校驗碼的短信發送功能-創新互聯
網站地址：http://vcdvsql.cn/article14/cdgide.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、網站維護、商城網站、品牌網站設計、網站改版、做網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯