2-功能1：基于用户认证组件和Ajax实现登录验证(图片验证码)

1、登录页面的设计

 （1）label标签的id属性

label标签的id属性,点击label标记，相当于点击了input框

bootstarp样式
    class="form-group"
    class="form-control"

（2）此时的验证码先取静态路径

                <div class="form-group">
                    <label for="id_valid_code_str">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="id_valid_code_str" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <img src="/blog/get_validCode/" id="id_valid_code_img" width="270" height="35" title="验证码" alt="">
                        </div>
                    </div>
                </div>

 2、验证码图片的生成

 

 

（1）方式1：HttpResponse返回字符串

（2）方式2：引入PIL模块  pip install pillow

from PIL import Image
import random


def get_random_color():
    """生成随机颜色(255,255,255)"""
    return tuple([random.randint(0, 255) for _ in range(3)])


def get_validCode(request):
    # 在本地生成一张图片validCode.png
    img = Image.new("RGB", (270, 35), color=get_random_color())
    with open("validCode.png", 'wb') as f:
        img.save(f, 'png')
        
    with open('validCode.png', 'rb') as f:
        data = f.read()

    return HttpResponse(data)

 （3）方式3：内存处理

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


def get_random_color():
    """生成随机颜色(255,255,255)"""
    return tuple([random.randint(0, 255) for _ in range(3)])


def get_validCode(request):
    
    # 在内存生成一张图片validCode.png
    img = Image.new('RGB', (210, 35), color=get_random_color())
    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()

    return HttpResponse(data)

（4）方式4：加入噪点的，字体的

# 方式4：加入噪点的
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
import random
import string   # string字符串

def get_random_color():
    return tuple([random.randint(0, 255) for _ in range(3)])


def get_validCode(request):
    holly_font = ImageFont.truetype('static/font/holly.ttf', size=28)  # 字体

    img = Image.new('RGB', (210, 35), color=get_random_color())
    draw = ImageDraw.Draw(img)  # 在img上作画

    # draw.text()     # 文字
    # draw.line()     # 线
    # draw.point()    # 点

    # draw数字字母5个
    for i in range(5):
        random_char = random.choice(string.digits + string.ascii_letters)
        draw.text((i * 40 + 20, 5), random_char, get_random_color(), font=holly_font)

    # 补充噪点噪音
    width, height = 210, 35
    for i in range(100):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, width)
        y2 = random.randint(0, width)
        draw.line((x1, y1, x2, y2), fill=get_random_color())

    for i in range(400):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x+4, y+4), 0, 90, fill=get_random_color())

    # 内存处理
    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()

    return HttpResponse(data)

　　　　

 3、验证码的刷新与字符串保存，验证码解耦

（1）刷新

$("#id_valid_code_img")
[img#id_valid_code_img]
$("#id_valid_code_img")[0]
<img src=​"/​blog/​get_validCode/​" id=​"id_valid_code_img" width=​"270" height=​"35" title=​"验证码" alt>​
$("#id_valid_code_img")[0].src
"http://127.0.0.1:8000/blog/get_validCode/"
$("#id_valid_code_img")[0].src+="?"    # 页面刷新
"http://127.0.0.1:8000/blog/get_validCode/?"  
$("#id_valid_code_img")[0].src+="?"
"http://127.0.0.1:8000/blog/get_validCode/??"
$("#id_valid_code_img")[0].src+="?"
"http://127.0.0.1:8000/blog/get_validCode/???"

 模板层 js代码

<script type="text/javascript">
    //刷新验证码
    $(function () {
        $("#id_valid_code_img").click(function () {
            $(this)[0].src+="?"
        })
    })
</script>

（2）保存验证码字符串

（3）多个用户同时访问验证码

全局变量不可取

（4）session存储验证码字符串

 

 （5）验证码解耦

validCode.py

# 方式4：加入噪点的
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
import random
import string  # string字符串


def get_random_color():
    return tuple([random.randint(0, 255) for _ in range(3)])


def get_validCode_img(request):
    holly_font = ImageFont.truetype('static/font/holly.ttf', size=28)  # 字体

    img = Image.new('RGB', (210, 35), color=get_random_color())
    draw = ImageDraw.Draw(img)  # 在img上作画

    # draw数字字母5个
    valid_code_str = ""  # 保存验证码字符串
    for i in range(5):
        random_char = random.choice(string.digits + string.ascii_letters)
        draw.text((i * 40 + 20, 5), random_char, get_random_color(), font=holly_font)
        valid_code_str += random_char

    print("valid_code_str", valid_code_str)

    # 把验证码放入session中
    request.session["valid_code_str"] = valid_code_str

    # 内存处理
    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()

    return data

 views.py视图

from django.shortcuts import render, HttpResponse, redirect
from blog.utils.validCode import get_validCode_img      # 导入验证码函数


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


def get_validCode(request):
    """
    基于PIL模块动态生成响应状态码图片
    :param request: 
    :return: 
    """
    data = get_validCode_img(request)
    return HttpResponse(data)

4、登录验证 

（1）ajax流程图

 

（2）用户认证auth模块，ajax信息response

（3）ajax  success成功执行

 

 

 　　（4）代码优化：错误信息1s后消失

　（5）完整代码

主url

from django.contrib import admin
from django.urls import path, re_path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^blog/', include(('blog.urls', 'blog')))
]

