随机验证码
需要导入的模块
"""
图片相关的模块
pip3 install pillow
"""
from PIL import Image, ImageDraw, ImageFont
"""
Image:生成图片
ImageDraw:能够在图片上乱涂乱画
ImageFont:控制字体样式
"""
from io import BytesIO, StringIO
"""
内存管理器模块
BytesIO:临时帮你存储数据 返回的时候数据是二进制
StringIO:临时帮你存储数据 返回的时候数据是字符串
"""
import random
随机验证码的代码
def get_random():
return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
def get_code(request):
# 最终步骤4:写图片验证码
img_obj = Image.new('RGB', (430, 35), get_random())
img_draw = ImageDraw.Draw(img_obj) # 产生一个画笔对象
img_font = ImageFont.truetype('static/font/123.ttf', 30) # 字体样式 大小
# 随机验证码 五位数的随机验证码 数字 小写字母 大写字母
code = ''
for i in range(6):
random_upper = chr(random.randint(65, 90))
random_lower = chr(random.randint(97, 122))
random_int = str(random.randint(0, 9))
# 从上面三个里面随机选择一个
tmp = random.choice([random_lower, random_upper, random_int])
# 将产生的随机字符串写入到图片上
"""
为什么一个个写而不是生成好了之后再写
因为一个个写能够控制每个字体的间隙 而生成好之后再写的话
间隙就没法控制了
"""
img_draw.text((i * 60 + 60, -2), tmp, get_random(), img_font)
# 拼接随机字符串
code += tmp
print(code)
# 随机验证码在登陆的视图函数里面需要用到 要比对 所以要找地方存起来并且其他视图函数也能拿到
request.session['code'] = code
io_obj = BytesIO()
img_obj.save(io_obj, 'png')
return HttpResponse(io_obj.getvalue())
login_html前端body代码
body代码
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">登录页面</h1>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="code">验证码：</label>
<div class="row">
<div class="col-md-6">
<input type="text" id="code" class="form-control">
</div>
<div class="col-md-6">
<img src="/get_code/" alt="" id="img_code" style="width: 365px;height: 38px;">
</div>
</div>
</div>
<input type="button" class="btn btn-success" value="登录">
</div>
</div>
</div>
src里面插入的是get_code方法
ajax代码
通过触发img点击事件
attr（‘src’）可以得到标签属性对应的值，然后对这个值进行改变从而得到每次点击验证码会生成一个新的验证码
-
获取前端输入的数据
-
然后再对这些数据进行参数验证
-
将数据保存到字典里面
var obj = {username:username, password:password, code:code, csrfmiddlewaretoken:'{{ csrf_token }}'};
由于没有文件，所以可以直接创建字典
- 把参数提交到后端，发起Ajax请求
views视图函数
- 返回数据格式
- 接收参数
- 验证参数
将验证码切换成不区分大小写的条件，所以全部换成大写或者小写
- 处理业务逻辑
通过filter对数据库里面的账号密码进行比对，如果存在user_obj对象的话，则账号密码正确
- 登录成功，保存用户状态
将用户名和对应的id存入session中，进而保存用户的登录状态，默认14天