<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">
<script src="/static/jquery-3.1.1.js"></script>
<title>登录页面</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>登录</h1>
<form>
{% csrf_token %}
<div class="form-group">
<label for="">用户名</label>
<input type="text" id="id_name" class="form-control">
</div>
<div class="form-group">
<label for="">密码</label>
<input type="password" id="id_pwd" class="form-control">
</div>
<div class="form-group">
<label for="">验证码</label>
<div class="row">
<div class="col-lg-6">
<input type="text" id="code" class="form-control">
</div>
<div class="col-lg-6">
<img height="35" width="250" src="/get_code/" alt="">
</div>
</div>
</div>
<input type="button" id="submit" value="登录" class="btn btn-danger">
</form>
</div>
</div>
</div>
<script>
$("#submit").click(function () {
$.ajax({
url: '/login/',
type: 'post',
data: {
'name': $("#id_name").val(),
'pwd': $("#id_pwd").val(),
'code': $("#code").val(),
'csrfmiddlewaretoken': '{{csrf_token}}'
},
success: function (data) {
console.log(data)
}
})
})
</script>
</body>
</html>
def get_random_color():
'''生成随机颜色的图片'''
import random
return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
def get_code(request):
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO # 生成的验证码存放于内存
import random
img = Image.new("RGB", (270, 40), color=get_random_color())
# (270, 40) 指定生成的图片的长度,高度
draw = ImageDraw.Draw(img)
# kumo.ttf 文字样式,网上下载ttf
kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=32) # 引入字体
valid_code_str = ""
for i in range(5):
random_num = str(random.randint(0, 9)) # 随机一个数字
random_low_alpha = chr(random.randint(95, 122)) # 随机一个小写字母
random_upper_alpha = chr(random.randint(65, 90)) # 随机一个大写字母
random_char = random.choice([random_num, random_low_alpha, random_upper_alpha]) # 从上面的3个选择一个出来
draw.text((i * 50 + 20, 5), random_char, get_random_color(), font=kumo_font) # (i * 50 + 20, 5) 写字母的时候便宜
# 保存验证码字符串
valid_code_str += random_char
print("valid_code_str", valid_code_str)
f = BytesIO() # 生成一个对象,保存于内存
img.save(f, "png") # 验证码图片保存于内存
data = f.getvalue()
request.session['code']=valid_code_str # 验证码保存于session中
return HttpResponse(data)
from django.contrib import auth
def login(request):
if request.is_ajax():
name=request.POST.get('name')
pwd=request.POST.get('pwd')
code=request.POST.get('code')
if code.upper()== request.session['code'].upper():
user=auth.authenticate(request,username=name,password=pwd)
if user:
return HttpResponse('ok')
else:
return HttpResponse('用户名或密码错误')
else:
return HttpResponse('验证码错误')
return render(request,'login.html')