url

from django.urls import path, re_path
from blog import views
from django.views.static import serve
from cnblog import settings

urlpatterns = [
    re_path('^login/$', views.login, name='login'),
    re_path('^get_validCode/$', views.get_validCode, name='get_validCode'),
    re_path('^index/$', views.index, name='index'),
]

view视图

from django.shortcuts import render, HttpResponse, redirect
from blog.utils.validCode import get_validCode_img  # 导入验证码函数
from django.http import JsonResponse  # Json数据返回到前端
from django.contrib import auth     # 用户认证组件


def login(request):
    if request.method == "POST":
        response = {'user': None, "msg": None}
        user = request.POST.get("user")
        pwd = request.POST.get("pwd")
        valid_code_str = request.POST.get("valid_code_str")

        _valid_code_str = request.session.get("valid_code_str")

        # 验证码验证
        if valid_code_str.upper() == _valid_code_str.upper():

            # 用户认证
            user = auth.authenticate(username=user, password=pwd)
            if user:
                auth.login(request, user)   # request.user == 当前登录对象
                response["user"] = user.username
            else:
                response["msg"] = "用户名或者密码错误"

        else:
            response['msg'] = "验证码错误"

        return JsonResponse(response)

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


def get_validCode(request):
    """
    基于PIL模块动态生成响应状态码图片
    :param request:
    :return:
    """
    data = get_validCode_img(request)
    return HttpResponse(data)


def index(request):

    return HttpResponse(request.user.username)

utils工具包：验证码解耦

# 方式4：加入噪点的
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
import random
import string  # string字符串


def get_random_color():
    return tuple([random.randint(0, 255) for _ in range(3)])


def get_validCode_img(request):
    holly_font = ImageFont.truetype('static/font/holly.ttf', size=28)  # 字体

    img = Image.new('RGB', (210, 35), color=get_random_color())
    draw = ImageDraw.Draw(img)  # 在img上作画

    # draw数字字母5个
    valid_code_str = ""  # 保存验证码字符串
    for i in range(5):
        random_char = random.choice(string.digits + string.ascii_letters)
        draw.text((i * 40 + 20, 5), random_char, get_random_color(), font=holly_font)
        valid_code_str += random_char

    print("valid_code_str", valid_code_str)

    # 把验证码放入session中
    request.session["valid_code_str"] = valid_code_str

    # 内存处理
    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()

    return data

模板层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
    <script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>

<h3>登录页面</h3>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-offset-3">
            <form>
                {% csrf_token %}
                <div class="form-group">
                    <label for="id_username">用户名</label>
                    <input type="text" id="id_username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="id_password">密码</label>
                    <input type="password" id="id_password" class="form-control">
                </div>
                <div class="form-group">
                    <label for="id_valid_code_str">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="id_valid_code_str" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <img src="/blog/get_validCode/" id="id_valid_code_img" width="270" height="35" title="验证码"
                                 alt="">
                        </div>
                    </div>
                </div>
                <input type="button" class="btn btn-default login-btn" value="登录"><span class="error"></span>

            </form>
        </div>
    </div>
</div>
</body>

</html>

ajax代码

<script type="text/javascript">
    //刷新验证码
    $(function () {
        $("#id_valid_code_img").click(function () {
            $(this)[0].src += "?"
        })
    });

    //登录验证
    $(function () {
        $('.login-btn').click(function () {
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    user: $("#id_username").val(),
                    pwd: $("#id_password").val(),
                    valid_code_str: $("#id_valid_code_str").val(),
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()

                },
                success: function (data) {
                    console.log(data)

                    if (data.user) {
                        location.href = "/blog/index"
                    }
                    else {
                        $('.error').text(data.msg).css({'color': 'red', 'margin-left': '20px'});

                        //定时器 1s后error_msg 消失
                        setTimeout(function () {
                            $('.error').text("")
                        }, 1000)
                    }
                }

            })
        })
    })
</script>

 （6）滑动验证码：django-demo

 

 

 　　（7）总结

总结： 
   1 一次请求伴随多次请求

   2 PIL　　　　　
        # 生成验证码图片

   3 session存储　　
        # 把验证码放入session中
        request.session["valid_code_str"] = valid_code_str

   4 验证码刷新    
        //刷新验证码
        $(function () {
            $("#id_valid_code_img").click(function () {
                $(this)[0].src += "?"
            })
        });