0
点赞
收藏
分享

微信扫一扫

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)


稍微记录一下修改手机号码和邮箱的大致实现过程。暂时设定为版本1.0

1、大致思路

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)_验证码

2、修改手机号

2.1 账号设置展示

这里的手机和邮箱进行了部分字段隐藏、实现的方式很简单、使用过滤器就可以。提示这里通过点击字段、跳转页面、是通过调用方法然后触发路由跳转、可以根据设置的name进行跳转、贼方便

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)_验证码_02

2.2 旧号码验证界面

这里的验证码 由后端生成实现,这里暂时以弹窗的形式展示给用户、然后用户输入对应的验证码。后期可接入真正的手机验证码接口、几分钱就可以发好几百条的那种aip接口

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)_验证码_03

2.3 新号码验证界面

这里验证新号码是否可用、然后进行修改、验证码原理同2.2

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)_验证码_04

3、修改邮箱

思路同修改手机号、这里只给出页面效果

3.1 账号设置展示

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)_验证码_05

3.2 旧邮箱验证界面

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)_验证码_06

3.3 新邮箱验证界面

Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)_Vue.js_07

4、后语

学无止境。。。。。。


举报

相关推荐

0 条评论