from django.shortcuts import *
from PIL import Image,ImageDraw,ImageFont
# 内存管理，把图片放在内存里
from io import BytesIO
import random# Create your views here.def login(request):return render(request,'login.html')def get_random_color():return (random.randint(0,255),random.randint(0,255),random.randint(0,255))def get_code(request):# 方式一# with open('./static/image/miao1.png','rb')as f :#     data = f.read()# 方式二# pip3 install pillow# from PIL import Image,ImageFont,ImageDraw# Image.new('颜色类型','长宽','颜色')img = Image.new('RGB',(125,35),color=get_random_color())# 指定字体文件font = ImageFont.truetype('./static/font/kumo.ttf',30)# ImageDraw.Draw(img)draw = ImageDraw.Draw(img)valid_code = ''# 验证码显示方式一：# draw.text((X轴,Y轴),'显示内容','颜色')# draw.text((5,5),'python',get_random_color(),font=font)# 验证码显示方式二：for i in range(4):random_num = str(random.randint(0,9))random_upper = chr(random.randint(65,90))random_lower = chr(random.randint(97,122))random_chr = random.choice([random_num,random_lower,random_upper])draw.text((i*30+10,5),random_chr,get_random_color(),font=font)valid_code += random_chrprint(valid_code)# 存到session里request.session['valid_code'] = valid_code# 生成一个内存管理对象f = BytesIO()# 将图片保存至f对象内，指定格式为pngimg.save(f,'png')# 从内存中取出data = f.getvalue()return HttpResponse(data)

{% extends 'base.html' %}
{% block page-title %}<title>登录</title>
{% endblock %}
{% block page-css %}<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
{% endblock %}
{% block page-main %}<div class="row"><div class="col-md-4" style="margin-top: 50px;"><img src="/static/image/1.png" alt=""></div><div class="col-md-6  col-md-offset-2" style="margin-top: 80px"><h2 style="padding-left: 60px;text-align: center;margin-bottom: 50px">用户登录</h2><form class="form-horizontal" action="#" method="post">{% csrf_token %}<div class="form-group"><label for="id_username" class="col-sm-2 control-label">账号</label><div class="col-sm-10"><input type="text" class="form-control" id="id_username" placeholder="请输入用户名、邮箱、手机号"name="username"></div></div><div class="form-group"><label for="id_password" class="col-sm-2 control-label">密码</label><div class="col-sm-10"><input type="password" class="form-control" id="id_password" placeholder="请输入密码"name="userpwd"></div></div><div class="form-group"><lable for="valid_code" class="col-sm-2 control-label">验证码</lable><div class="col-sm-7"><input type="text" class="form-control" id="valid_code"></div><div class="col-sm-3" style="padding: 0 10px"><img style="width: 125px" src="/get_code/" id="cod_img"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-success" style="width: 457px" id="submit_btn">登录</button></div><div class="col-sm-offset-2 col-sm-10" style="margin-top: 10px;color: red">{{ error }}</div></div></form></div></div>
{% endblock %}
{% block page-js %}<script src="/static/jquery-3.3.1.js"></script><script src="/static/bootstrap/js/bootstrap.min.js"></script><script>$('#cod_img').click(function () {$('#cod_img')[0].src = $('#cod_img')[0].src + '?';})</script>
{% endblock %}