前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <script src="/static/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body> <div class="container-fluid box"> <h1></h1> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Loging</h3> </div> <div class="panel-body"> {# label for="name" 如果指定某个id,这样点击这个label,焦点会到对应的控件上 #} <form> {% csrf_token %} <div class="form-group"> <label for="name">用户名</label> <input type="text" id="name" 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="valid_code">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text" id="valid_code" class="form-control"> </div> <img height="35" width="260" src="/get_valid_code/" alt=""> </div> </div> {# <input type="button" value="登录" class="btn btn-primary pull-right" id="btn">#} </form> <input type="button" value="登录" class="btn btn-primary pull-right" id="btn"> </div> </div> </div> </div> </div> </body> <script> $('#btn').hover(function () { var valid_code = $('#valid_code').val(); if (valid_code.length == 0) { alert('验证码不能为空') } else { $('#btn').click(function () { var user_info = { 'name': $('#name').val(), 'pwd': $('#pwd').val(), 'valid_code': $('#valid_code').val(), 'csrfmiddlewaretoken': $("[name = 'csrfmiddlewaretoken']").val(), {#'csrfmiddlewaretoken': '{{ csrf_token }}',#} --csrf_token的第二种写法 }; {#var pos = JSON.stringify(user_info);#} var pos = user_info; $.ajax({ url: '/login/', type: 'post', data: pos, success: function (data) { if (data==200){ window.location.href = "/index/" }else { alert(data) } } }) }); } }) </script> </html>
后台代码
import random from PIL import Image, ImageDraw, ImageFont from io import BytesIO import json def get_random_color(): return ( random.randint(0, 255), random.randint(0, 255), random.randint(0, 255) ) def get_random_code(): code = '' for i in range(5): num = random.randint(0, 9) # 0到9的随机数 upper_num = random.randint(65, 90) # 大写字母a-z对应的ASCII码 lower_num = random.randint(97, 122) # 小写字母a-z对应的ASCII码 upper_letter = chr(upper_num) lower_letter = chr(lower_num) code_list = [num, upper_letter, lower_letter] x = random.sample(code_list, 1)[0] # 随机生成一个字符串 code += str(x) return code verification_code = get_random_code() def get_valid_code(request): img = Image.new('RGB', (320, 35), color=get_random_color()) img_draw = ImageDraw.Draw(img) font = ImageFont.truetype('static/font/ss.TTF', size=25) img_draw.text((100, 0), verification_code, get_random_color(), font=font) f = BytesIO() img.save(f, 'png') data = f.getvalue() return HttpResponse(data) def login(request): if request.method == "GET": return render(request, 'login.html') elif request.method == 'POST': name = request.POST.get('name') pwd = request.POST.get('pwd') valid_code = request.POST.get('valid_code') print(verification_code) print(name, pwd, valid_code) if valid_code.lower() == verification_code.lower(): if name == 'zjh' and pwd == '123': return HttpResponse(200) return HttpResponse('用户或密码错误') return HttpResponse('验证码错误')
-----https://www.cnblogs.com/seven-007/p/8034043.html