Django 之博客系统1登录和验证码
def login(request): """ 登录视图函数: get请求响应页面 post(Ajax)请求响应字典 :param request: :return: """ if request.method == "POST": response = {"user": None, "msg": None} user = request.POST.get("user") pwd = request.POST.get("pwd") valid_code = request.POST.get("valid_code") valid_code_str = request.session.get("valid_code_str") # 取出验证码 if valid_code.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, "login.html")
def get_valid_code_img(request): """ 基于PIL模块动态生成响应状态码图片 :param request: :return: """ img_data = validCode.get_valid_code_img(request) return HttpResponse(img_data)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css"> </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="user">用户名</label> <input type="text" id="user" 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="pwd">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" id="valid_code"> </div> <div class="col-md-6"> <img width="270" height="36" id="valid_code_img" src="/get_validCode_img/" alt=""> </div> </div> </div> <input type="button" class="btn btn-default login_btn" value="submit"><span class="error"></span> <a href="/register/" class="btn btn-success pull-right">注册</a> </form> </div> </div> </div> <script src="/static/js/jquery-3.2.1.min.js"></script> <script> // 刷新验证码 $("#valid_code_img").click(function () { $(this)[0].src += "?" }); // 登录验证 $(".login_btn").click(function () { $.ajax({ url: "", type: "post", data: { user: $("#user").val(), pwd: $("#pwd").val(), valid_code: $("#valid_code").val(), csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(), }, success: function (data) { console.log(data); if (data.user) { if (location.search){ location.href = location.search.slice(6) } else { location.href = "/index/" } } else { $(".error").text(data.msg).css({"color": "red", "margin-left": "10px"}); setTimeout(function(){ $(".error").text(""); },1000) } } }) }) </script> </body> </html>
import random def get_random_color(): return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) def get_valid_code_img(request): # 方式1: # with open("lufei.jpg","rb") as f: # data=f.read() # 方式2: # pip install pillow # from PIL import Image # img=Image.new("RGB",(270,40),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() # 方式3: # from PIL import Image # from io import BytesIO # # img=Image.new("RGB",(270,40),color=get_random_color()) # f=BytesIO() # img.save(f,"png") # data=f.getvalue() # 方式4: from PIL import Image, ImageDraw, ImageFont from io import BytesIO import random img = Image.new("RGB", (270, 40), color=get_random_color()) draw = ImageDraw.Draw(img) kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=32) valid_code_str = "" for i in range(5): random_num = str(random.randint(0, 9)) random_low_alpha = chr(random.randint(95, 122)) random_upper_alpha = chr(random.randint(65, 90)) random_char = random.choice([random_num, random_low_alpha, random_upper_alpha]) draw.text((i * 50 + 20, 5), random_char, get_random_color(), font=kumo_font) # 保存验证码字符串 valid_code_str += random_char # width=270 # height=40 # for i in range(10): # 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(100): # 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()) print("valid_code_str", valid_code_str) request.session["valid_code_str"] = valid_code_str # 保存cook值 ''' 1 sdajsdq33asdasd 2 COOKIE {"sessionid":sdajsdq33asdasd} 3 django-session session-key session-data sdajsdq33asdasd {"valid_code_str":"12345"} ''' f = BytesIO() # 创建内存句柄 img.save(f, "png") # 将img 文件保存着内存中 data = f.getvalue() # d读取保存的数据 return data
用到的PIL模块的内容简介
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
import random
# 创建图片对象
img = Image.new("RGB", (270, 40), color=get_random_color())
# 拿到编辑图片的句柄
draw = ImageDraw.Draw(img)
# 引入字体
kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=32)
# 在图片里写文字，random_char 写入的内容
draw.text((i * 50 + 20, 5), 'random_char', get_random_color(), font=kumo_font)
# 在图片里画线。下面是两点的直线，也可以继续加点，继续连接
# draw.line((x1,y1,x2,y2),fill=get_random_color())
#draw.line([50,10,100,200,400,300], fill = (0,255,0), width = 10)
# 写入点 含义：在给定的坐标点上画一些点。每个点只占一个像素点
# draw.point([(0,0),(100,150), (110, 50)], fill = (255, 0, 0))
# draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
# 定义：draw.arc(xy, start, end, options)
# 含义：在给定的区域内，在开始和结束角度之间绘制一条弧（圆的一部分）。
# 绘制了90度的弧
# draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())
f = BytesIO() # 创建内存句柄
img.save(f, "png") # 将img 文件保存着内存中
data = f.getvalue() # d读取保存的数据
return data
浙公网安备 33010602011771号