本文使用聚合数据的短信接口,需要先获取到申请接口的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编码后再传递,详细说明>
"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())
前端登录的表单
{#手机登陆的表单#}
"post">
"text" name="user_tel" placeholder="请输入手机号">
"text" name="validcode" placeholder="请输入短信验证码">
class="am-g">
"yanzhengma" type="button" value="获取验证码"/>
"nowYanzhengma" color: rgba(128, 0, 0, 1)">"display: none;" type="button" value=""/>
class="submit " type="button" id="btn_login" value="登录"/>
{#手机登陆的表单#}
前端登录的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。