Django电商项目（八）短信验证码的前后端实现

这篇文章我们开始完成短信验证码的前后端逻辑
后端逻辑
短信验证码接口设计

class SMSCodeView(View):"""短信验证码"""def get(self, request, mobile):""":param mobile: 手机号:return: JSON"""# 接收参数image_code_client = request.GET.get('image_code')uuid = request.GET.get('uuid')# 校验参数if not all([image_code_client, uuid]):return HttpResponseForbidden('缺少必传参数')# 创建连接到redis的对象redis_conn = get_redis_connection('verify_code')# 提取图形验证码image_code_server = redis_conn.get("img_%s" % uuid)# 删除图形验证码，避免恶意测试图形验证码redis_conn.delete("img_%s" % uuid)# 对比图形验证码if image_code_client != image_code_server.decode():return JsonResponse({"code": "", "errmsg": '图形验证码输入有误'})# 生成短信验证码：生成6位数验证码sms_code = "%06d" % random.randint(0, 999999)# 保存短信验证码redis_conn.setex("sms_" % mobile, 300, sms_code)# 发送短信验证码CCP().send_message(1, mobile, (sms_code, 5))# 响应结果return JsonResponse({"code": "0", "errmsg": '发送短信验证码输入成功'})

优化短信验证码后端逻辑，将一些常量定义在另一文件中

短信验证码前端逻辑实现

       check_sms_code() {if (this.sms_code.length != 6) {this.error_sms_code_message = '请填写短信验证码';this.error_sms_code = true;} else {this.error_sms_code = false;}},// 发送短信验证码send_sms_code(){// 避免频繁点击发送短信验证码标签if (this.sending_flag == true) {return;}this.sending_flag = true;// 校验参数this.check_mobile();this.check_image_code();if (this.error_mobile == true || this.error_image_code == true) {this.sending_flag = false;return;}// 向后端接口发送请求，让后端发送短信验证码let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code+'&uuid='+ this.uuid;axios.get(url, {responseType: 'json'}).then(response => {// 表示后端发送短信成功if (response.data.code == '0') {// 倒计时60秒let num = 60;let t = setInterval(() => {if (num == 1) {clearInterval(t);this.sms_code_tip = '获取短信验证码';this.generate_image_code();this.sending_flag = false;} else {num -= 1;this.sms_code_tip = num + '秒';}}, 1000)} else {if (response.data.code == '4001') {this.error_image_code_message = response.data.errmsg;this.error_image_code = true;} else { // 4002this.error_sms_code_message = response.data.errmsg;this.error_sms_code = true;}this.sending_flag = false;}}).catch(error => {console.log(error.response);this.sending_flag = false;})},// 校验用户名check_username() {let re = /^[a-zA-Z0-9_-]{5,20}$/;if (re.test(this.username)) {this.error_name = false;} else {this.error_name_message = '请输入5-20个字符用户名';this.error_name = true;}if (this.error_name == false) {let url = '/users/usernames/' + this.username + '/count/';axios.get(url, {responseType: 'json'}).then(response => {if (response.data.count == 1) {this.error_name_message = '用户名已存在';this.error_name = true;} else {this.error_name = false;}}).catch(error => {console.log(error.response);})}},

Django电商项目（八）短信验证码的前后端实现相关推荐

Django电商项目（八）订单生成、悲观锁、乐观锁
Django电商项目订单生成 mysql事务 django使用事务提交订单页面创建订单后台view 订单生成 mysql事务事务概念一组mysql语句,要么执行,要么全不不执行. 事务的特点 ...
Django电商项目（六）商品详情页、列表页分页、商品搜索
Django电商项目商品详情页商品列表页商品搜索全文检索安装和配置索引文件生成全文检索的使用改变分词方式商品详情页新建detail.html {% extends 'base_de ...
Django电商项目—项目规划和环境搭建
Django商品我们要做一个Django电商项目,那么在开始我们需要将项目分析,功能块,还有逻辑弄清楚, 1.功能块版本优化思想商城项目: 买家:购物车卖家:店铺商品我们首先要先把他们的 ...
Flask项目--发送短信验证码
1.后端代码具体代码如下: # GET /api/v1.0/sms_codes/<mobile>?image_code=xxxx&image_code_id=xxxx @api. ...
net项目对接java平台_用Java解决项目对接短信验证码难问题：OkHttp和Unirest介绍
这几个月都在用java 做一个企业的积分商城系统, 需要用户用手机号码进行注册登录,所以需要接入一个短信验证码进去. 短信验证码实现流程 1 .构造手机验证码,生成一个 4 位的随机数字串: 2 ...
java web项目登录短信验证码_如何在Web项目完成短信验证码
在做远程智能水表管理系统这个过程有一个功能是在注册页面可以使用手机注册,找了许久才大致了解了手机验证码实现流程,今天在此和大家分享一下. 短信验证码实现流程 1.构造手机验证码:使用random对象生 ...
springboot项目使用短信验证码的登录注册功能
一. 操作流程用户输入手机号,点击发送验证码按钮前端将手机号发送给后端后端生成一个6位的随机数通过短信发送给用户,之后手机号为key,随机数为value,存入缓存中,最后将短信发送是否成功的结果 ...
JavaWeb项目实现短信验证码
一.阿里云开通短信服务阿里云设置签名添加短信模板签名和模板都需要审核,大概两个小时左右(周末也审核). 获取用户AccessKey 二.代码 1.pom.xml中添加依赖 <!-- 阿 ...
[Vue.js]实战 -- 电商项目(八)
数据统计数据统计概述用于统计电商平台运营过程的中的各种统计数据通过直观的可视化方式展示出来,方便相关运营和管理人员查看用户来源数据统计报表 Echarts 第三方可视化库的基本使用安装ech ...

Django电商项目（八）短信验证码的前后端实现

Django电商项目（八）短信验证码的前后端实现相关推荐

最新文章

热门文章