登陆功能

需要有登录用户名,密码,动态生成验证码和提交按钮,具体效果如下:
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

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!