Flask项目--发送短信验证码

1.后端代码

在这里插入图片描述具体代码如下:

# GET /api/v1.0/sms_codes/<mobile>?image_code=xxxx&image_code_id=xxxx
@api.route("/sms_codes/<re(r'1[34578]\d{9}'):mobile>")
def get_sms_code(mobile):"""获取短信验证码"""# 获取参数image_code = request.args.get("image_code")image_code_id = request.args.get("image_code_id")# 校验参数if not all([image_code_id, image_code]):# 表示参数不完整return jsonify(errno=RET.PARAMERR, errmsg="参数不完整")# 业务逻辑处理# 从redis中取出真实的图片验证码try:real_image_code = redis_store.get("image_code_%s" % image_code_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="redis数据库异常")# 判断图片验证码是否过期if real_image_code is None:# 表示图片验证码没有或者过期return jsonify(errno=RET.NODATA, errmsg="图片验证码失效")# 删除redis中的图片验证码,防止用户使用同一个图片验证码验证多次try:redis_store.delete("image_code_%s" % image_code_id)except Exception as e:current_app.logger.error(e)# 与用户填写的值进行对比if real_image_code.lower() != image_code.lower():# 表示用户填写错误return jsonify(errno=RET.DATAERR, errmsg="图片验证码错误")# 判断对于这个手机号的操作,在60秒内有没有之前的记录,如果有,则认为用户操作频繁,不接受处理try:send_flag = redis_store.get("send_sms_code_%s" % mobile)except Exception as e:current_app.logger.error(e)else:if send_flag is not None:# 表示在60秒内之前有过发送的记录return jsonify(errno=RET.REQERR, errmsg="请求过于频繁,请60秒后重试")# 判断手机号是否存在try:user = User.query.filter_by(mobile=mobile).first()except Exception as e:current_app.logger.error(e)else:if user is not None:# 表示手机号已存在return jsonify(errno=RET.DATAEXIST, errmsg="手机号已存在")# 如果手机号不存在,则生成短信验证码sms_code = "%06d" % random.randint(0, 999999)# 保存真实的短信验证码try:redis_store.setex("sms_code_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)# 保存发送给这个手机号的记录,防止用户在60s内再次出发发送短信的操作redis_store.setex("send_sms_code_%s" % mobile, constants.SEND_SMS_CODE_INTERVAL, 1)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="保存短信验证码异常")# 发送短信# 使用celery异步发送短信, delay函数调用后立即返回(非阻塞)# send_sms.delay(mobile, [sms_code, int(constants.SMS_CODE_REDIS_EXPIRES/60)], 1)# 返回异步任务的对象result_obj = send_sms.delay(mobile, [sms_code, int(constants.SMS_CODE_REDIS_EXPIRES/60)], 1)print(result_obj.id)# 通过异步任务对象的get方法获取异步任务的结果, 默认get方法是阻塞的ret = result_obj.get()print("ret=%s" % ret)# 返回值# 发送成功return jsonify(errno=RET.OK, errmsg="发送成功")

2.前端html代码

在这里插入图片描述具体代码如下:

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>爱家-注册</title><link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"><link href="/static/css/reset.css" rel="stylesheet"><link href="/static/css/ihome/main.css" rel="stylesheet"><link href="/static/css/ihome/register.css" rel="stylesheet">
</head>
<body><div class="container"><div class="logo-bar"><a href="/"><img src="/static/images/logo@128x59.png"></a></div><form class="form-register"><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-mobile fa-2x fa-fw"></i></div><input type="number" class="form-control" name="mobile" id="mobile" placeholder="手机号" required></div></div><div class="error-msg" id="mobile-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-image fa-lg fa-fw"></i></div><input type="text" class="form-control" name="imagecode" id="imagecode" placeholder="图片验证码" required><div class="input-group-addon image-code" onclick="generateImageCode();"><img src=""></div></div></div><div class="error-msg" id="image-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-envelope-o fa-lg fa-fw"></i></div><input type="text" class="form-control" name="phonecode" id="phonecode" placeholder="短信验证码" required><div class="phonecode input-group-addon"><a class="phonecode-a" href="javascript:;" onclick="sendSMSCode();">获取验证码</a></div></div></div><div class="error-msg" id="phone-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div><input type="password" class="form-control" name="password" id="password" placeholder="密码" required></div></div><div class="error-msg" id="password-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div><input type="password" class="form-control" name="password2" id="password2" placeholder="确认密码" required></div></div><div class="error-msg" id="password2-err"><i class="fa fa-exclamation-circle"></i><span></span></div><button type="submit" class="btn btn-lg btn-theme btn-block">立即注册</button><p class="login-a">已有账号,<a href="/login.html">立即登陆</a></p></form></div><script src="/static/js/jquery.min.js"></script><script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script><script src="/static/js/ihome/register.js"></script>
</body>
</html>

