登录验证码的实现

目录

• 验证码的实现：
  • 1.验证码生成
  • 2.页面展示：
  • 3.内置模块的参数

验证码的实现：

1.验证码生成

#验证码的实现
from PIL import Image,ImageDraw,ImageFont
import random
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):
    img_obj = Image.new('RGB', (360, 35), get_random())  #生成图片对象
    img_draw = ImageDraw.Draw(img_obj)  # 生成了一个画笔对象
    img_font = ImageFont.truetype('static/font/111.ttf', 30)  # 字体样式
    #随机码的获取：
    code = ''
    for i in range(5):
        upper_str = chr(random.randint(65, 90))  #ascii码 大写字母
        lower_str = chr(random.randint(97, 122)) #ascii码 小写字母
        random_int = str(random.randint(0, 9))
        tmp = random.choice([upper_str, lower_str, random_int]) #随机取值
        
        img_draw.text((i * 60 + 60, 0), 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())   #返回图片的二进制的数据

2.页面展示：

#页面展示：login.html
 <div class="form-group">
                <label for="id_code">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" name="code" id="id_code" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <img src="/get_code/" alt="" width="360" height="35" id="id_img">
                    </div>
                </div>
            </div

<script>
    $('#id_img').click(function () {
        var oldPath = $(this).attr('src');
        $(this).attr('src',oldPath+='?')   //绑定img属性，自动像后端请求数据
    })
    $('#id_submit').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:{
                'username':$('#id_username').val(),
                'password':$('#id_password').val(),
                'code':$('#id_code').val(),
                'csrfmiddlewaretoken':'{{ csrf_token }}'  //发送ajax请求
            },
            success:function (data) {
                if (data.code== 1000) {
                    window.location.href=data.url
                }else{
                    $('#id_error').text(data.msg)
                    //自动刷新验证码
                    var oldPath = $('#id_img').attr('src');
                    $('#id_img').attr('src',oldPath+='?')
                }

            }
        })

    })
</script>

3.内置模块的参数

io内存管理器模块: 
BytesIO  保存数据 并且在获取的时候 是以二进制的方式给你
StringIO  保存数据 并且在获取的时候 是以字符串的方式给你

from PIL import Image,ImageDraw,ImageFont
Image       生成图片
ImageDraw   在图片上写字
ImageFont   控制字的字体样式

框架下载方式： pip3 install baidu-aip -i https://pypi.douban.com/simple/