后端用户注册及发送短信验证码3

1.项目页面展示后端用户注册及发送短信验证码3_第1张图片
2.获取图形验证码框和短信按钮,并设置一些标记 进行一些逻辑处理后端用户注册及发送短信验证码3_第2张图片
3.获取后执行点击触发逻辑在这里插入图片描述
4.设置send_flag标记,默认为true,执行后为false,(当点击一次发送短信按钮时,send_flag为false,不能再次点击发送,在倒计时为一秒时设置为true,即可以再次点击)
后端用户注册及发送短信验证码3_第3张图片
5.获取图形框用户输入的值,判断是否为空,以及uuid是否为空(每一个图形码携带唯一的uuid标识,相当于人的身份证)
后端用户注册及发送短信验证码3_第4张图片
6.以字典的形式声明参数,方便转化成json格式传入后端
后端用户注册及发送短信验证码3_第5张图片
7.ajax传入后端
后端用户注册及发送短信验证码3_第6张图片
8.ajax通过路由传入对应的视图
后端用户注册及发送短信验证码3_第7张图片
9.对应视图获取传过来的数据,并转化为字典,用过键获取每一个值,进行数据逻辑处理
后端用户注册及发送短信验证码3_第8张图片
10.获取并判断是否为空
后端用户注册及发送短信验证码3_第9张图片
11.连接数据库,需要从数据库里拿数据进行对比,或存入数据到数据库
在这里插入图片描述
12.从数据库获取生成的图形码,并判断是否为空,不为空拿到图形码后删除,不占数据库空间,为了防止过期等报错try一脚
后端用户注册及发送短信验证码3_第10张图片
13.数据库与用户输入的图形码相比对,并判断
后端用户注册及发送短信验证码3_第11张图片
14.比对成功后生成短信验证码{随机整数),并存入数据库后端用户注册及发送短信验证码3_第12张图片
15.将短信验证码打印到控制台,并返回给状态码文件

后端用户注册及发送短信验证码3_第13张图片
16.状态码文件里的函数接收参数,JsonResponse返回给前端
后端用户注册及发送短信验证码3_第14张图片
17.前端回调数据,res接收成功设置定时器(setInterval为循环执行,setTimeout为执行一次),在倒计时为一的时候设置send_flag标记为true,这时才可以再次点击按钮。
后端用户注册及发送短信验证码3_第15张图片
18.定时器思路:(1)基础num值设置为60。(2)判断num如果等于1的话,清除定时器,并将按钮的文本改成获取短信验证码。(3)反过来,如果num不等于1,则设置为每一秒减1,文本设置为num+秒

后端用户注册及发送短信验证码3_第16张图片
19.回调失败
后端用户注册及发送短信验证码3_第17张图片
20.设置一个60s的标记存入数据库(携带用户手机号),如果用户再次点击就触发
在这里插入图片描述
21.获取标记 判断是否存在逻辑
后端用户注册及发送短信验证码3_第18张图片
总体思路:
js获取执行点击事件,判断逻辑,是否为空。
定义参数字典,ajax传入后台。
后台获取转化,再一个一个获取值进行逻辑判断。
连接数据库。
比对。
生成短信验证码。
打印控制台,并返回前端。
前端回调,进行信息判断逻辑处理。
失败处理

你可能感兴趣的:(笔记)