django20：BBS网页设计/注册功能/验证码代码

表设计

注册功能

"""
1.注册功能需要forms组件
不同功能，可单独一个py文件

2.利用forms组件渲染前端标签
    1.利用ajax提交
    2.forms组件获取用户数据的数据。
       $('#form').serializeArray()
           获取forms标签所有用户普通键值对的数据

3. 手动渲染头像
    label里面内容，点击都会跳转到for指定的标签上

4.实时展示用户头像    
    1.文件阅读器
    2.change时间
    3.onload等待加载完毕

5.用户信息不合法，渲染提示信息
    1.forms组件渲染的标签id值有一个固定的特点
        id_字段名
        ps:获取id值：form.auto_id
    2.根据后端返回的字段以及字段对应的报错信息
        自己手动凭借对应字段的id值
    3. 提示功能的完善
        1.jQuery的链式操作
        2. input获取焦点事件

"""

验证码

"""
图片相关模块
pip3 install pillow
"""

from PIL import Image,ImageDraw,ImageFont

"""
Image:生成图片
ImageDraw:能够图片上乱涂乱画
ImageFont:控制字体样式
"""

from io import BytesIO, StringIO

"""
ByttesIO: 临时帮你储存数据，返回数据是二进制
StringIO: 临时帮你储存数据，返回数据是字符串
"""

url(r'^get_code/', views.get_code, name='get_code'),

# 获取随机3个0-255数
def get_random():
    """
    :return: 返回0-255三个随机数,元组
    """
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)


# 获取验证码
def get_code(request):
    # 1.产生一张随机颜色的图片
    img_obj = Image.new('RGB', (350, 35), get_random())
    # 2.产生一只在图片上的画笔
    img_draw = ImageDraw.Draw(img_obj)
    # 3.产生字体样式
    img_font = ImageFont.truetype(r'static\font\font.ttf', 35)
    
    # 产生5个随机验证码
    code = ''
    for i in range(5):
        upper_str = chr(random.randint(65, 90))  # 大写字母
        lower_str = chr(random.randint(97, 122))  # 小写字母
        random_int = str(random.randint(0, 9))  # 数字
        # 随机取一个
        temp_str = random.choice([upper_str, lower_str, random_int])
        # 写在图片上,位置，内容，颜色，字体
        #一个一个写，能控制间距
        img_draw.text((45 + i * 60, -2), temp_str, get_random(), font=img_font)
        # 储存
        code += temp_str
    print(code)
    #验证码需要校验，所以找地方存起来，并且其他视图函数也能拿到
    request.session['code'] = code
    io_obj = BytesIO() #生成一个内存管理器对象 可以看成文件句柄
    img_obj.save(io_obj, 'png') 把图片放进去
    
    return HttpResponse(io_obj.getvalue())    # 从内存管理器中读取二进制的图片数据返回给前端

前端代码：

<img src="/get_code/" alt="图片验证码" id="id_img">

js代码：

原理：src改变，立马刷新。点击一次图片，给url添加一个？号

$('#id_img').click(function () {
        var oldSrc = $(this).attr('src');
        $(this).attr('src', oldSrc += '?')
    });

参考：https://www.cnblogs.com/guyouyin123/p/12293758.html#2%E3%80%81%E6%B3%A8%E5%86%8C%E5%8A%9F%E8%83%BD