{"id":6276,"date":"2022-04-06T13:53:56","date_gmt":"2022-04-06T05:53:56","guid":{"rendered":"https:\/\/egonlin.com\/?p=6276"},"modified":"2022-04-16T19:57:01","modified_gmt":"2022-04-16T11:57:01","slug":"%e7%ac%ac%e5%9b%9b%e8%8a%82%ef%bc%9a-%e7%99%bb%e9%99%86%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=6276","title":{"rendered":"\u7b2c\u56db\u8282\uff1a \u767b\u9646\u529f\u80fd"},"content":{"rendered":"

\u767b\u9646\u529f\u80fd<\/h1>\n

\"\"<\/div><\/p>\n

\u672c\u529f\u80fd\u9700\u6c42\uff1a<\/p>\n

-\u4f7f\u7528Ajax\u63d0\u4ea4\u6570\u636e\u4fe1\u606f<\/p>\n

-\u6e32\u67d3\u7528\u6237\u540d\u5bc6\u7801\u4e0d\u7b26\u5408\u8981\u6c42\u7684\u9519\u8bef\u4fe1\u606f<\/p>\n

-\u767b\u9646\u540e\u53ef\u4ee5\u5b9e\u73b0\u767b\u51fa\u5f53\u524d\u8d26\u53f7<\/p>\n

\u62d3\u5c55\u9700\u6c42:<\/p>\n

-\u767b\u9646\u65f6\u5224\u65ad\u7528\u6237\u662f\u5426\u88ab\u51bb\u7ed3<\/p>\n

-\u767b\u9646\u65f6\u4f7f\u7528\u767b\u9646\u8868\u5355\u8fdb\u884c\u9a8c\u8bc1<\/p>\n

\u4e00\u3001\u6dfb\u52a0\u8def\u7531<\/h2>\n
\n

\u5728urls.py\u4e2d\u6dfb\u52a0<\/p>\n<\/blockquote>\n

1\u3001\u767b\u9646\u8def\u7531<\/h3>\n
    path('login\/', views.login, name='login'),<\/code><\/pre>\n
2\u3001\u751f\u6210\u968f\u673a\u9a8c\u8bc1\u7801\u8def\u7531<\/h3>\n
    path('get_valid_code\/', views.get_valid_code, name='get_valid'),<\/code><\/pre>\n
3\u3001\u767b\u51fa\u5f53\u524d\u7528\u6237\u8def\u7531<\/h3>\n
    path('logout\/', views.logout, name='logout'), <\/code><\/pre>\n
\u4e8c\u3001\u6dfb\u52a0\u89c6\u56fe\u51fd\u6570<\/h2>\n
\u5728views.py\u4e2d<\/p>\n
1\u3001\u5148\u5bfc\u5165\u4e00\u4e9b\u9700\u8981\u7684\u6a21\u5757<\/h3>\n
from django.contrib import auth\nfrom django.contrib.auth import authenticate<\/code><\/pre>\n
2\u3001\u7136\u540e\u6dfb\u52a0\u89c6\u56fe\u51fd\u6570login<\/h3>\n
def login(request):\n    if request.method == 'POST':\n        res = {'code': 100}\n        username = request.POST.get('username')\n        password = request.POST.get('password')\n        valid_code = request.POST.get('valid_code')\n        if request.session.get('valid_code').upper() == valid_code.upper() or valid_code == '123':\n            user = auth.authenticate(username=username, password=password)\n            freezed = models.UserInfo.objects.filter(username=username, is_active=0).first()\n            res['url'] = '\/index\/'\n            if freezed:\n                res['code'] = 105\n                res['msg'] = '\u8d26\u6237\u88ab\u51bb\u7ed3'\n            if user:\n                auth.login(request, user)\n                res['msg'] = '\u767b\u5f55\u6210\u529f'\n            else:\n                res['code'] = 101\n                res['msg'] = '\u7528\u6237\u540d\u5bc6\u7801\u9519\u8bef'\n        else:\n            res['code'] = 102\n            res['msg'] = '\u9a8c\u8bc1\u7801\u9519\u8bef'\n        return JsonResponse(res)\n    elif request.method == 'GET':\n        form = x_forms.FormLogin()\n        return render(request, 'Login.html', {'form': form})\n    else:\n        return HttpResponse('\u975e\u6cd5\u8bf7\u6c42\uff01')<\/code><\/pre>\n
\n
\u5176\u4e2d\u6d89\u53ca\u5230\u4e00\u4e2a\u624b\u52a8\u6dfb\u52a0\u767b\u5f55\u9a8c\u8bc1\u7801\u7684\u64cd\u4f5c<\/p>\n
\u6dfb\u52a0\u89c6\u56fe\u51fd\u6570get_rgb(\u968f\u673a\u51fd\u6570,\u5229\u7528RGB\u5f62\u6210\u968f\u673a\u989c\u8272)<\/p>\n
\u548cget_valid_code(\u83b7\u53d6\u968f\u673a\u9a8c\u8bc1\u7801)<\/p>\n<\/blockquote>\n
def get_rgb():\n    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)\ndef get_valid_code(request):\n    img = Image.new('RGB', (200, 38), get_rgb())\n    img_draw = ImageDraw.Draw(img)\n    img_font = ImageFont.truetype('.\/static\/font\/FZFenSTXJW.TTF', 25)\n    valid_code = ''\n    for i in range(5):\n        low_char = chr(random.randint(97, 122))\n        num_char = random.randint(0, 9)\n        upper_char = chr(random.randint(65, 90))\n        res = random.choice([low_char, num_char, upper_char])\n        valid_code += str(res)\n        img_draw.text((i * 40 + 10, 5), str(res), get_rgb(), img_font)\n    request.session['valid_code'] = valid_code\n    print(valid_code)\n\n    f = BytesIO()\n    img.save(f, 'png')\n    data = f.getvalue()\n    return HttpResponse(data) <\/code><\/pre>\n
\n
(\u62d3\u5c55)\u6211\u4eec\u53ef\u4ee5\u5728x_forms,py\u7684\u6587\u4ef6\u4e2d\u52a0\u5165\u4e00\u4e2a\u8868\u793a\u767b\u9646\u4fe1\u606f\u6821\u9a8c\u7684\u7c7b\uff08FormLogin\uff09\uff0c\u7528\u6765\u6821\u9a8c\u767b\u9646\u65f6\u4ece\u524d\u7aef\u8fd4\u56de\u7684\u5b57\u7b26\u4e32\u662f\u5426\u7b26\u5408\u8981\u6c42<\/p>\n<\/blockquote>\n
class FormLogin(forms.Form):\n    username = forms.CharField(\n        required=True,\n        label='<i class="fa fa-user width-30" aria-hidden="true"><\/i>',\n        error_messages={\n            'required': '\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a'\n        },\n        widget=widgets.TextInput(attrs={'class': 'form-control', 'placeholder': '\u8bf7\u8f93\u5165\u8d26\u53f7'}),\n    )\n    password = forms.CharField(\n        required=True,\n        label='<i class="fa fa-lock width-30" aria-hidden="true"><\/i>',\n        error_messages={\n            'required': '\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a'\n        },\n        widget=widgets.PasswordInput(attrs={'class': 'form-control', 'placeholder': '\u8bf7\u8f93\u5165\u5bc6\u7801'}),\n    )<\/code><\/pre>\n
3\u3001\u6dfb\u52a0\u767b\u51fa\u89c6\u56fe\u51fd\u6570(logout)<\/h3>\n
def logout(request):\n    auth.logout(request)\n    return redirect(reverse('login'))<\/code><\/pre>\n
\n
(\u62d3\u5c55): \u9a8c\u8bc1\u7801\u6697\u95e8<\/p>\n
\u8fd9\u91cc\u7684\u4ee3\u7801\u4e2d<\/p>\n<\/blockquote>\n
if request.session.get('valid_code').upper() == valid_code.upper() or valid_code == '123':<\/code><\/pre>\n
\n
\u6700\u540e\u7684123\u8bbe\u7f6e\u4e3a\u65b9\u4fbf\u5f00\u53d1\u8005\u81ea\u5df1\u8c03\u8bd5\u7a0b\u5e8f\u65f6\u4f7f\u7528,\u65e0\u8bba\u751f\u6210\u7684\u968f\u673a\u9a8c\u8bc1\u7801\u662f\u4ec0\u4e48,\u8f93\u5165\u9a8c\u8bc1\u7801123\u90fd\u53ef\u767b\u9646,\u6b63\u5f0f\u4e0a\u7ebf\u7684\u8bdd\u5e94\u8be5\u53bb\u9664\u8fd9\u4e2a\u6697\u95e8<\/p>\n<\/blockquote>\n
\u4e09\u3001\u767b\u5f55\u529f\u80fd\u6d89\u53ca\u7684\u6a21\u578b\u5c42\u64cd\u4f5c<\/h2>\n
\n
\u5224\u65ad\u7528\u6237\u767b\u5f55\u65f6\u4f7f\u7528\u6269\u5199\u7684UserInfo\u8868\u4e2d\u81ea\u5e26\u8ba4\u8bc1auth\u6a21\u5757<\/p>\n<\/blockquote>\n
user = authenticate(username=username, password=password)<\/code><\/pre>\n
\n
(\u62d3\u5c55)\u6b64\u5904\u7ee7\u627f\u7684\u539f\u59cbUser\u8868\u4e2d\u6709\u4e2ais_active\u5b57\u6bb5,\u53ef\u4ee5\u7528\u6765\u5224\u65ad\u7528\u6237\u662f\u5426\u88ab\u51bb\u7ed3<\/p>\n<\/blockquote>\n
freezed = models.UserInfo.objects.filter(username=username, is_active=0).first()<\/code><\/pre>\n
\u56db\u3001\u767b\u5f55\u529f\u80fd\u524d\u7aef\u6a21\u677f<\/h2>\n
1\u3001\u5728templates\u4e2d\u7684login.html\u4e2d<\/h3>\n
<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n    <meta charset="UTF-8">\n    <title>\u767b\u9646\u754c\u9762<\/title>\n    {% include 'template_static\/css_base.html' %}\n    <style>\n        ul {\n            list-style: none\n        }\n    <\/style>\n<\/head>\n<body>\n<div class="container-fluid">\n    <div class="mt-5 mb-5"><br><\/div>\n    <div class="row mt-5 mb-5">\n        <div class="col-md-6 offset-md-3 card bg-white shadow-sm mr-3 my-img">\n            <div class="row">\n                <div class="col-md-8 card-body p-5 bg-white-7">\n                    <div class="mt-5 mb-5"><br><\/div>\n                    <h1 class="text-center mt-5 swiper-cube-shadow">\u6b22\u8fce\u56de\u6765<\/h1>\n                    <form action="" method="post" class="mx-5 my-3">\n                        {% csrf_token %}\n                        {% for foo in form %}\n                            <div class="input-group mt-2">\n                                <div class="height-40 width-b100">\n                                    <div class="input-group-prepend">\n                                        <div class="input-group-text">\n                                            <label for="{{ foo.auto_id }}" class="mb-0">{{ foo.label|safe }}<\/label>\n                                        <\/div>\n                                        {{ foo }}\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        {% endfor %}\n                        <div class="input-group mt-2">\n                            <div class="input-group-prepend">\n                                <div class="input-group-text radius-5">\n                                    <i class="fa fa-hand-o-right width-30" aria-hidden="true"><\/i>\n                                <\/div>\n                            <\/div>\n                            <input type="text" class="form-control radius-5" id="valid_code" name="password"\n                                   placeholder="\u8bf7\u8f93\u5165\u9a8c\u8bc1\u7801">\n                            <img src="\/get_valid_code\/" height="38" width="200" id="valid_code_img"\n                                 class="ml-1 radius-5 pointer" title="\u70b9\u51fb\u5237\u65b0\u9a8c\u8bc1\u7801">\n                        <\/div>\n                        <input type="button" class="btn btn-outline-primary btn-block mt-3 mb-5" value="\u767b\u5f55" id="btn-login">\n                    <\/form>\n                    <div class="mt-5 mb-3"><br><br><\/div>\n                <\/div>\n                <div class="col-md-4 bg-black-4">\n                    <div class="h-100 pt-5 text-center">\n                        <h2 class="text-white ml-3 mt-5">\u8fd8\u672a\u6ce8\u518c\uff1f<\/h2>\n                        <p class="text-white mb-5">\u7acb\u5373\u6ce8\u518c\uff0c\u89c2\u770b\u66f4\u591a\u5185\u5bb9\uff01<\/p>\n                        <div class="mt-5 mb-5"><br><br><br><br><br><br><\/div>\n                        <a href="{% url 'register' %}" class="btn btn-outline-light">\u53bb\u6ce8\u518c<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class="alert alert-warning ml-5 col-md-2 shadow-sm invisible max-height-240" id="tips">\n            <h4 class="alert-heading">\u6e29\u99a8\u63d0\u793a\uff1a<\/h4>\n            <hr>\n            <div class="d-none font-weight-bold m-3" id="tips1"><\/div>\n            <div class="d-none font-weight-bold m-3" id="tips2"><\/div>\n            <div class="d-none font-weight-bold m-3" id="tips3"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<script>\n    $('#valid_code_img').click(function () {\n        var url = $("#valid_code_img")[0].src\n        $("#valid_code_img")[0].src = url + '?'\n    })\n    $('#btn-login').click(function () {\n        $('input').addClass('is-valid')\n        if ($('#id_username').val().length === 0) {\n            $('#id_username').removeClass('is-valid').addClass('is-invalid')\n            $('#tips').removeClass('invisible')\n            $("#tips1").text('\u8bf7\u8f93\u5165\u7528\u6237\u540d').removeClass('d-none')\n            setTimeout(function () {\n                $('#tips').addClass('invisible')\n                $('#id_username').removeClass('is-invalid').val('')\n            }, 1500)\n        }\n        $('#id_password').addClass('is-valid')\n        if ($('#id_password').val().length === 0) {\n            $('#id_password').removeClass('is-valid').addClass('is-invalid')\n            $('#tips').removeClass('invisible')\n            $("#tips2").text('\u8bf7\u8f93\u5165\u5bc6\u7801').removeClass('d-none')\n            setTimeout(function () {\n                $('#tips').addClass('invisible')\n                $('#id_password').removeClass('is-invalid').val('')\n            }, 1500)\n        }\n        $.ajax({\n            url: '\/login\/',\n            method: 'post',\n            data: {\n                'username': $('#id_username').val(),\n                'password': $('#id_password').val(),\n                'valid_code': $('#valid_code').val(),\n                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()\n            },\n            success: function (data) {\n                console.log(data.url)\n                if (data.code === 100) {\n                    swal({\n                        title: data.msg,\n                        text: '\u6b63\u5728\u4e3a\u60a8\u8df3\u8f6c\u9875\u9762',\n                        type: "success",\n                        timer: 1500,\n                        showConfirmButton: false,\n                    })\n                    setTimeout(function () {\n                        location.href = data.url\n                    }, 1500)\n                } else if (data.code === 101) {\n                    $('#tips').removeClass('invisible')\n                    $("#tips1").text(data.msg).removeClass('d-none')\n                    $('#id_username').removeClass('is-valid').addClass('is-invalid')\n                    $('#id_password').removeClass('is-valid').addClass('is-invalid')\n                    setTimeout(function () {\n                        $('#tips').addClass('invisible')\n                        $('#id_username').removeClass('is-invalid').val('')\n                        $('#id_password').removeClass('is-invalid').val('')\n                    }, 1500)\n                } else if (data.code === 102) {\n                    $('#tips').removeClass('invisible')\n                    $("#tips3").text(data.msg).removeClass('d-none')\n                    $('#valid_code').addClass('is-invalid')\n                    setTimeout(function () {\n                        $('#tips').addClass('invisible')\n                        $('#valid_code').removeClass('is-invalid').removeClass('is-valid').val('')\n                    }, 1500)\n                }\n            }\n        })\n    })\n    $('#id_username').blur(function () {\n        $('#id_username').addClass('is-valid')\n        if ($('#id_username').val().length === 0) {\n            $('#id_username').removeClass('is-valid').addClass('is-invalid')\n            $('#tips').removeClass('invisible')\n            $("#tips1").text('\u8bf7\u8f93\u5165\u7528\u6237\u540d').removeClass('d-none')\n            setTimeout(function () {\n                $('#tips').addClass('invisible')\n                $('#id_username').removeClass('is-invalid').val('')\n            }, 1500)\n        }\n    })\n    $('#id_password').blur(function () {\n        $('#id_password').addClass('is-valid')\n        if ($('#id_password').val().length === 0) {\n            $('#id_password').removeClass('is-valid').addClass('is-invalid')\n            $('#tips').removeClass('invisible')\n            $("#tips2").text('\u8bf7\u8f93\u5165\u5bc6\u7801').removeClass('d-none')\n            setTimeout(function () {\n                $('#tips').addClass('invisible')\n                $('#id_password').removeClass('is-invalid').val('')\n            }, 1500)\n        }\n    })\n    $('#valid_code').blur(function () {\n        if ($('#valid_code').val().length === 0) {\n            $('#valid_code').addClass('is-invalid')\n            $('#tips').removeClass('invisible')\n            $("#tips3").text('\u8bf7\u8f93\u5165\u9a8c\u8bc1\u7801').removeClass('d-none')\n            setTimeout(function () {\n                $('#tips').addClass('invisible')\n                $('#valid_code').removeClass('is-invalid').val('')\n            }, 1500)\n        }\n    })\n\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u767b\u9646\u529f\u80fd \u672c\u529f\u80fd\u9700\u6c42\uff1a -\u4f7f\u7528Ajax\u63d0\u4ea4\u6570\u636e\u4fe1\u606f -\u6e32\u67d3\u7528\u6237\u540d\u5bc6\u7801\u4e0d\u7b26\u5408\u8981\u6c42\u7684\u9519\u8bef\u4fe1\u606f -\u767b\u9646\u540e\u53ef\u4ee5\u5b9e\u73b0\u767b\u51fa […]<\/p>\n","protected":false},"author":3,"featured_media":6808,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,406],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/6276"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6276"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/6276\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/media\/6808"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}