返回顶部

blog开发之登录功能

登录功能

先看代码：

def login(request):
    if request.method == 'POST':
        res = BaseResponse()
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        code_str = request.POST.get('code_str')
        valid_code = request.session.get('valid_code_str')

        if valid_code == code_str:
            user_obj = auth.authenticate(request, username=user, password=pwd)
            if user_obj:
                auth.login(request, user_obj)
                next_url = request.GET.get('next', '/blog/index/')
                res.data = {'username': user_obj.username, 'next_url': next_url}
            else:
                res.code = 2001
                res.error = '用户名或密码错误'
        else:
            res.error = '验证码错误'
            res.code = 2000  # 验证码错误
        return JsonResponse(res.dict)

    return render(request, 'blog/login.html')

1.先判断验证码是否正确，在判断用户名密码。通过django给我们提供的auth模块来实现。

2.通过next_url来达到，登录后跳转到上一个页面。

图片验证码

需要安装pillow模块。

import string
import random
from PIL import Image,ImageDraw, ImageFont
from io import BytesIO



def get_validCode_img(request):

    def random_color():
        return (random.randint(0,255), random.randint(0,255), random.randint(0, 255))

    img = Image.new('RGB', (270,40), random_color())
    draw = ImageDraw.Draw(img)
    kumo_font = ImageFont.truetype(font='static/font/kumo.ttf', size=32)
    str1 = ''.join(random.sample(string.ascii_letters + string.digits,4))
    for index, i in enumerate(str1, 1):
        draw.text((index*50,5),i, random_color(),font=kumo_font)

    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()
    request.session['valid_code_str'] = str1
    print(str1)
    return data

def get_validcode_img(request):
    data = get_validCode_img(request)
    return HttpResponse(data)

 

登录页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
</head>
<body>
<h3>登录页面</h3>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form>
                {% csrf_token %}
                <div class="form-group">
                    <label for="user">用户名</label>
                    <input type="text" class="form-control" id="user">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" class="form-control" id="pwd">
                </div>
                <div class="form-group">
                    <div>
                        <label for="valid_code">验证码</label>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="valid_code" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <img src="/blog/get_validcode_img/" id="valid_code_img">
                        </div>
                    </div>
                </div>
                <input type="button" class="btn btn-primary" value="登录" id="login_btn"> <span id="login_error"></span>
                <a href="/blog/register/" class="btn btn-success pull-right">注册</a>
            </form>
        </div>
    </div>
</div>
</body>

<script src="/static/jquery-3.3.1.js"></script>
<script>

    $('#valid_code_img').click(function () {
        $(this)[0].src += '?';
    });

    $('#login_btn').click(function () {
        $.ajax({
            url: '',
            type: 'post',
            data: {
                csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),
                user: $('#user').val(),
                pwd: $('#pwd').val(),
                code_str: $('#valid_code').val()
            },
            success: function (data) {
                console.log(data);
                if(data.code===1000){
                    // 登录成功
                    next_url = data.data['next_url'];
                    location.href = next_url
                }else{
                    // 登录失败
                    $('#login_error').text(data.error).css({"color":"red","margin":"10px"});
                    setTimeout(function () {
                        $('#login_error').text('')
                    }, 1500);

                }

            }

        })

    })

</script>

</html>

 

posted @ 2020-10-08 20:24  muguangrui  阅读(68)  评论(0)  编辑  收藏  举报