一、概述

  • 通过session控制用户密码登陆
  • 通过画图工具生成一张内存页面
  • 页面上有随机值(通过函数生成随机值)

二、session处理代码

def login_session(request):
    if request.method == "GET":
        return render(request,'login.html')
    else:
        user = request.POST.get("user")
        pwd = request.POST.get("pwd")
        validCode = request.POST.get("validCode")
        print(validCode)
        print('>>',request.session.get("valid_code"))
        if validCode.upper() == request.session.get("valid_code").upper():
            pass
        else:
            return HttpResponse('Error!')
        user_obj = UserInfo.objects.filter(name=user,pwd=pwd).first()
        if user_obj:
            request.session["is_login"] = True
            request.session["user_name"] = user
            print(request.session["user_name"])
            obj = HttpResponse("登陆成功")
            return obj
        return HttpResponse('Error!')
备注:这里最关键的是request.session.get("valid_code") 通过取session表中的字典值进行判断,而这个字典值是在用户请求登陆页面时存至数据库的

三、验证码函数

def get_random_color():
    import random
    return random.randint(0,255),random.randint(0,255),random.randint(0,255)

def get_random_code(n=5):
    import random
    random_list = []
    for i in range(n):
        random_num = random.randint(0, 9)
        random_upper = random.randint(65, 90)
        random_lower = random.randint(97, 122)
        code = random.choices([str(random_num), chr(random_upper), chr(random_lower)])

        random_list.append(''.join(code))
    return ''.join(random_list)

def valid_img(request):
    from PIL import Image,ImageDraw,ImageFont
    import random
    from io import BytesIO
    '''
    img = Image.new("RGB",(250,40),get_random_color())
    f = open("static/images/validcode.png","wb")
    img.save(f,"png")
    with open("static/images/validcode.png","rb") as f:
        data = f.read()
    '''
    f = BytesIO()
    img = Image.new("RGB", (250, 40), get_random_color())
    draw = ImageDraw.Draw(img)

    # 噪点噪线
    width=250
    height=40
    for i in range(5):
        x1=random.randint(0,width)
        x2=random.randint(0,width)
        y1=random.randint(0,height)
        y2=random.randint(0,height)
        draw.line((x1,y1,x2,y2),fill=get_random_color())

    for i in range(5):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())


    font = ImageFont.truetype("static/font/kumo.ttf",34)
    valid_code = get_random_code()
    draw.text((random.randint(0,30),random.randint(0,9)),valid_code,get_random_color(),font=font)
    img.save(f,"png")
    data = f.getvalue()
    request.session["valid_code"] = valid_code
    print(valid_code)
    return HttpResponse(data)
备注:request.session["valid_code"] = valid_code 浏览器请求时将验证码写入至session表中

四、前端模板代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<hr>
<h3>session form</h3>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="/login_session/" method="post">
                <div class="form-group">
                    <label for="user">用户名</label>
                    <input class="form-control" type="text" name="user" id="user">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input class="form-control" type="password" name="pwd" id="pwd">
                </div>
                <div>
                    <label for="validCode">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input class="form-control" type="text" id="validCode" name="validCode">
                        </div>
                        <div class="col-md-6">
                            <img style="vertical-align: 10px" src="/valid_img/" alt="" width="250" height="40">
                        </div>
                    </div>

                </div>
                <input type="submit" class="btn btn-default pull-right">
            </form>
        </div>
    </div>
</div>
</body>
</html>
备注:验证码获取时通过请求/valid_img/值进行动态获取
最后修改日期: 2020年8月18日

作者

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。