一、生成随机颜色的图片

1）前端代码展示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">

    <script src="/static/jquery-3.1.1.js"></script>

    <title>登录页面</title>

</head>

<body>

<div class="container-fluid">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <h1>登录</h1>

            <form>

                <div class="form-group">

                    <label for="">用户名</label>

                    <input type="text" id="id_name" class="form-control">

                </div>

                <div class="form-group">

                    <label for="">密码</label>

                    <input type="password" id="id_pwd" class="form-control">

                </div>

                <div class="form-group">

                    <label for="">验证码</label>

                    <div class="row">

                        <div class="col-lg-6">

                            <input type="text" id="code" class="form-control">

                        </div>

                        <div class="col-lg-6">

                            <img height="" width="" src="/get_code/" alt="">

                        </div>

                    </div>

                </div>

                <input type="button" value="登录" class="btn btn-danger">

            </form>

        </div>

    </div>

</div>

</body>

</html>

login.html

提交方式，基于ajax提交

2）生成随机颜色的图片

def get_random_color():

    '''生成随机颜色的图片'''

    import random

    return (random.randint(,),random.randint(,),random.randint(,))

get_random_color

3）验证码函数，写入图片，读取图片返回给前端

def get_code(request):

    from PIL import Image

    img = Image.new('RGB',(,),color=get_random_color())

    with open('code.png','wb') as f:    # 造成随机颜色的图片

        img.save(f)

    with open('code.png','rb') as f:    # 读取图片，给前端

        data=f.read()

    return HttpResponse(data)

get_code

二、在随机验证码图片内写入文字.（重点）

随机生成的验证码图片，保存于内存。图片内的文字保存于session（用于登录验证）

def get_code(request):

    from PIL import Image, ImageDraw, ImageFont

    from io import BytesIO  # 生成的验证码存放于内存

    import random

    img = Image.new("RGB", (, ), color=get_random_color())

    # (, ) 指定生成的图片的长度，高度

    draw = ImageDraw.Draw(img)

    # kumo.ttf 文字样式，网上下载ttf

    kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=)     # 引入字体

    valid_code_str = ""

    for i in range():

        random_num = str(random.randint(, ))  # 随机一个数字

        random_low_alpha = chr(random.randint(, )) # 随机一个小写字母

        random_upper_alpha = chr(random.randint(, ))    # 随机一个大写字母

        random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])     # 从上面的3个选择一个出来

        draw.text((i *  + , ), random_char, get_random_color(), font=kumo_font)   # (i *  + , ) 写字母的时候便宜

        # 保存验证码字符串

        valid_code_str += random_char

    print("valid_code_str", valid_code_str)

    f = BytesIO()   # 生成一个对象，保存于内存

    img.save(f, "png")  # 验证码图片保存于内存

    data = f.getvalue()

    request.session['code']=valid_code_str  # 验证码保存于session中

    return HttpResponse(data)

get_code

三、加入ajax请求登录

1）url视图函数

from django.conf.urls import url

from django.contrib import admin

from mybbs import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^login/', views.login),

    url(r'^get_code/', views.get_code),

]

url.py

2）login页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">

    <script src="/static/jquery-3.1.1.js"></script>

    <title>登录页面</title>

</head>

<body>

<div class="container-fluid">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <h1>登录</h1>

            <form>

                {% csrf_token %}

                <div class="form-group">

                    <label for="">用户名</label>

                    <input type="text" id="id_name" class="form-control">

                </div>

                <div class="form-group">

                    <label for="">密码</label>

                    <input type="password" id="id_pwd" class="form-control">

                </div>

                <div class="form-group">

                    <label for="">验证码</label>

                    <div class="row">

                        <div class="col-lg-6">

                            <input type="text" id="code" class="form-control">

                        </div>

                        <div class="col-lg-6">

                            <img height="35" width="250" src="/get_code/" alt="">

                        </div>

                    </div>

                </div>

                <input type="button" id="submit" value="登录" class="btn btn-danger">

            </form>

        </div>

    </div>

</div>

<script>

    $("#submit").click(function () {

        $.ajax({

            url: '/login/',

            type: 'post',

            data: {

                'name': $("#id_name").val(),

                'pwd': $("#id_pwd").val(),

                'code': $("#code").val(),

                'csrfmiddlewaretoken': '{{csrf_token}}'

            },

            success: function (data) {

                console.log(data)

            }

        })

    })

</script>

</body>

</html>

login.html

3）验证码相关函数

def get_random_color():

    '''生成随机颜色的图片'''

    import random

    return (random.randint(,),random.randint(,),random.randint(,))

