百木园-与人分享,
就是让自己快乐。

bbs项目之登录功能

登陆功能

需要有登录用户名,密码,动态生成验证码和提交按钮,具体效果如下:
image

需要先了解的知识点:

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())
后端验证数据格式
def login(request):
    if request.method == \'POST\':
        back_dic = {\'code\':1000,\'msg\':\'\'}
        username = request.POST.get(\'username\')
        password = request.POST.get(\'password\')
        code = request.POST.get(\'code\')
        # 1.先校验验证码是否正确 自己决定是否忽略大小写 全部转成大写或者小写进行比较
        if request.session.get(\'code\').upper() == code.upper():
            # 2.校验用户名和密码是否正确
            use_obj = auth.authenticate(request,username=username,password=password)
            if use_obj:
                # 保存用户状态
                auth.login(request,use_obj)
                back_dic[\'url\']=\'/home/\'
            else:
                back_dic[\'code\']=2000
                back_dic[\'msg\']=\'用户名或者密码错误\'
        else:
            back_dic[\'code\'] = 3000
            back_dic[\'msg\']=\'验证码错误\'
        return JsonResponse(back_dic)
    return render(request,\'login.html\',locals())

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\" id=\"id_code\">
                    </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 \" value=\"登录\" id=\"id_commit\">
            <span style=\"color: red\" id=\"error\"></span>
        </div>
    </div>
</div>
</body>
<script>
    // 动态改变验证码,当点击验证码时就刷新
    $(\'#commit\').click(function (){
        // 1.先获取到这个src
        let oldVal = $(this).attr(\'src\');
        // 2.每次点击给这个src加上一个问号
        $(this).attr(\'src\',oldVal+=\'?\')
    })
	// 给按钮绑定点击事件,触发ajax
    $(\'#id_commit\').click(function (){
        $.ajax({
            url:\'\',
            type:\'post\',
            data:{
                \'username\':$(\'#id_username\').val(),
                \'password\':$(\'#id_password\').val(),
                \'code\':$(\"#id_code\").val(),
                \'csrfmiddlewaretoken\':\'{{ csrf_token }}\'
            },
            success:function (args){
                if (args.code==1000){
                    // 跳转到首页
                    window.location.href = args.url
                }else{
                    // 渲染错误信息
                    $(\'#error\').text(args.msg)
                }
            }
        })
    })
</script>

来源:https://www.cnblogs.com/suncolor/p/16594121.html
本站部分图文来源于网络,如有侵权请联系删除。

未经允许不得转载:百木园 » bbs项目之登录功能

相关推荐

  • 暂无文章