wen bbs项目之登录功能
登陆功能
需要有登录用户名，密码，动态生成验证码和提交按钮，具体效果如下：
需要先了解的知识点：
1.img标签的src属性可以放以下三种：
1.图片路径
2.url
3.图片的二进制数据
2.我们的计算机上面致所有能够输出各式各样的字体样式
内部其实对应的是一个个.ttf结尾的文件,免费的ttf字体样式可以去下面这个网址下载使用。
http://www.zhaozi.cn/ai/2019/fontlist.php?ph=1&classid=32&softsq=%E5%85%8D%E8%B4%B9%E5%95%86%E7%94%A8
3.介绍一下新的图片相关的模块
先安装
pip3 install pillow
再导入
from PIL import Image,ImageDraw,ImageFont
Image:生成图片用的
ImageDraw:能够在图片上乱涂乱画
ImageFont:控制字体样式
4.内存管理器模块
from io import BytesIO,StringIO
BytesIO:临时帮你存储数据 返回的时候数据是二进制
StringIO:临时帮你存储数据 返回的时候数据是字符串
视图函数部分
import random
from PIL import Image,ImageDraw,ImageFont
from io import BytesIO,StringIO
def get_random():
return random.randint(0,255),random.randint(0,255),random.randint(0,255)
def get_code(request):
# 推导步骤1:直接获取后端现成的图片二进制数据发送给前端
# with open(r"static/img/111.jpg","rb") as f:
# data = f.read()
# return HttpResponse(data)
# 推导步骤2:利用pillow模块动态产生图片
# img_obj = Image.new("RGB",(430,35),"green")
# img_obj = Image.new("RGB",(430,35),get_random())
# # 先将图片对象保存起来
# with open("xxx.png","wb") as f:
# img_obj.save(f,"png")
# # 再将图片对象读取出来
# with open("xxx.png","rb") as f:
# data = f.read()
# return HttpResponse(data)
# 推导步骤3:文件存储繁琐IO操作效率低 借助于内存管理器模块
# img_obj = Image.new("RGB", (430, 35), get_random())
# io_obj = BytesIO() # 生成一个内存管理器对象 你可以看成是文件句柄
# img_obj.save(io_obj,"png")
# return HttpResponse(io_obj.getvalue()) # 从内存管理器中读取二进制的图片数据返回给前端
# 最终步骤4:写图片验证码
img_obj = Image.new("RGB", (430, 35), get_random())
img_draw = ImageDraw.Draw(img_obj) # 产生一个画笔对象
img_font = ImageFont.truetype("static/font/222.ttf",30) # 字体样式 大小
# 随机验证码 五位数的随机验证码 数字 小写字母 大写字母
code = ""
for i in range(5):
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())
html部分
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<h1 class="text-center">登录</h1>
<label for="id_username">用户名</label>
<input type="text" class="form-control" id="id_username">
<label for="id_password">密码</label>
<input type="password" class="form-control" id="id_password">
</div>
<div class="form-group">
<label for="">验证码</label>
<div class="row">
<div class="col-md-6 ">
<input type="text" class="form-control">
</div>
<div class="col-md-6">
{# 这里img标签的src属性放的是一个url，访问页面时，会自动向这个地址请求拿到图片数据#}
<img src="/get_code" alt="" width="350" height="35" id="commit">
</div>
</div>
</div>
<input type="button" class="btn btn-primary form-control" value="登录">
</div>
</div>
</div>
</body>
<script>
// 动态改变验证码,当点击验证码时就刷新
$("#commit").click(function (){
// 1.先获取到这个src
let oldVal = $(this).attr("src");
// 2.每次点击给这个src加上一个问号
$(this).attr("src",oldVal+="?")
})
</script>
