一、生成随机颜色的图片

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. Android笔记：ContextMenu

    ContextMenu,称为上下文菜单,也就是长按界面不放,弹出的菜单.使用ContextMenu有三个步骤: (1)调用registerForContextMenu()方法,为视图注册上下文菜单: ...

  2. python字典设置初始值setdefault()与get()

    L = ['you','me','you','me','you','me','you'] D = {} for i in L: D[i] += 1 print(D) 执行以下代码会发生错误 Trace ...

  3. HDU_1024.MaxSumPlusPlus(基础DP + 滚动数组优化讲解)

    这道题打破了我常规的做题思路,因为这是我刚开始训练DP,感觉这道题目好晕眼呀,emm其实就是感觉自己是真的菜...... 为什么说打破了我的做题思路呢,因为我平时看题解都是在已经AC或者完全不懂的情况 ...

  4. 字符串 String 格式化 format

    String str=String.format("Hi,%s", "王力"); 保留两位数的整数: String str=String.format(&quo ...

  5. html5文件读取+按钮样式重置+文件内容预览

    FileReader读取文件详细介绍请访问:http://www.cnblogs.com/xyyt/p/9066882.html FileReader提供了如下方法: readAsArrayBuffe ...

  6. cookie与webStorage区别

  7. mysql系列(2)之 DDL语句

    1.创建数据库test1:create database test1; 2.查询系统中都存在哪些数据库:show databases; 3.选择数据库:use test1; 4.查看数据库中所有的表: ...

  8. GridView和DataFormatString 日期格式 精确小数点后位数

    如果DataFormatString无效,请添加属性 HtmlEncode = "false" --------------------------------------- Da ...

  9. 大话listview之设置item监听器无效大坑之一：item设了属性clickable

    今天一个listview设置item监听器居然没有作用: 看了半天,怀疑是item设置了这个属性, 于是删了,果然就可以了. 大坑 ...

  10. sqlServer数据库备份与还原——差异备份与还原

    1.差异备份 是完整备份的补充 备份自上次完整备份以来的数据变动的部分 2.备份过程: 在做差异备份之前需要先进行完整备份.完整备份的过程见:https://i.cnblogs.com/EditPos ...