登录页面设计

图片相关的模块
#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)
#推导步骤1：直接获取后端现成的图片二进制数据发送给前端
def get_code(request):
    with open(r'static/img/1.jpg','rb')as f:
        data=f.read()
    return HttpResponse(data)
#推导步骤2：利用pillow模块动态产生图片    
def get_code(request):
    # img_obj=Image.new('RGB',(400,40),'yellow')
    # img_obj=Image.new('RGB',(400,40),(23,54,78))
    img_obj=Image.new('RGB',(400,40),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效率低 借助内存管理器模块
def get_code(request):
     img_obj=Image.new('RGB',(400,40),get_random())
     io_obj=BytesIO()#生成一个内存管理器对象 你可以看成是文件句柄
     img_obj.save(io_obj,'png')
     return HttpResponse(io_obj.getvalue())#从内存管理器中读取二进制的图片数据返回给前端
#推导步骤4:写图片验证码
# 我们的计算机上面能够输出各种各样的字体样式，内部其实对应的是一个个.ttf结尾的文件
def get_code(request):
    img_obj = Image.new('RGB', (400, 40), get_random())
    img_draw=ImageDraw.Draw(img_obj)#产生一个画笔对象
    img_font=ImageFont.truetype('static/font/11.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))
        #从上面3个里面随机选一个
        tmp=random.choice([random_upper,random_lower,random_int])
        #将产生的随机字符串写入到图片上
        """
        为什么一个个写不是生成好了在写
        因为一个个写能够控制每个字体的间隙 而生成好之后再写没法控制字体的间距了
        
        
        """
        img_draw.text((i*45+60,-1),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())   


"""前端"""
<div class="container-fluid">
    <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" name="username" id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="text" name="password" id="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" name="code" id="is_code" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <img src="/get_code/" alt="" id="id_img" width="400" height="40">
                    </div>
                </div>

            </div>
            <input type="button" class="btn btn-success" value="登录">

        </div>
    </div>
</div>
<script>
    $('#id_img').click(function () {
        //1 先获取标签之前的src
        let oldVal = $(this).attr('src');
        $(this).attr('src', oldVal += '?')
    })
</script>