django--之登录表单提交

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="/static/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container-fluid box">
    <h1></h1>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Loging</h3>
                </div>
                <div class="panel-body">
                    {# label for="name"  如果指定某个id,这样点击这个label,焦点会到对应的控件上         #}
                    <form>
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="name">用户名</label>
                            <input type="text" id="name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="pwd">密码</label>
                            <input type="password" id="pwd" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="valid_code">验证码</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" id="valid_code" class="form-control">
                                </div>
                                <img height="35" width="260" src="/get_valid_code/" alt="">
                            </div>
                        </div>
                        {#                        <input type="button" value="登录" class="btn btn-primary pull-right" id="btn">#}
                    </form>
                    <input type="button" value="登录" class="btn btn-primary pull-right" id="btn">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $('#btn').hover(function () {
        var valid_code = $('#valid_code').val();
        if (valid_code.length == 0) {
            alert('验证码不能为空')
        } else {
            $('#btn').click(function () {

                var user_info = {
                    'name': $('#name').val(),
                    'pwd': $('#pwd').val(),
                    'valid_code': $('#valid_code').val(),
                    'csrfmiddlewaretoken': $("[name = 'csrfmiddlewaretoken']").val(),
                    {#'csrfmiddlewaretoken': '{{ csrf_token }}',#}  --csrf_token的第二种写法
                };
                {#var pos = JSON.stringify(user_info);#}
                var pos = user_info;
                $.ajax({
                    url: '/login/',
                    type: 'post',
                    data: pos,
                    success: function (data) {
                        if (data==200){
                             window.location.href = "/index/"
                        }else {
                            alert(data)
                        }
                    }
                })
            });
        }

    })
</script>
</html>

后台代码

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


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


def get_random_code():
    code = ''
    for i in range(5):
        num = random.randint(0, 9)  # 0到9的随机数
        upper_num = random.randint(65, 90)  # 大写字母a-z对应的ASCII码
        lower_num = random.randint(97, 122)  # 小写字母a-z对应的ASCII码
        upper_letter = chr(upper_num)
        lower_letter = chr(lower_num)
        code_list = [num, upper_letter, lower_letter]
        x = random.sample(code_list, 1)[0]  # 随机生成一个字符串
        code += str(x)
    return code


verification_code = get_random_code()


def get_valid_code(request):
        img = Image.new('RGB', (320, 35), color=get_random_color())
        img_draw = ImageDraw.Draw(img)
        font = ImageFont.truetype('static/font/ss.TTF', size=25)
        img_draw.text((100, 0), verification_code, get_random_color(), font=font)
        f = BytesIO()
        img.save(f, 'png')
        data = f.getvalue()
        return HttpResponse(data)


def login(request):
    if request.method == "GET":
        return render(request, 'login.html')
    elif request.method == 'POST':
        name = request.POST.get('name')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')
        print(verification_code)
        print(name, pwd, valid_code)
        if valid_code.lower() == verification_code.lower():
            if name == 'zjh' and pwd == '123':
                return HttpResponse(200)
            return HttpResponse('用户或密码错误')
        return HttpResponse('验证码错误')
-----https://www.cnblogs.com/seven-007/p/8034043.html

posted @ 2018-11-27 21:26 zhaijihai 阅读(599) 评论(0) 编辑收藏举报

zhaijihai

django--之登录表单提交

公告