1：定义生成验证码的函数
2：配置url路径
3：调用
4：看不清换一张的实现
5：验证输入是否正确
1：定义生成验证码的函数
"""
# code is far away from bugs with the god animal protecting
I love animals. They taste delicious.
┏┓ ┏┓
┏┛┻━━━┛┻┓
┃ ☃ ┃
┃ ┳┛ ┗┳ ┃
┃ ┻ ┃
┗━┓ ┏━┛
┃ ┗━━━┓
┃ 神兽保佑 ┣┓
┃ 永无BUG！ ┏┛
┗┓┓┏━┳┓┏┛
┃┫┫ ┃┫┫
┗┻┛ ┗┻┛
"""
from django.http import HttpResponse
from PIL import Image,ImageDraw,ImageFont
import random
import io
# create your views here
def verify(request):
# 1 定义变量， 用于画面的背景色，宽，高
bg_color = (random.randrange(20, 100), random.randrange(20,1000),255)
# 随机生成颜色
width = 100
height = 25
# 2 创建画面对象
im = Image.new("RGB", (width, height), bg_color)
# 3创建画笔对象
draw = ImageDraw.Draw(im)
# 4调用画笔的point（）函数绘制噪点
for i in range(100):
xy = (random.randrange(0,width), random.randrange(0,height))
fill = (random.randrange(0,255),255,random.randrange(0,255))
draw.point(xy,fill=fill)
# 5定义验证码的备选值
str1 = "ABCD1234EFGHJK9087LOIUYFCVVB2346"
# 6随机选取4个值作为验证码
rand_str = ""
for i in range(4):
rand_str = rand_str + str1[random.randrange(0, len(str1)-1)]
print(rand_str)
# 7构造字体对象 这个字体要是系统中有的，否则会报错
font = ImageFont.truetype('Arvo-Regular.ttf', 23)
# 构造字体颜色
fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
# 8绘制四个字
draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
# 9释放画笔
del draw
# 10存入session， 用于做进一步验证
request.session['verifycode'] = rand_str
print(request.session.get('verifycode'))
# 11将图片保存在内存中，文件类型为png
f = io.BytesIO()
im.save(f, 'png')
# 12将内存中的图片数据返回给客户端，MIME类型为图片png
return HttpResponse(f.getvalue(), 'image/png')
2：配置url路径
url(r"^img/$", viewsUtil.verify), 显示验证码的路径
url(r'^verifycodeValid/$', views.verifycodeValid, name="verifycodeValid"),# 验证验证码是否正确的路径
3：调用
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Verification</label>
<div class="col-sm-10 aa">
<input type="text" class="form-control" name="vc" id="inputPassword3" >
<img style="margin-top: 10px" id = "verifycode" src="/pianke/img/?1" alt="CheckCode">
<span id='verifycodeChange' style=" font-family: 'Microsoft YaHei UI'; cursor: pointer; vertical-align: bottom">看不清，换一个</span>
</div>
</div>
4：看不清换一张的实现
上面的表单路径后面带有参数为了进行验证码刷新
# js代码
<script type="text/javascript" src="/static/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#verifycodeChange').css('cursor','pointer').click(function() {
$('#verifycode').attr('src',$('#verifycode').attr('src')+1)
});
});
</script>
说明：
$('#verifycode').attr('src',$('#verifycode').attr('src')+1)
点击后，点击后就变成了"/verifycode/?1 1",继续点就会变成"/verifycode/?1 11"…
?1 是没有实际意义的,它唯一的作用是向浏览器表明: 图片链接发生了变化,图片需要刷新.
5：验证输入是否正确
#验证函数
def verifycodeValid(request):
vc = request.POST["vc"]
if vc.upper() == request.session["verifycode"]:
return redirect("/pianke/login_handle/")
else:
return redirect("/pianke/login/")
好了，这样就大功告成了
上面这个验证验证码的代码是错误的方式，因为如果重定向了就没办法从前台表单带回数据了
改正后的版本:用handle函数调用验证码验证函数
def login_handle(request):
vc = request.POST["vc"]
if verifycodeValid(request, vc):
username = request.POST["username"]
password = request.POST["password"]
try:
u = User.objects.get(username = username) # 第一个username时model中 的 第二个时上面获取到的 这句话是查询username=上面username的对象
if u.password == password: # 匹配上面的password是否与这个对象的password相等
request.session["username"]=username # 如果相等的话就存到数据库里
except Exception as e: # 因为可能username 不在数据库里查询不到所以可能会抛出异常
print(e)
finally:
# return render(request, "pianke/index.html")
return redirect("/pianke/logined_index/")
else:
return redirect("/pianke/login/")
#
# def verify_page(request):
# verify(request)
# template = loader.get_template("pianke/login.html")
# return HttpResponse(template.render())
def verifycodeValid(request,vc):
if vc.upper() == request.session["verifycode"]:
return True
else:
return False
网友评论