登录页面
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/blog/bootstrap/css/bootstrap.css"> {# <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/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="40" id = "valid_code_img" src="/get_validCode_img/" alt=""> </div> </div> </div> <input type="button" class="btn btn-default login_btn pull-right" value="submit"> </form> </div> </div> </div>
验证码图片的生成
import random def get_validCode_img(request): def get_random_color(): return (random.randint(0,255), random.randint(0,255), random.randint(0,255)) #方式一 # with open("luffy.jpg",'rb')as f: # data = f.read() #方式二: 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() #方式三： # 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() #方式四： 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) char = str(random.randint(0, 9))
噪声噪线
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,width), random.randint(0,height), random.randint(0,height)]) x = random.randint(0,width) y = random.randint(0,height) draw.arc((x, y, x+4, y+4),0, 90, fill=get_random_color())
验证码刷新
<script src="/static/js/jquery-3.2.1.min.js"></script> <script> //刷新验证码 $("#valid_code_img").click(function(){ $(this)[0].src += "?" });
保存验证码字符串
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 print("valid_code_str", valid_code_str) request.session["valid_code_str"] = valid_code_str ''' 1 sdajsdq33asdf 2 COOKIE {"sessionid":sdajsdq33asdf} 3 django-session session-key session-data sdajsdq33asdf ''' f = BytesIO() img.save(f,"png") data = f.getvalue() return HttpResponse(data)
登录验证
from django.shortcuts import render, HttpResponse, redirect from django.http import JsonResponse from django.contrib import auth # Create your views here. def login(request): 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 #user返回值 else: response["msg"] = "valid code error" else: response["msg"] = "valid code error" return JsonResponse(response) return render(request,"login.html") def index(request): return render(request,"index.html")
//登录验证 $(".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){ location.href="/index/" } else{ $(".error").text(data.msg).css({"color":"red", "margin-left":'10px'}) } } }) }) </script> </body> </html>
创建超级用户
C:\Users\Administrator\PycharmProjects\Django\cnblog>python manage.py createsuperuser
Username: kris
Email address:
Password:
Password (again):
Superuser created successfully.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>{{ request.user.username}}</h3> </body> </html>