BBS(第二天) Django之Admin 自动化管理数据页面 与创建一个用户注册的验证码

from django.shortcuts import render, HttpResponse

from django.http import JsonResponse
from blog.checks import check_name, CheckForm
from blog.models import User

from django.contrib.auth import authenticate, login

# 安装Pillow模块
# 生成图片(画板)、字体(选择指定ttf并设置字体)、画笔(画点、线、字、圆)
from PIL import Image, ImageFont, ImageDraw
from io import BytesIO
import random


# 定义接口规范
response_dic = {
    ‘statue‘: 1,
    ‘msg‘: ‘ok‘,
    ‘data‘: {}
}


# 创建画板，保存在服务器本地
def save_local():
    img = Image.new(‘RGB‘, (230, 32), (40, 20, 10))  # type: Image
    # 本地写流
    wf = open(‘code.png‘, ‘wb‘)
    # 将数据以指定格式丢给文件操作流
    img.save(wf, ‘png‘)

    with open(‘code.png‘, ‘rb‘) as f:
        data = f.read()
    return data

# 随机RGB元组
def random_RGB(min, max):
    return tuple([random.randint(min, max) for i in range(3)])

# 随机产生六位验证码
def random_six_code():
    code = ""
    # 每一位均可以为字母大写、小写或数字
    for i in range(6):
        tag = random.randint(1, 3)  # 1:大写 2:小写 3:数字
        if tag == 1:
            code += chr(random.randint(65, 90))
        elif tag == 2:
            code += chr(random.randint(97, 122))
        else:
            code += str(random.randint(0, 9))
    return code

# 获取验证码
def login_code(request):
    # data = save_local()

    img = Image.new(‘RGB‘, (230, 32), random_RGB(150, 255))


    # 在画板中画字
    img_draw = ImageDraw.Draw(img)

    # 设置ImageFont字体
    img_font = ImageFont.truetype(‘static/font/kumo.ttf‘, size=30)

    # 获取六位验证码
    img_code = random_six_code()
    # 将img_code存储到session中，与会话绑定，用来完成登录验证码的验证
    request.session[‘img_code‘] = img_code

    # 画文字：xy轴、文本、颜色、ImageFont字体
    for i, ch in enumerate(img_code):
        img_draw.text((30 + i * 30, 0), ch, random_RGB(0, 150), img_font)


    bf = BytesIO()
    img.save(bf, ‘png‘)
    data = bf.getvalue()  # 从内存中将数据全部取出
    return HttpResponse(data)

# 登录
def my_login(request):
    if request.method == "GET":
        return render(request, ‘login.html‘)
    if request.method == "POST":
        client_code = request.POST.get(‘img_code‘, None).lower()
        server_code = request.session.get(‘img_code‘, None).lower()
        print("client_code", client_code)
        print("server_code", server_code)
        if client_code != server_code:
            return JsonResponse({
                ‘statue‘: 2,
                ‘msg‘: "验证码错误",
                ‘data‘: {}
            })
        # 验证通过就可以进行用户登录
        username = request.POST.get(‘username‘, None)
        password = request.POST.get(‘password‘, None)
        user = authenticate(username=username, password=password)
        if user:
            login(request, user)
            return JsonResponse({
                ‘statue‘: 1,
                ‘msg‘: "登录成功",
                ‘data‘: {}
            })
        return JsonResponse({
            ‘statue‘: 2,
            ‘msg‘: "登录失败",
            ‘data‘: {}
        })

from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),
    url(r‘^$‘, views.my_login),

    url(r‘^register/$‘, views.register),
    url(r‘^check_username/$‘, views.check_username),

    url(r‘^my_login/$‘, views.my_login),
    # 获取验证码的GET请求
    url(r‘^login_code/$‘, views.login_code),
]

<script>
    $(".login").click(function () {
        token = $(‘[name=csrfmiddlewaretoken]‘).val();

        $.ajax({
            url: ‘/my_login/‘,
            type: ‘post‘,
            data: {
                {#csrfmiddlewaretoken: ‘{{ csrf_token }}‘,#}
                csrfmiddlewaretoken: token,
                username: $(‘#username‘).val(),
                password: $(‘#password‘).val(),
                img_code: $(‘#img_code‘).val(),
            },
            success: function (data) {
                console.log(data);
                $("#login-info").modal(‘show‘);
                $(‘#myModalLabel‘).text(data.msg)
            }

        })
    })

    $(‘#code‘).click(function () {
        {#var _this = this;#}
        {#$.ajax({#}
        {#    url: ‘/login_code/‘,#}
        {#    success: function (data) {#}
        {#        console.log(data);#}
        {#        $(_this).attr(‘src‘, data)#}
        {#    }#}
        {# })#}

        url = ‘/login_code/‘;

        var xhr = new XMLHttpRequest();
        xhr.open(‘GET‘, url, true);  // url
        xhr.responseType = "blob";
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var blod = this.response;
                    var src = URL.createObjectURL(blod);  // src
                    $(‘#code‘).attr(‘src‘, src);
                }
            }
        };
        xhr.send();

    })

</script>