Vue组件开发之LeanCloud带图形校验码的短信发送功能


Posted in Javascript onNovember 07, 2017

有15万开发者使用LeanCloud服务,其中不乏知乎、懂球帝、爱范儿、拉卡拉等知名应用,LeanCloud提供了数据存储、即时消息……等一站式服务,并从常用的用户管理需求出发,提供了邮箱验证、短信验证……等用户账户相关的服务。

为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务,LeanCloud推出了免费图形校验码服务,并且可以在应用设置中设置“强制短信验证服务使用图形校验码”。

Vue组件开发之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
},

组件模板中,与props相关的考量主要有如下三方面:

组件的根元素是一个el-form组件,其label-width属性绑定到来自父组件的labelWidth属性, <el-form ref="mobile-form">

手机号码输入框使用el-input组件,绑定到value属性,要实现双向绑定,不能直接使用v-model进行数据绑定,而是要将v-model绑定转换为v-bind:value属性绑定和@input事件绑定, <el-input :value="value" @input="value => $emit('input', value)"> ,这样就可以实现“v-model透传”。

(间接)发送短信按钮的禁用状态。发送短信按钮的禁用状态由倒计时的计数器组件data数据触发,当该数据不为0时,发送短信的按钮禁用。倒计时触发方式是通过父组件中绑定的smsSent属性,因此需要在子组件中watch该属性,并在该值为真是设置倒计时计数器,并通过setInterval进行倒计时。

图形校验码加载

为在组件加载时显示图形校验码,需要在组件的mounted生命周期钩子中调用LeanCloud的API。

AV.Captcha.request()的回调中绑定校验码输入框、图形校验码元素以及发送短信按钮元素,绑定参数对象的三个属性均可以是表示元素id的string或实际HTMLElement,由于我们创建的是Vue组件,因此直接使用组件的$refs属性来指定实际HTMLElement,需要注意的是,el-input中input元素是ref的$el属性的children[0],而el-button中button元素是ref的$el。

绑定函数还需要传入第二个参数,这是一个含有success和error方法的对象,用于提供图形校验码校验成功和失败的操作。

发送短信验证码

发送短信验证码在传递的第二个参数对象的success方法中进行,在这里,我们首先更新组件的smsSent属性为false,这样,当在父组件中实际完成短信发送之后设置smsSent为true时才会触发针对smsSent属性的watcher,同时,需要注意在父组件中绑定smsSent属性时,必须使用.sync修饰符。然后向父组件emit自定义sendSmsCode事件,并将success回调时的validateToken参数透传过去。

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">
 发送验证码
 </el-button>
 <span v-if="smsCodeCountingDown > 0">
   {{smsCodeCountingDown}} 秒后重新发送
  </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>

总结

以上所述是小编给大家介绍的Vue组件开发之LeanCloud带图形校验码的短信发送功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
如何使用JavaScript实现栈与队列
Jun 24 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
js实现橱窗展示效果
Jan 11 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
EasyUI实现下拉框多选功能
Nov 07 #Javascript
ES6中字符串string常用的新增方法小结
Nov 07 #Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
You might like
PHP Directory 函数的详解
2013/03/07 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
Symfony核心类概述
2016/03/17 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
js实现简单的验证码
2015/12/25 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Python实现数值积分方式
2019/11/20 Python
python time.strptime格式化实例详解
2021/02/03 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
委托书怎么写
2014/07/31 职场文书
节约用电通知
2015/04/25 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL