本文使用聚合数据的短信接口,需要先获取到申请接口的appkey和模板id
项目目录下创建ubtils文件夹,定义返回随机验证码和调取短信接口的函数
function.py文件
import random import re # 随机数 def range_num(num): # 定义一个种子,从这里面随机拿出一个值,可以是字母 seeds = "1234567890" # 定义一个空列表,每次循环,将拿到的值,加入列表 random_num = [] # choice函数:每次从seeds拿一个值,加入列表 for i in range(num): random_num.append(random.choice(seeds)) # 将列表里的值,变成四位字符串 return "" . join(random_num)#5454
sendMsg.py文件
import json, urllib from urllib.parse import urlencode # 发送短信 def request2(mobile,num, m="GET"): appkey = '6bba3e7dffa71b79483002e1d92f4d00' url = "http://v.juhe.cn/sms/send" params = { "mobile": mobile, # 接收短信的手机号码 "tpl_id": "167106", # 短信模板ID,请参考个人中心短信模板设置 "tpl_value": "#code#=%s"%num, # 变量名和变量值对。如果你的变量名或者变量值中带有#&=中的任意一个特殊符号,请先分别进行urlencode编码后再传递,<a href="http://www.juhe.cn/news/index/id/50" target="_blank">详细说明></a> "key": appkey, # 应用APPKEY(应用详细页查询) "dtype": "", # 返回数据的格式,xml或json,默认json } params = urlencode(params)#mobile=15038062130&tpl_id=166467&tpl_value=%23code%23%3d431515&key=dabf6ecaebfa9554395dad7dcc6be7c8 if m == "GET": f = urllib.request.urlopen("%s?%s" % (url, params)) else: f = urllib.request.urlopen(url, params) content = f.read()#{"reason":"操作成功","result":{"sid":"201906200911371223162juhe6hy","fee":1,"count":1},"error_code":0} res = json.loads(content)#json转字典 if res: error_code = res["error_code"] if error_code == 0: # 成功请求 return 'ok' # print(res["result"]) else: return "%s:%s" % (res["error_code"], res["reason"]) # print("%s:%s" % (res["error_code"], res["reason"])) else: return "request api error"
路由
# 手机验证码登录 path('loginTel/', login.loginTel,name='loginTel'),
方法
from blog.utils import sendMsg from blog.utils import function # 引入自定义的验证码 # 手机验证登陆 def loginTel(request): res = {'status': None, 'info': None} # 点击发送短信执行以下程序 if request.POST.get('sendSms') == '1': tel = request.POST.get('user_tel') print(tel) range_num = function.range_num(4); # 5454 request.session['validcode'] = range_num result = sendMsg.request2(tel, range_num, "GET") # result='ok' if result == 'ok': res['status'] = 1 # res['info']='发送成功%s'%range_num res['info'] = '发送成功' print(res) return HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax else: res['status'] = 0 res['info'] = '发送失败' return HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax # 点击登录按钮执行以下程序: if request.POST.get('dosubmit') == '1': validcode_form = request.POST.get('validcode') validcode_session = request.session.get('validcode') # 获取session if validcode_form: if validcode_form != validcode_session: res['status'] = 0 res['info'] = '短信验证码不正确' return HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax else: res['status'] = 0 res['info'] = '短信验证码不存在' return HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax # 写判断手机号是否在会员表中 member_obj = Member.objects.filter(member_tel=request.POST.get('user_tel')).first() if member_obj: request.session['member_id'] = member_obj.member_id request.session['member_name'] = member_obj.member_name res['status'] = 1 res['info'] = '登录成功' return HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax return render(request, 'blog/loginTel.html', locals())
前端登录的表单
{#手机登陆的表单#} <form method="post"> <input type="text" name="user_tel" placeholder="请输入手机号"> <input type="text" name="validcode" placeholder="请输入短信验证码"> <div class="am-g"> <input id="yanzhengma" type="button" value="获取验证码"/> <input id="nowYanzhengma" style="display: none;" type="button" value=""/> <input class="submit " type="button" id="btn_login" value="登录"/> </div> </form> {#手机登陆的表单#}
前端登录的jquery
{#手机号登陆的jquery#} //校验用户名 $("#btn_login").click(function () { var user_tel = $.trim($("input[name='user_tel']").val()); var validcode = $.trim($("input[name='validcode']").val()); $.post("/blog/loginTel/", { "user_tel": user_tel, "validcode": validcode, "dosubmit": 1, "csrfmiddlewaretoken": "{{ csrf_token }}" }, function (data) { if (data['status'] == 1) { layer.msg("登录成功!即将跳转至首页~"); location.href = "{% url 'index' %}"; } else { layer.msg(data['info']); } return false; }, "json"); }); //点击获取验证码按钮 $("#yanzhengma").click(function () { getSmsCode(); }); //获取短信验证码 function getSmsCode() { var user_tel = $.trim($("input[name='user_tel']").val());//得到页面里的手机号码 var reguser = /^[1][3-8]\d{9}$/; if (user_tel == "") { layer.msg("请填写手机号码"); return false; } if (!reguser.test(user_tel)) { layer.msg("手机号码格式不正确"); return false; } {#$("#yanzhengma").off('click');#} $.post("/blog/loginTel/", { "user_tel": user_tel, 'sendSms': 1, "csrfmiddlewaretoken": "{{ csrf_token }}" }, function (data) { if (data['status'] == 1) { timeout(); layer.msg(data['info']); } else { layer.msg(data['content']); } }, 'json'); } var sec = 60; var interval = null; //开启定时器 function timeout() { interval = setInterval(run, 1000); } function run() { if (sec >= 1) { sec--; $("#yanzhengma").hide(); $("#nowYanzhengma").show(); $("#nowYanzhengma").val("倒计时(" + sec + ")s"); } else { $("#yanzhengma").off('click'); $('#yanzhengma').on("click", function (event) { getSmsCode(); }); $("#yanzhengma").show(); $("#nowYanzhengma").hide(); clearInterval(interval);//关闭定时器 sec = 60; } } {#手机号登陆的jquery结束#}
前端效果
done。