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

架构师全栈之路 2022-11-24 22:33:53 阅读数:49

vue实现修改邮箱手机号

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

1、大致思路

在这里插入图片描述

2、修改手机号

2.1 账号设置展示

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

在这里插入图片描述

2.2 旧号码验证界面

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

在这里插入图片描述

2.3 新号码验证界面

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

在这里插入图片描述

3、修改邮箱

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

3.1 账号设置展示

在这里插入图片描述

3.2 旧邮箱验证界面

在这里插入图片描述

3.3 新邮箱验证界面

在这里插入图片描述

4、后语

学无止境。。。。。。

版权声明:本文为[架构师全栈之路]所创,转载请带上原文链接,感谢。 https://zhengyz.blog.csdn.net/article/details/128019636