位置: 编程技术 - 正文

Vue组件开发之LeanCloud带图形校验码的短信发送功能(vuejs组件开发实例)

编辑:rootadmin

推荐整理分享Vue组件开发之LeanCloud带图形校验码的短信发送功能(vuejs组件开发实例),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue常用组件开发,vue组件开发的原理,vue组件开发规范,vue组件用法,vue 组件开发,vue怎么开发组件,vue 组件开发,vue怎么开发组件,内容如对您有帮助,希望把文章链接给更多的朋友!

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

为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务,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相关的考量主要有如下三方面:

Vue组件开发之LeanCloud带图形校验码的短信发送功能(vuejs组件开发实例)

组件的根元素是一个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参数透传过去。

组件使用

首先在父组件的组件选项中添加包含Mobile组件的components,然后在模板中添加mobile组件。

其中绑定sendSmsCode事件的方法如下:

完整组件代码

总结

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

vue-router路由与页面间导航实例解析 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并

vue实现仿淘宝结账页面实例代码 虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的。下面小编给大家分享vue实现仿淘宝结账页面实例代码,具体内容大家参考下本文。这

AngularJs 终极购物车(实例讲解) 废话不多说,直接上代码:!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title购物车/titlescriptsrc="angularjs/angular.js"/scriptstyle.box{width:%;border-bottom:1pxsolidsilver;}.box1{

标签: vuejs组件开发实例

本文链接地址:https://www.jiuchutong.com/biancheng/375897.html 转载请保留说明!

上一篇:vue组件父子间通信详解(三)(vue 父子组件通信)

下一篇:vue-router路由与页面间导航实例解析(请简述vue-router路由的作用)

  • 工资里个人代扣款是什么
  • 增值税的附加税有几个
  • 未取得发票的费用,在汇算清缴中按利润计算吗
  • 劳务费个人所得税怎样计算
  • 更正申报后可以作废吗
  • 购买厨房用品属于什么费用
  • 主营业务收入开普票怎么记账
  • 预收账款怎样清零
  • 税务机关如何防范关联企业涉税风险问题
  • 教育服务增值税纳税义务发生时间
  • 未及时支付工资时间界限
  • 工程项目处理废旧钢材怎么入账的
  • 公司退股清算对股东影响
  • 利润调整分录
  • 销售商品包安装如何确认收入
  • 无经营零申报公司注销要交印花税吗
  • 核销坏账应具备的条件
  • 怎么进入登录
  • windows10找不到用户和组
  • 其他货币资金期末处理
  • 公司收到供应商的律师函
  • 品质扣款单
  • PHP:session_cache_limiter()的用法_Session函数
  • 建筑业预缴企业所得税是分季预缴按年抵减吗
  • 别人利息没给怎么发问
  • puppetm
  • 如何预防电脑系统崩溃
  • php单例模式例子
  • 营业外收入的会计要素
  • 君子兰的养殖方法
  • 处置二手固定资产
  • PHP:imagecreatefromwebp()的用法_GD库图像处理函数
  • 建筑安装收入会计分录
  • laravel 自定义类
  • 如何购买增值税发票需要什么资料
  • php发送post
  • 令人感到惊艳
  • easyposer怎么导出
  • python输入三个数判断能否构成三角形
  • 生产加工型企业需要办理哪些证件
  • 认证系统维护费怎么算
  • 合伙企业分红怎么做账
  • opengl环境光参数
  • db2教程
  • 哪些收入需要缴纳个人所得税
  • 税前扣除项目主要包括
  • 企业发生的现金溢余如果无法查明原因
  • 主营业务成本大于主营业务收入怎么办
  • 存货跌价准备在年报哪里
  • 先前收取的包装费用
  • 外贸公司是不是什么都做的?
  • 财政补助结转结转的依据
  • 存量资金上缴财政怎么做账
  • 银行利息 税
  • 公司收入和开支比例
  • 小规模纳税人减按1%政策
  • 抵扣与扣除的区别
  • 生产性生物资产账务处理
  • 企业不加入工会的原因
  • 选择业务组合的原则是什么
  • sql数据库建立步骤
  • sql合并多条记录某一个字段
  • win8.1关机
  • win10选择一个选项
  • linux中的文件
  • SUSE Linux Enterprise Server 设置防火墙开启ssh远程端口的方法
  • win8怎么关闭电脑
  • windows8.1卸载软件
  • ssh连不上centos
  • [置顶]游戏名:chivalry2
  • shell命令读取文件并新增另一文件到指定行
  • shell bash sh
  • webview自定义视频播放器
  • Android alertDialog 动态添加edittext无法弹出键盘解决方案
  • 深圳国税电子税务局网上办税服务厅
  • 审计会计税务的区别及联系
  • 上海社保基数对照表
  • 娱乐会所一般有什么
  • 花店会计主要做什么
  • 2021年个税退税条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设