基于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>
效果 :