3.前端js代码

在这里插入图片描述具体代码如下:

function sendSMSCode() {// 点击发送短信验证码后被执行的函数$(".phonecode-a").removeAttr("onclick");var mobile = $("#mobile").val();if (!mobile) {$("#mobile-err span").html("请填写正确的手机号!");$("#mobile-err").show();$(".phonecode-a").attr("onclick", "sendSMSCode();");return;} var imageCode = $("#imagecode").val();if (!imageCode) {$("#image-code-err span").html("请填写验证码!");$("#image-code-err").show();$(".phonecode-a").attr("onclick", "sendSMSCode();");return;}// 构造向后端请求的参数var req_data = {image_code: imageCode, // 图片验证码的值image_code_id: imageCodeId // 图片验证码的编号,(全局变量)};// 向后端发送请求$.get("/api/v1.0/sms_codes/"+ mobile, req_data, function (resp) {// resp是后端返回的响应值,因为后端返回的是json字符串,// 所以ajax帮助我们把这个json字符串转换为js对象,resp就是转换后对象if (resp.errno == "0") {var num = 60;// 表示发送成功var timer = setInterval(function () {if (num >= 1) {// 修改倒计时文本$(".phonecode-a").html(num + "秒");num -= 1;} else {$(".phonecode-a").html("获取验证码");$(".phonecode-a").attr("onclick", "sendSMSCode();");clearInterval(timer);}}, 1000, 60)} else {alert(resp.errmsg);$(".phonecode-a").attr("onclick", "sendSMSCode();");}});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452682.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins系列之五——通过Publish over SSH插件实现远程部署

Jenkins通过Publish over SSH插件实现远程部署 步凑一、配置ssh免秘钥登录 部署详情地址&#xff1a;http://www.cnblogs.com/Dev0ps/p/8259099.html 步凑二、安装Publish over SSH插件 插…

php柱状图实现年龄分布,考官雅思写作小作文满分范文 柱状图:年龄分布

考官雅思写作小作文满分范文 柱状图:年龄分布2017年06月12日14:48 来源&#xff1a;小站教育作者&#xff1a;小站雅思编辑参与(40)阅读(63981)摘要&#xff1a;为大家分享前考官simon演示的9分雅思小作文。考官亲笔&#xff0c;用最正统的4段式写作&#xff0c;本文主题-柱状图…

Flask项目--注册

0.效果展示 1.后端代码 # coding:utf-8from . import api from flask import request, jsonify, current_app, session from ihome.utils.response_code import RET from ihome import redis_store, db, constants from ihome.models import User from sqlalchemy.exc import I…

图片处理

//图片处理public function img(){//读取图片$imageImage::open(./img/02.jpg);//dump($image);//获取图片的信息// 返回图片的宽度$width $image->width();// 返回图片的高度$height $image->height();// 返回图片的类型$type $image->type();// 返回图片的mime类…

数据流图 系统流程图 程序流程图 系统结构图联系与区别

1.数据流图&#xff08;Data Flow Diagram&#xff09;&#xff0c;简称DFD&#xff0c;它从数据传递和加工角度&#xff0c;以图形方式来表达系统的逻辑功能、数据在系统内部的逻辑流向和逻辑变换过程&#xff0c;是结构化系统分析方法的主要表达工具及用于表示软件模型的一种…

迄今为止最快的 JSON 序列化工具 Jil

2019独角兽企业重金招聘Python工程师标准>>> 迄今为止最快的 JSON 序列化工具 Jil https://github.com/kevin-montrose/Jil 转载于:https://my.oschina.net/xainghu/blog/1621365

mysql数据库访问编程,mysql 连接数据库

1、首先启动mysql 并链接数据 小意思吧&#xff01;都会了是吧mysql -uroot -p //连接数据net start mysql // 启动mysql2、查询当前 服务器里有哪些数据show databases;3、创建数据库create database jddb -------数据库名字(jddb)4、 使用数据库use jddb;5、查询当前数据库下…

Flsak爱家租房--个人信息

0.页面展示效果 1.设置用户头像–后端代码 # coding:utf-8from . import api from ihome.utils.commons import login_required from flask import g, current_app, jsonify, request, session from ihome.utils.response_code import RET from ihome.utils.image_storage impo…

C++ string::size_type

从逻辑上讲&#xff0c;size()成员函数应该似乎返回整型数值&#xff0c;但事实上&#xff0c;size操作返回是string::size_type类型的值。string类类型和其他许多库类型都定义了一些配套类型(companion type)。通过这些配套类型&#xff0c;库函数的使用就与机器无关(machine-…

Flsak爱家租房--实名认证

0.页面展示效果 1.设置用户实名认证信息–后端代码 api.route("/users/auth", methods["POST"]) login_required def set_user_auth():"""保存实名认证信息"""user_id g.user_id# 获取参数req_data request.get_json()if …

php把语音转成帧,[转载]用TCP/IP实现自己简单的应用程序协议:成帧器部分

在前面《字节和字符,对信息进行编码》&#xff0c;《Socket>流&#xff0c;TCP连接,TCP可靠性概述》一系列的随笔中我们已经表述了相应的理论知识&#xff0c;现在可以动手实现一个自己的应用程序协议。将 数据转换成在线路上传输的字节序列只完成了一半的工作&#xff0c;在…

实体联系图简介

通常&#xff0c;使用实体联系图(entity relationship diagram)来建立数据模型。可以把实体联系图简称为ER图&#xff0c;相应地可把用ER图描绘的数据模型称为ER模型。 ER图中包含了实体(即数据对象)、关系和属性3种基本成分&#xff0c;通常用矩形框代表实体&#xff0c;用连…

Flask爱家租房--城区信息

0.效果展示 城市列表使用缓存的过程 1.后端代码 # coding:utf-8from . import api from flask import g, current_app, jsonify, request, session from ihome.utils.response_code import RET from ihome.models import Area, House, Facility, HouseImage, User, Order from …

数值计算算法-多项式插值算法的实现与分析

数值计算是指在数值分析领域中的算法。数值分析是专门研究和数字以及近似值相关的数据问题&#xff0c;数值计算在数值分析的研究中发挥了特别重要的作用。 多项式插值是计算函数近似值的一种方法。其中函数值仅在几个点上已知。 该算法的基础是建立级数小于等于n的一个插值多项…

Linux中断 - tasklet

一、前言 对于中断处理而言&#xff0c;linux将其分成了两个部分&#xff0c;一个叫做中断handler&#xff08;top half&#xff09;&#xff0c;属于不那么紧急需要处理的事情被推迟执行&#xff0c;我们称之deferable task&#xff0c;或者叫做bottom half&#xff0c;。具体…

数字电视制播设备间的文件交换格式

在现今的数字电视演播室中&#xff0c;设备之间基本上采用信号流连接方式&#xff0c;如SDI、STDI、模拟YUV、VBS等信号流。在非线性编辑系统和播出系统与服务器之间的连接&#xff0c;还有基于MPEG-2传输流等的信号连接方式。基于信号流连接方式的主要特点是&#xff0c;传送时…

oracle 位移运算符,Oracle“(+)”运算符

在Oracle中&#xff0c;()表示JOIN中的“可选”表。 所以在你的查询中&#xff0c;select a.id, b.id, a.col_2, b.col_2, ... from a,b where a.idb.id()这是一个左外加B表与一个表。 就像现代的左连接查询一样。 (它将返回a表的所有数据&#xff0c;而不会丢失在另一边的数据…

什么是实体-联系图(ER图)

实体-联系图&#xff08;ER图&#xff09;数据模型中包含3种相互关联的信息&#xff1a;数据对象、数据对象的属性及数据对象彼此间相互连接的关系。 1.数据对象 数据对象是对软件必须理解的复合信息的抽象。所谓符合信息是指具有一系列不同性质或属性的事物&#xff0c;仅有单…

记录的习惯

记录的习惯 书籍是人类进步的阶梯&#xff0c;承载了人类文明进步的历程。大多数人都写过日记&#xff0c;但不知道有多少人重视过日记。常常我们会用相机记录一些生活中的场景&#xff0c;然后收藏起来&#xff0c;等到若干年后再拿出来看&#xff0c;总能感觉到很温馨很美好。…