def get_code(request):

    from PIL import Image, ImageDraw, ImageFont

    from io import BytesIO  # 生成的验证码存放于内存

    import random

    img = Image.new("RGB", (, ), color=get_random_color())

    # (, ) 指定生成的图片的长度，高度

    draw = ImageDraw.Draw(img)

    # kumo.ttf 文字样式，网上下载ttf

    kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=)     # 引入字体

    valid_code_str = ""

    for i in range():

        random_num = str(random.randint(, ))  # 随机一个数字

        random_low_alpha = chr(random.randint(, )) # 随机一个小写字母

        random_upper_alpha = chr(random.randint(, ))    # 随机一个大写字母

        random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])     # 从上面的3个选择一个出来

        draw.text((i *  + , ), random_char, get_random_color(), font=kumo_font)   # (i *  + , ) 写字母的时候便宜

        # 保存验证码字符串

        valid_code_str += random_char

    print("valid_code_str", valid_code_str)

    f = BytesIO()   # 生成一个对象，保存于内存

    img.save(f, "png")  # 验证码图片保存于内存

    data = f.getvalue()

    request.session['code']=valid_code_str  # 验证码保存于session中

    return HttpResponse(data)

验证码相关请求函数

4）login函数请求（判断ajax）

from django.contrib import auth

def login(request):

    if request.is_ajax():

        name=request.POST.get('name')

        pwd=request.POST.get('pwd')

        code=request.POST.get('code')

        if code.upper()== request.session['code'].upper():

            user=auth.authenticate(request,username=name,password=pwd)

            if user:

                return HttpResponse('ok')

            else:

                return HttpResponse('用户名或密码错误')

        else:

            return HttpResponse('验证码错误')

    return render(request,'login.html')

Views.login

Django框架之验证码生成示例的更多相关文章

  1. django框架介绍

    主要内容 1.        Django框架发展 2.        Django架构,MTV模式 3.        开发流程 4.        开发实例——Poll python下各种框架 一 ...

  2. django框架配置mysql数据库

    django配置mysql数据库: 1.首先更改django项目文件中的settings.py的数据库配置 DATABASES = { 'default': { 'ENGINE': 'django.d ...

  3. 开发工具类API调用的代码示例合集：六位图片验证码生成、四位图片验证码生成、简单验证码识别等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...

  4. web 框架的本质及自定义web框架 模板渲染jinja2 mvc 和 mtv框架 Django框架的下载安装 基于Django实现的一个简单示例

    Django基础一之web框架的本质 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于Django实现的一个简单 ...

  5. Django框架深入了解_05 (Django中的缓存、Django解决跨域流程(非简单请求，简单请求)、自动生成接口文档)

    一.Django中的缓存: 前戏: 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一 ...

  6. 第三百二十节，Django框架，生成二维码

    第三百二十节,Django框架,生成二维码 用Python来生成二维码,需要qrcode模块,qrcode模块依赖Image 模块,所以首先安装这两个模块 生成二维码保存图片在本地 import qr ...

  7. 框架----Django框架知识点整理

    一.cbv cbv(class-base-view) 基于类的视图 fbv(func-base-view) 基于函数的视图 a.基本演示 urlpatterns = [ url(r'^login.ht ...

  8. Django框架全面讲解

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  9. Django框架详细介绍---模型---ORM

    一.概述 ORM(Object Relational Mapping),全称:对象关系映射,简单的说就是通过创建类.实例化出对象的方法,使得类.对象.对象的属性能够和数据库中的表.记录.字段意义对应. ...

随机推荐

  1. 库的操作&表的操作

    一 库的操作 掌握库的增删改查 一.系统数据库 执行如下命令,查看系统库 show databases; information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数 ...

  2. c++中的类（class）-----笔记（类简介）

    1, class 和 struct 都可以定义一个类,区别是两者在所支持的 默认信息隐藏方式不同:c++ 中默认为 private 类型,而 struct 中默认为 public 类型. 2,类的私有 ...

  3. CentOS 下搭建Gitlab

    centos7安装部署gitlab服务器   我这里使用的是centos 7 64bit,我试过centos 6也是可以的! 1. 安装依赖软件 yum -y install policycoreut ...

  4. 理解Backtracking

    Backtracking is an algorithm for finding all solutions by exploring all potential candidates. If the ...

  5. day15 json，os，sys，hashlib

     序列化模块 import json # json 序列化模块 是所有语言通用的一种标准(数据转化格式). # str int bool dict list(tuple) None import pi ...

  6. Django xadmin 根据登录用户过滤数据

    在adminx.py文件对应的的class中添加如下代码: def queryset(self): qs = super(taskAdmin, self).queryset() if self.req ...

  7. ubuntu系统ssh遇到port 22:No route to host问题

    ssh遇到这个port 22:No route to host这个问题 检查防火墙状态 (iptables -L) 检查ssh状态 (ps -elf |grep ssh) 检查网络状态(换根网线)

  8. connot connect to mysql 10061

    根据我自己运行的情况,解决方法如下: 按windows+R, 输入services.msc查找服务,在服务与应用中找到MYsql服务,查看是否已启动.

  9. 如何查看Firefox中保存的登录密码

    问:以前使用Firefox浏览器登录一个论坛,并且临时申请了一个账号,在使用Firefox登录时选择让它记住密码了,后来,我忘记了那个论坛的密码,但是可以使用Firefox直接登录.现在能不能查看密码 ...

  10. C#中多线程的并行处理

    System.Threading.Tasks,在该命名空间下Task是主类,表示一个类的异步的并发的操作,创建并行代码的时候不一定要直接使用Task类,在某些情况下可以直接使用Parallel静态类( ...