验证码
我们在登陆网站的时候就会遇到验证码下面会写一个关于验证码的示列
先创建一个Django项目，做好准备工作
需要的环境为：
Django
login_img.html
kumo.ttf字体（可以在百度上下载）
bootstrap.min.css
还有一些依赖关系，有一些模块使用pip安装就好
viws.py的试图
from django.shortcuts import render, HttpResponse, redirect from django.contrib import auth from django.http import JsonResponse from PIL import Image, ImageDraw, ImageFont import random # Create your views here. # 生成随机的验证码图片，这个可以单独做一个模块模块里面 def get_valid_img(request): # 随机获取一个颜色代码(225, 255, 255)这种形式 def get_random_color(): return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255) # 创建一个画板对象 img_obj = Image.new('RGB', (220, 35), (255, 255, 255)) # 背景色为白色 # img_obj = Image.new('RGB', (220, 35), get_random_color()) # 背景色随机 # 创建一个画笔对象在画板对象上写字符 draw_obj = ImageDraw.Draw(img_obj) # 加载一个字体得到字体对象, 设置字体大小 font_obj = ImageFont.truetype("static/font/kumo.ttf", 28) # 开始生成随机字符串并且写到图片上 tmp_list = [] for i in range(5): u = chr(random.randint(65, 90)) # 生成大写字母, 根据大写字母在ascii中的位置转换 l = chr(random.randint(97, 122)) # 生成小写字母，根据小写字母在ascii中的位置转换 n = str(random.randint(0, 9)) # 生成数字，注意要转换成字符串类型 tmp = random.choice([u, l, n]) tmp_list.append(tmp) draw_obj.text((20 + 40 * i, 0), tmp, fill=get_random_color(), font=font_obj) # print(''.join(tmp_list)) # print('生成的验证码'.center(80, '=')) request.session["valid_code"] = ''.join(tmp_list) # 加干扰线 width = 220 # 图片宽度（防止越界） height = 35 for i in range(4): x1 = random.randint(0, width) x2 = random.randint(0, width) y1 = random.randint(0, height) y2 = random.randint(0, height) draw_obj.line((x1, y1, x2, y2), fill=get_random_color()) # 加干扰点 for i in range(40): draw_obj.point((random.randint(0, width), random.randint(0, height)), fill=get_random_color()) x = random.randint(0, width) y = random.randint(0, height) draw_obj.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color()) # 将生成的图片保存在磁盘上 # with open("s10.png", "wb") as f: # img_obj.save(f, "png") # 把刚才生成的图片返回给页面 # with open("s10.png", "rb") as f: # data = f.read() # 不需要在硬盘上保存文件，直接在内存中加载就可以 from io import BytesIO io_obj = BytesIO() # 将生成的图片数据保存在io对象中 img_obj.save(io_obj, "png") # 从io对象里面取上一步保存的数据 data = io_obj.getvalue() return HttpResponse(data) def login_img(request): ret = {'status': 0, 'msg': ''} if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') valid_code = request.POST.get('valid_code') if valid_code and valid_code.upper() == request.session.get("valid_code", "").upper(): user = auth.authenticate(username=username, password=password) if user: auth.login(request, user) ret['msg'] = '/index/' else: ret['status'] = 1 ret['msg'] = '用户名或密码错误' else: ret['status'] = 1 ret['msg'] = '验证码错误' return JsonResponse(ret) return render(request, 'login_img.html')
login_img.html
{#使用图形验证码#} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎登陆</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/mystyle.css"> </head> <body> <div class="container"> <div class="row"> <form class="form-horizontal col-md-6 col-md-offset-3 login-form"> {% csrf_token %} <div class="form-group"> <label for="login-username" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="login-username" name="username" placeholder="用户名"> </div> </div> <div class="form-group"> <label for="login-Password" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="login-Password" name="password" placeholder="密码"> </div> </div> <div class="form-group"> <label for="login-valid_code" class="col-sm-2 control-label">验证码</label> <div class="col-sm-10"> <input type="text" name="valid_code" id="login-valid_code"> <img id="valid-img" class="valid-img" src="/get_valid_img.png?" alt=""> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" class="btn btn-default" id="login-button">登陆</button> <span class="login-error"></span> </div> </div> </form> </div> </div> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script> $("#login-button").on("click", function () { // 获取用户名、密码和验证码 var username = $("#login-username").val(); var password = $("#login-Password").val(); var valid_code = $("#login-valid_code").val(); // Ajax发送请求 $.ajax({ url: '/login/', type: 'post', data: { 'username': username, 'password': password, 'valid_code': valid_code, 'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val() }, success: function (data) { if (data.status) { //登陆失败 $(".login-error").text(data.msg); } else { // 登陆成功 location.href = data.msg; } } }) }); // 当input框获取焦点时将之前的错误清空并且清空input里面的值 $("#login-username,#login-Password,#login-valid_code").focus(function () { // 将之前的错误清空 $(this).val(''); $(".login-error").text(""); }); // 点击验证码图片 刷新验证码 $("#valid-img").click(function () { $(this)[0].src += "?"; }) </script> </body> </html>
上面用到的mystyle.css样式为
.login-form { margin-top: 70px; } .valid-img { height: 35px; width: 220px; } .login-error { color: red; }
urls.py
from django.conf.urls import url from django.contrib import admin from blog import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^login_img/$', views.login_img, name='login_img'), url(r'^get_valid_img.png/', views.get_valid_img), url(r'^index/', views.index), ]
上面就是一个关于使用图片验证码的一个例子，我们其实可以把生成图片的功能封装起来。
上面我们在登陆验证密码的事有用到的是Django的自带的认证系统。
我们还可以使用网上提供的极速验证码，这个可以直接在百度上搜，他提供了几种验证方式。也有使用文档。
有兴趣的可以自己看看。