一、生成随机颜色的图片

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. pta l2-8（最长对称字串）

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805067704549376 题意:求给定字符串的最长回文串的长 ...

  2. Unity3D研究院之设置自动旋转屏幕默认旋转方向

    如下图所示,在处理屏幕默认旋转方向的时候可以在这里进行选择,上下左右一共是4个方向. 策划的需求是游戏采用横屏,但是要求支持两个方向自动旋转,如下图所示,我的设置是这样的. Default Orien ...

  3. Python开发【第二篇】：Python基本数据类型

    运算符 设定:a=10,b=20 . 算数运算 2.比较运算 3.赋值运算 4.逻辑运算 5.成员运算 基本数据类型 1.数字 int(整型)     在32位机器上,整数的位数为32位,取值范围为- ...

  4. Qt的pro文件--项目配置的部分字段

    Qt项目配置的部分字段: 库: LIBS += -L /usr/local/lib -lpcap INCLUDEPATH += /usr/local/include/

  5. vue 使用a+ router.push的形式跳转时，地址栏不显示参数

    解决办法: a链接不要写href 属性

  6. sqlserver还原数据库失败，sql2008备份集中的数据库备份与现有的xxx数据库不同

    正常操作发现报标题错误,百度后解决思路如下(@参考文章)转到选项下面,勾选覆盖现有数据库即可

  7. 好文：javascript中的四种循环

    https://juejin.im/entry/5a1654e951882554b8373622?utm_medium=hao.caibaojian.com&utm_source=hao.ca ...

  8. css定位研究

    css的定位是很重要的一个知识点,要学会网页布局,一定要先把定位弄清楚,今天抽空整理一下这方面的知识. 1.块级元素和行内元素(内联元素) 块级元素:display值为block的元素就是块级元素,比 ...

  9. 高盛昂赛 算法题先写corner case

    [方法] 字写大点,先注释框架 链表:指针走就行了,最多是两个同时一起走. 两个链表求交点 //corner case if (headA == null || headB == null) { re ...

  10. 开机进入boot menu和application menu，无法开机

        1.开机点击F1进入到bios界面 2.进入Security—Secure Boot—Disabled 如果不修改Secure boot选项为Disabled,在光驱引导时可能会出现报错 3. ...