基于ajax的登录

验证码

当登录一个网站的时候往往会有验证码.

python生成随机验证码,需要使用到 PIL 模块

安装 :

pip3 install pillow 

1. 创建图片       

我们现在写的验证码属于简单的图片验证码 .

from PIL import Image,ImageDraw,ImageFont
img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

# 在图片查看器中打开
# img.show() 

# 保存在本地
with open('code.png','wb') as f:
    img.save(f,format='png')

2.创建画笔,用于在图片上画内容.

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

#size 图片的大小
draw = ImageDraw.Draw(img, mode='RGB')

3.画点

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示坐标
# 第二个参数：表示颜色
draw.point([100, 100], fill="red")
draw.point([300, 300], fill=(255, 255, 255))

4.画线

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示起始坐标和结束坐标
# 第二个参数：表示颜色
draw.line((100,100,100,300), fill='red')
draw.line((100,100,300,100), fill=(255, 255, 255))

##############
width=120
height=30
for i in range(100):    #循环100条线
    x1=random.randint(0,width)
    x2=random.randint(0,width)
    y1=random.randint(0,height)
    y2=random.randint(0,height)
    draw.line((x1,y1,x2,y2),fill=get_random_color())

5.画圆

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示起始坐标和结束坐标（圆要画在其中间）
# 第二个参数：表示开始角度
# 第三个参数：表示结束角度
# 第四个参数：表示颜色
draw.arc((100,100,300,300),0,90,fill="red")

####################
width=120
height=30
for i in range(500):
    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())

6.写本文

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示起始坐标
# 第二个参数：表示写入内容
# 第三个参数：表示颜色
draw.text([0,0],'python',"red")

 7.特殊字体文字

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示字体文件路径
# 第二个参数：表示字体大小
font = ImageFont.truetype("kumo.ttf", 28)
# 第一个参数：表示起始坐标
# 第二个参数：表示写入内容
# 第三个参数：表示颜色
# 第四个参数：表示颜色
draw.text([0, 0], 'python', "red", font=font)

示例 : 图片验证码 

from PIL import Image,ImageDraw,ImageFont

from io import BytesIO

import random

def get_valid_img(request):

     #创建随机颜色,随机三种颜色混合
    def get_random_color():
        return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
      #创建图片大小和背景颜色
    img = Image.new("RGB", (350, 38), get_random_color())
    draw = ImageDraw.Draw(img)
     #特殊文字和字体大小
    font = ImageFont.truetype("static/font/kumo.ttf", 32)

    keep_str=""     #放验证码
    for i in range(6):    #6位验证码,循环6次
         #0~9的随机数字
        random_num = str(random.randint(0, 9))
        #小写的字母
        random_lowalf = chr(random.randint(97, 122))
        #大写字母
        random_upperalf = chr(random.randint(65, 90))
        random_char=random.choice([random_num,random_lowalf,random_upperalf])
        #字体在图片的位置
        draw.text((i*30+50,0),random_char, get_random_color(), font=font)
        keep_str+=random_char
    #干扰,防止机器无限制访问
    width=350
    height=38
     #画线
    for i in range(100):
        x1=random.randint(0,width)
        x2=random.randint(0,width)
        y1=random.randint(0,height)
        y2=random.randint(0,height)
        draw.line((x1,y1,x2,y2),fill=get_random_color())
        #画圆
    for i in range(500):
        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()

    print('keep_str',keep_str)

    # 将验证码存在各自的session中,这样一个人如果多次验证不成功,下一次的验证码会覆盖上一次的
    request.session['keep_str']=keep_str

    return HttpResponse(data)

注意：字体文件下载 猛击这里

基于ajax的登录

urls.py

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

from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.login),          #登录
    path('get_valid_img/',views.get_valid_img),    #验证码
    path('zhuce/', views.zhuce),                            #注册
    path('books/', views.book_view),                      #内容页面

]

视图 views.py

from django.contrib.auth.models import User

from django.http import JsonResponse

from django.contrib import auth

from django import forms

def login(request):

    if request.is_ajax():
        user=request.POST.get("user")
        pwd=request.POST.get("pwd")
        validcode=request.POST.get("validcode")

        # 状态码,正确返回{"user":""},错误返回{"err_msg":"错误信息"}
        response={"user":None,"err_msg":""}
        # 如果验证码相同           将验证码保存到各自的session中,覆盖
        if validcode.upper() == request.session.get("keep_str").upper():
            # 校验
            user_obj=auth.authenticate(username=user,password=pwd)
            if user_obj:

                response["user"]=user
                # print("-----------",user)

            else:
                response["err_msg"]="用户名或密码错误"
            return JsonResponse(response)
        else:
            response["err_msg"]="验证码错误"

        return JsonResponse(response)
    # get 请求
    else:
        return render(request,"login.html")

login.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="../static/css/styles.css">
    <!--[if IE]>
        <script src="/static/js/html5shiv.min.js"></script>
    <![endif]-->

</head>
<body>
<div class="jq22-container" style="padding-top:100px">
    <div class="login-wrap">
        <div class="login-html">
            <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
            <div class="login-form">
                <form method="post">
                    <div class="sign-in-htm">
                        <div class="group">
                            <label for="user" class="label">用户名</label>
                            <input id="user" type="text" class="input" placeholder="请在这里输入用户名" name="user">
                        </div>
                        <div class="group">
                            <label for="pass" class="label">密码</label>
                            <input id="pwd" type="password" class="input" data-type="password" name="pwd" placeholder="请在这里输入密码">
                        </div>
{#                        <div class="group">#}
{#                            <label for="pass" class="label">邮箱</label>#}
{#                            <input id="email" type="text" class="input" placeholder="请在这里输入邮箱" name="email">#}
{#                        </div>#}
                         <div class="group">
                            <label for="pass">验证码</label>
                             <div>
                                <input id="validcode" type="text" class="input">
                                 <span class="error"></span>
                             </div>
                             <div>
                                 <img id="img" style="width: 385px;height: 40px;margin-top: 30px" src="/get_valid_img/" alt="">
                             </div>
                        </div>
                        <div class="group">
                            <input type="button" class="button login_btn" value="登录" style="cursor: pointer">
                        </div>
                        <div class="group">
                            <a href="/zhuce/">
                                <input type="button" class="button" value="注册" style="cursor: pointer">
                             </a>
                        </div>
                        <div class="hr"></div>
                        <div class="foot-lnk">
                            <a href="http://www.baidu.com">忘记密码</a>
                        </div>
                    </div>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery.js"></script>
<script>
    $(".login_btn").click(function () {

        $.ajax({
            url:"",
            type:"post",
            data:{
                user:$("#user").val(),
                pwd:$("#pwd").val(),
                validcode:$("#validcode").val(),
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

            },
            success:function (response) {
                {#alert(response);#}

                if(response.user){
                    //登录成功,重定向到
                    location.href="/books/"
                }
                else{
                    {#错误在登录下面显示错误#}
                    $(".error").html(response.err_msg).css("color","red")
                }
            }
        })
    });
    //刷新验证码
    $("#img").click(function () {
        {#局部刷新#}
        this.src+="?"
    })

</script>

</body>
</html>

效果 :