一、生成随机颜色的图片

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. vue / js使用video获取视频时长

    项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: 没 ...

  2. 第十章 优先级队列 (a1)需求与动机

  3. 筛素数 poj 2739

    题目链接:https://vjudge.net/problem/POJ-2739 输入一个数字n,判断有没有一段连续的素数之和大于n,如果有,计算总共有几种. 思路:用素数筛法求出10000以内的素数 ...

  4. 今天清理C盘空间，发现Unity的一个问题

    C:\Users\Acer\AppData\LocalLow\Unity\Caches\GiCache AppData目录下,Unity占用了大量C盘空间,大概有5,6个G

  5. 微信小程序开发——活动规则类文案文件读取及自动转换为小程序排版代码

    前言: 最近做的小程序活动规则内容比较多,且一直处于修改中.由于小程序并不支持类似Html5中的预排版,所以,活动规则内容修改较大的时候,仍需要对新的内容用小程序的<text>组件做下排版 ...

  6. [codeforces_597B] Restaurant(贪心)

    题目链接 http://codeforces.com/problemset/problem/597/B 题意 输入:区间数目n.及n个区间的起止(左闭右闭). 输出:最多不重叠的区间有多少个. 思路 ...

  7. shell 脚本编写基础

    在进行Linux测试时编写脚本是必不可少的,Shell脚本的名称可以随便定义,也不要什么后缀名,例如可以写abc,smartzip这类名称,运行时只要键入 ./smartzip就能运行脚本了.. 每行 ...

  8. python 常库介绍及安装方法

    bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheetahcherrypy:一个WEB frameworkctypes:用来调用动态链接库DBUtils:数 ...

  9. 对于devexpress gridview 内插图加加进度条等的一点解读

    如上图,gategory 加了小图标, 其他行内还有计算器,大图片   进度条等 using System; using System.Drawing; using System.Collection ...

  10. 分析入口文件main.php

    在分析之前,需要了解php cli模式下的编程 1.了解getopt函数,php手册地址:http://php.net/manual/zh/function.getopt.php static pri ...