Django - 登录（含随机生成图片验证码）、注册示例
一、登录 - 随机生成图片验证码
1、随机生成验证码
Python随机生成图片验证码，需要使用PIL模块，安装方式如下：
pip3 install pillow
1）创建图片
from PIL import Image
img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
with open('code.png', 'wb') as f: # 保存在本地（即写入硬盘）
img.save(f, format='png')
参数说明：
mode='RGB' 表示以RGB来表示颜色
size=(120,30) 表示坐标
color=(255, 255, 255) 表示白色
此时，打开启动文件所在目录，里面就有了一个宽120，高30的白色code.png图片。
2）创建画笔（用于在图片上画任意内容）
from PIL import Image, ImageDraw
img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255)) draw = ImageDraw.Draw(img, mode='RGB') # 创建画笔对象draw img.show() # 在图片查看器中打开，这句会调用系统默认的图片管理工具
3）画点 - point()方法
from PIL import Image, ImageDraw
img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255)) draw = ImageDraw.Draw(img, mode='RGB') # point()第一个参数：表示坐标， 第二个参数：表示颜色 draw.point([100, 20], fill='red') draw.point([60, 10], fill=(0, 255, 0)) # 保存在本地 with open('code.png', 'wb') as f: img.save(f, format='png')
效果如下图：
4）画线 - line()方法
from PIL import Image, ImageDraw
img = Image.new(mode='RGB', size=(540, 150), color=(255, 255, 255)) draw = ImageDraw.Draw(img, mode='RGB') # line()第一个参数：表示起始坐标和结束坐标，第二个参数：表示颜色 draw.line((50, 50, 50, 150), fill='red') # 上面一句表示画一条坐标（x=100，y=100）到（x=100，y=300）的直线 draw.line((50, 100, 150, 50), fill=(120, 120, 120)) draw.line((50, 50, 150, 50), fill=(0, 255, 255)) with open('code.png', 'wb') as f: img.save(f, format='png')
效果如下：
5）画圆 - arc()方法
from PIL import Image, ImageDraw
img = Image.new(mode='RGB', size=(500, 140), color=(255, 255, 255)) draw = ImageDraw.Draw(img, mode='RGB') # 第一个参数：表示起始坐标和结束坐标（圆要画在其中间,两点确定的矩形的内切圆） # 第二个参数：表示开始角度 # 第三个参数：表示结束角度 # 第四个参数：表示颜色 draw.arc((200, 20, 300, 120), 0, 360, fill='red') with open('code.png', 'wb') as f: img.save(f, format='png')
效果如下：
6）写文本 - text()方法
from PIL import Image, ImageDraw
img = Image.new(mode='RGB', size=(80, 20), color=(255, 255, 255)) draw = ImageDraw.Draw(img, mode='RGB') # 第一个参数：表示起始坐标，第二个参数：表示写入的文本，第三个参数：表示颜色 draw.text([0, 0], 'python', 'red') with open('code.png', 'wb') as f: img.save(f, format='png')
效果如下：
7）特殊字体文字（下载好引用的字体文件）
from PIL import Image, ImageDraw, ImageFont
img = Image.new(mode='RGB', size=(120, 40), color=(255, 255, 255)) draw = ImageDraw.Draw(img, mode='RGB') font = ImageFont.truetype('kumo.ttf', 28) # 第一个参数：表示字体文件路径 # 第二个参数：表示字体大小 draw.text((0, 0), 'python', 'red', font=font) # 第一个参数：表示起始坐标 # 第二个参数：表示写入内容 # 第三个参数：表示颜色 # 第四个参数：表示字体 with open('code.png', 'wb') as f: img.save(f, format='png')
效果如下：
8）随机生成图片验证码
import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter
def check_code(width=120, height=30, char_length=5, font_file='../static/font/kumo.ttf', font_size=28):
code = []
img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
def rndChar():
"""
生成随机字符（包括大小写字母和数字）
:return:
"""
ranNum = str(random.randint(0, 9))
ranLower = chr(random.randint(65, 90))
ranUpper = chr(random.randint(97, 120))
return random.choice([ranNum, ranLower, ranUpper])
def rndColor():
"""
生成随机颜色
:return:
"""
return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))
# 写文字
font = ImageFont.truetype(font_file, font_size)
for i in range(char_length):
char = rndChar()
code.append(char)
h = ( height - font_size ) / 2
draw.text([i * width / char_length, h], char, font=font, fill=rndColor())
# 写干扰点
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
# 写干扰圆圈
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
x = random.randint(0, width)
y = random.randint(0, height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())
# 画干扰线
for i in range(5):
x1 = random.randint(0, width)
y1 = random.randint(0, height)
x2 = random.randint(0, width)
y2 = random.randint(0, height)
draw.line((x1, y1, x2, y2), fill=rndColor())
# 对图像加滤波 - 深度边缘增强滤波
img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
return img, ''.join(code)
if __name__ == '__main__':
# 1. 直接打开，即用图片查看器查看
# img,code = check_code()
# img.show()
# 2. 写入文件
# img,code = check_code()
# with open('code.png','wb') as f: # f是写入磁盘的文件句柄
# img.save(f, format='png')
# data = f.read() # data是读取图片的字节
# 3. 写入内存(Python3)
# img,code = check_code()
# from io import BytesIO # 内存管理的模块
# stream = BytesIO() # stream是写入内存的文件句柄
# img.save(stream, 'png')
# data = stream.getvalue()
# 4. 写入内存（Python2）
# img,code = check_code()
# import StringIO
# stream = StringIO.StringIO() # stream是写入内存的文件句柄
# img.save(stream, 'png')
# data = stream.getvalue()
效果如下：
2、基于ajax实现登录的示例代码
1）urls.py中关于登录代码：
path('login/', views.login,), # 获取登录页面url
path('get_identifyCode/', views.get_identifyCode,), # 获取验证码对应url
2）login.html核心代码：
<body>
<div id="particles-js">
<div class="login">
<p class="login-top">登录</p>
{% csrf_token %}
<div class="login-center clearfix">
<label class="" for="user">用户名</label>
<input type="text" id="user" placeholder="用户名" />
</div>
<div class="login-center clearfix">
<label class="iconfont labelFS" for="pwd">密码</label>
<input type="password" id="pwd" placeholder="密码" />
</div>
<div class="login-center clearfix">
<label class="iconfont labelFS" for="validcode"></label>
<input type="text" id="validcode" placeholder="验证码" />
<img src="/get_identifyCode/" alt="验证码" title="换一张" class="validImg" id="img" width="88" height="30" >
</div>
<a href="javascript:void(0);" class="login_btn">登录</a>
<p class="error"></p>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
// ajax 登录
$(".login_btn").click(function () {
$.ajax({
url:"",
type:"post",
// data发送urlencoded格式就行，数据没那么深，没必要发json格式
data:{
user:$("#user").val(),
pwd:$("#pwd").val(),
validcode:$("#validcode").val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
success:function (response) {
console.log(response);
if(response.user){
// 登录成功
location.href="/index/"
}
else{
// 登录失败
$(".error").html(response.err_msg)
}
}
})
});
// 验证码刷新：img标签有一个天然的发请求的模式，即src的路径后边拼接一个问号就会发一次请求，利用这一原理可以实现验证码刷新
$("#img").click(function () {
this.src += "?"
});
</script>
</body>
3）views.py中获取随机验证码的视图函数代码（验证码保存利用session）
def get_identifyCode(request):
img,code = check_code() # 利用上面的模块得到img对象和验证码code
f = BytesIO() # 得到写入内存的文件句柄
img.save(f, "png") # 写入内存
data = f.getvalue() # 从内存中读出
# 将验证码存在各自的session中，这样做的好处是每个人都有自己的验证码，不会相互混淆（一定不能设为全局变量）
request.session['keep_str'] = code
return HttpResponse(data)
4）views.py中login视图函数代码
from django.contrib import auth
def login(request):
# if request.method == "POST":
if request.is_ajax(): # 判断是否ajax请求
user = request.POST.get("user")
pwd = request.POST.get("pwd")
validcode = request.POST.get("validcode")
# Ajax请求通常返回一个自己构建的字典
response={"user": None, "err_msg": ""}
# request.session.get("keep_str")取出session中验证码与用户输入作判断
if validcode.upper() == request.session.get("keep_str").upper():
user_obj = auth.authenticate(username=user, password=pwd)
print("user_obj", user_obj, bool(user_obj))
if user_obj:
response["user"] = user
auth.login(request, user_obj) # 保存用户状态
else:
response['err_msg'] = "用户名或者密码错误！"
else:
response["err_msg"] = "验证码错误！"
return JsonResponse(response)
else:
return render(request, "login.html")
二、基于ajax和forms组件实现注册示例
1）model.py
from django.contrib.auth.models import AbstractUser
class UserInfo(AbstractUser): # 将原生auth_user表扩展一个tel手机号字段
tel=models.CharField(max_length=32)
2）forms.py（其实代码放在哪里没关系，最重要的是程序能找到，为了解耦，我们可以定义一个form.py）
from django import forms
# exceptions中存着django的所有错误，错误在核心组件中
from django.core.exceptions import ValidationError
from django.forms import widgets
from app01.models import UserInfo
class UserForm(forms.Form): # UserForm中定义需要校验的字段
username=forms.CharField(min_length=5,
label="用户名")
password=forms.CharField(min_length=5,
widget=widgets.PasswordInput(),
label="密码")
r_pwd=forms.CharField(min_length=5,
widget=widgets.PasswordInput(),
label="确认密码")
email=forms.EmailField(min_length=5,
label="邮箱")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for field in self.fields.values():
field.widget.attrs.update({'class': 'form-control'}) # 统一加class
def clean_user(self):
val=self.cleaned_data.get("username")
user=UserInfo.objects.filter(username=val).first()
if user:
raise ValidationError("用户已存在！")
else:
return val
def clean_pwd(self):
val=self.cleaned_data.get("password")
if val.isdigit():
raise ValidationError("密码不能是纯数字！")
else:
return val
def clean_email(self):
val = self.cleaned_data.get("email")
if re.search("w+@163.com$", val):
return val
else:
raise ValidationError("邮箱必须是163邮箱！")
def clean(self):
pwd=self.cleaned_data.get("password")
r_pwd=self.cleaned_data.get("r_pwd")
if pwd and r_pwd and r_pwd!=pwd:
self.add_error("r_pwd", ValidationError("两次密码不一致！"))
else:
return self.cleaned_data
3）reg.html核心代码：
<body>
<h3>注册页面</h3>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="" method="">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label for="">{{ field.label }}</label>
{{ field }}
<span class="error"></span>
</div>
{% endfor %}
<input type="button" class="btn btn-primary reg_btn" value="注册">
</form>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$(".reg_btn").click(function () {
$.ajax({
url:"",
type:"post",
data:{
username:$("#id_username").val(),
password:$("#id_password").val(),
r_pwd:$("#id_r_pwd").val(),
email:$("#id_email").val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
success:function (res) {
if (res.user){
// 注册成功
location.href="/login/"
}
else{
// 清除错误
$(".error").html("");
// 展示新的错误
$.each(res.err_msg,function (i,j) {
$("#id_"+i).next().html(j[0]);
})
}
}
})
})
</script>
</body>
4）views.py中注册的视图函数reg
def reg(request):
if request.method == "POST":
form = UserInfo(request.POST)
res = {"user": None, "err_msg": ""}
if form.is_valid():
res["user"] = form.cleaned_data.get("username")
del form.cleaned_data["r_pwd"] # 因表中无此字段，只需校验，不插入
UserInfo.objects.create_user(**form.cleaned_data)
else:
res["err_msg"] =form.errors
return JsonResponse(res)
else: # get请求
form = UserInfoModelForm()
return render(request,"reg.html",{"form": form})
三、补充知识点
1、对原生auth_user表扩展字段（使用AbstractUser）
我们之前学习用户认证组件时，用的是django提供的auth_user表，即通过引入User对象（from django.contrib.auth.models import User）去操作它，我们又发现源码中User类继承了AbstractUser类，所以AbstractUser和User其实就是一张表，所以当我们想要有用户认证功能，又想要一些auth_user表中没有的字段时，可以按照如下这样做：
在models.py中，引入AbstractUser，并且自己定义一个用户类（表），这时类中只定义django的auth_user表中没有而你又想使用的字段即可，并且让你定义的类继承AbstractUser，如下：
from django.contrib.auth.models import AbstractUser
class UserInfo(AbstractUser): tel=models.CharField(max_length=32) # 扩展了一个手机号字段
注意：写完以上代码就直接去迁移数据库会报错“HINT: Add or change a related_name argument to the definition for ......”，我们需要在settings.py中加上下面这句话，来告诉Django我们要使用自己定义的表作为用户认证表（因此登录的使用方法不变，认证时django会自己去找这张表）：
AUTH_USER_MODEL="app01.UserInfo"
这时再去进行数据库迁移，我们发现，数据库中没有auth_user表了，而我们自己定义的表中除了有自己定义的那些字段外，还有之前auth_user表中的所有字段，这就代表已经达到了我们的目的。
补充：通过命令创建超级用户的方式：
Tools -- > Run manage.py Task # 运行起来manage.py，再输入如下命令 manage.py@myproject > createsuperuser # 执行后根据提示输入用户名，密码，邮箱 # 注意：输入的密码会进行加密处理，再存入表中，并且命令输入密码要求最少8位
2、JsonResponse的使用
我们发现，一般浏览器发送Ajax请求给服务器时，都会返回一个字典，我们需要先将字典序列化，浏览器接收到后再进行反序列化，你会不会觉得这样做有点繁琐？其实，django为我们提供了一个JsonResponse类，它为我们做好了json的序列化，并且浏览器接收到之后，ajax也会自动为我们反序列化，即ajax中success函数接收到的response就是反序列化之后的数据，直接使用即可，如上面登录示例部分代码：
from django.http import JsonResponse # 引入JsonResponse
def login(request):
if request.is_ajax():
......
response={"user":None, "err_msg": ""}
......
return JsonResponse(response)
分析原因：JsonResponse本质也继承了HttpResponse，而且既为我们做了序列化的操作，还将数据格式设置为json，ajax收到设置了json格式的数据也会为我们自动反序列化，也说明了不仅仅请求头中有content-type，响应头中也有，JsonResponse源码如下：
class JsonResponse(HttpResponse):
def __init__(self, data, encoder=DjangoJSONEncoder, safe=True,
json_dumps_params=None, **kwargs):
if safe and not isinstance(data, dict):
raise TypeError(
'In order to allow non-dict objects to be serialized set the '
'safe parameter to False.'
)
if json_dumps_params is None:
json_dumps_params = {}
kwargs.setdefault('content_type', 'application/json')
data = json.dumps(data, cls=encoder, **json_dumps_params)
super().__init__(content=data, **kwargs)
3、forms组件中对渲染出来的input输入框统一增加一个类名
我们在学习forms组件时，可以分别给每个字段设置一个类名，如class="form-control"，但发现像之前那样写的有代码冗余的问题，按照如下方式写可以解决此问题：
from django import forms
from django.forms import widgets
class UserForm(forms.Form):
user=forms.CharField(min_length=5,
label="用户名")
pwd=forms.CharField(min_length=5,
widget=widgets.PasswordInput(),
label="密码")
r_pwd=forms.CharField(min_length=5,
widget=widgets.PasswordInput(),
label="确认密码")
email=forms.EmailField(min_length=5,
label="邮箱")
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for filed in self.fields.values():
filed.widget.attrs.update({'class': 'form-control'})
4、关于全局钩子__all__的问题
我们知道全局钩子的错误信息都在__all__中，源码中是这样写的：
所以知道了这些，我们可以自己设置全局钩子的字段，避免跟其他字段规律不一致造成单独判断的问题，如下方式：
# 全局钩子：校验两次密码不一致
def clean(self):
pwd=self.cleaned_data.get("pwd")
r_pwd=self.cleaned_data.get("r_pwd")
if pwd and r_pwd and r_pwd!=pwd:
self.add_error("r_pwd", ValidationError("两次密码不一致！"))
# 自己定义错误信息对应的字段是r_pwd
else:
return self.cleaned_data
5、关于具有提交功能的按钮问题
我们知道form表单是浏览器向服务器发请求的一种方式，提交按钮也有多种，但是要注意，具有提交功能的按钮有两种：<input type="submit" value="提交" />和<button>提交</button>，也就是说，当你想用form表单发请求时，可以用以上两种的任一种，但是当你想基于ajax发送请求时，若有form标签，则一定不要用以上两种提交按钮，否则当你点击按钮发送ajax时会自动以form表单的方式再发一次请求，使用<input type="button" value="提交" />是可以的，因为它没有提交form表单功能。