BBS论坛登录功能

四、登录功能

前端页面html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BBS论坛</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-md-offset-4 ">
            <h1 class="text-center">登录</h1>
            <hr>
            {% csrf_token %}
            <div class="form-group">
                <label for="id_username">用户名</label>
                <input type="text" id="id_username" name="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_password">密码</label>
                <input type="password" id="id_password" name="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_code">验证码</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="/get_code/" alt=""  width="200" height="30" id="id_img">
                    </div>
                </div>
            </div>
            <button class="btn-success btn " id="id_button">登录</button>
            <span  class="errors" style="color: red" id="id_error"></span>
        </div>
    </div>
</div>
<script>
     $('#id_img').click(function () {
        // 获取图片src旧的路径
        let oldPath = $(this).attr('src');
        // 修改图片的src属性
        $(this).attr('src',oldPath += '?')
    });
     // ajax发送数据
    $('#id_button').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:{
                'username':$('#id_username').val(),
                'password':$('#id_password').val(),
                'code':$('#id_code').val(),
                // 'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(),
                'csrfmiddlewaretoken':'{{ csrf_token }}',
            },
            success:function (data) {
                if(data.code === 100){
                    location.href = data.url
                }else{
                    $('#id_error').html(data.msg)
                }
            }
        })
    })

</script>
</body>
</html>

后端逻辑代码：

def get_code(requst):
    img_obj = Image.new('RGB', (310, 35), get_random())
    # 生成一个画笔对象
    img_draw = ImageDraw.Draw(img_obj)
    # 生成一个字体对象
    img_font = ImageFont.truetype('static/font/akbar.ttf', 35)
    # 随机验证码：由数字、小写字母、大写字母
    code = ''  # 定义一个变量存储最终验证码
    for i in range(5):
        random_int = str(random.randint(0, 9))
        random_lower = chr(random.randint(97, 122))
        random_upper = chr(random.randint(65, 90))
        temp_code = random.choice([random_int, random_lower, random_upper])
        # 将产生的字一个一个的写到图片上
        img_draw.text((60 + i * 30, 0), temp_code, get_random(), img_font)
        # code记录
        code += temp_code
    print(code)
    # 将code存放到session
    requst.session['code'] = code
    # 生成io对象
    io_obj = BytesIO()
    # 图片模糊
    # img_obj = img_obj.filter(ImaggeFilter.BLUR)
    img_obj.save(io_obj, 'png')
    return HttpResponse(io_obj.getvalue())

get_code 获取验证码

def login(request):
    back_dic = {'code': 100, 'msg': ''}
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        # 先校验验证码（可以区分大小写，也可以不区分）
        if request.session.get('code').upper() == code.upper():
            user_obj = auth.authenticate(username=username, password=password)
            if user_obj:
                # 登录成功，记录当前用户状态
                auth.login(request, user_obj)
                back_dic['msg'] = '登录成功！'
                back_dic['url'] = '/home/'
            else:
                back_dic['code'] = 102
                back_dic['msg'] = '用户名或密码错误！'
        else:
            back_dic['code'] = 103
            back_dic['msg'] = '验证码错误！'
        return JsonResponse(back_dic)

    return render(request, 'login.html')

有可能会有更新......

BBS论坛 登录功能

四、登录功能

BBS论坛登录功能