Django框架登录验证及产生随机验证码的实例

1:views视图代码

# 登录验证

def login(request):

    # 使用ajax请求可以使用判断

    # if request.is_ajax():

    if request.method == 'POST':

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

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

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

        ret = {'status': False, 'msg': None}

        print(code)

        print(user, pwd)

        print(request.session.get('valid_code'))

        if request.session.get('valid_code').upper() == code.upper():

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

            if user:

                auth.login(request, user)

                ret['status'] = True

                ret['msg'] = '/index/'

            else:

                ret['msg'] = '用户名或密码错误'

        else:

            ret['msg'] = '验证码错误'

        return JsonResponse(ret)

    return render(request, 'login.html')

2:views视图中产生随机验证码

# 获取验证码

def get_valid_img(request):

    # 方法一

    # with open('hmbb.png','rb')as f:

    #     data = f.read()

    # 方法二

    import PIL

    from PIL import Image, ImageDraw, ImageFont

    import random

    # 获取随机颜色的函数

    def get_random_color():

        return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

    # 生成一个图片对象

    image = Image.new('RGB', (250, 40), get_random_color())

    # 将生成的图片保存在磁盘上

    # f = open('valid_code.png','wb')

    # image.save(f,'png')

    #

    # with open('valid_code.png','rb')as f:

    #     data = f.read()

    # 生成一个图片画笔对象

    draw_obj = ImageDraw.Draw(image)

    '''

    draw.text()   向image中写内容

    draw.line()   向image中画线

    draw.point()   向image中画点

    '''

    # 加载字体文件， 得到一个字体对象

    font_obj = ImageFont.truetype('static/font/kumo.ttf', 28)

    # 开始生成随机字符串并且写到图片上

    tmp_list = []

    for i in range(5):

        # 生成大写字母

        u = chr(random.randint(65, 90))

        # 生成小写字母

        l = chr(random.randint(97, 122))

        # 生成数字

        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)

    # 加干扰线

    # width = 220  # 图片宽度（防止越界）

    # height = 35

    # for i in range(5):

    #     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())

    code = ''.join(tmp_list)

    # 添加session键值对,产生全局变量获取验证码判断

    request.session['valid_code'] = code

    from io import BytesIO

    f = BytesIO()

    # 将生成的图片数据保存在io对象中

    image.save(f, 'png')

    # 从io对象里面取上一步保存的数据

    data = f.getvalue()

    f.close()

    return HttpResponse(data)

3:HTML中的代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>login</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">

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

            <form action="/login/" class="login-form" method="post">

                {% csrf_token %}

                <div class="form-group">

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

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

                </div>

                <div class="form-group">

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

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

                </div>

                <div class="form-group">

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

                    <div class="row">

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

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

                        </div>

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

                            <img width="" height="" id="valid_img" src="/get_valid_img/" alt="">

                        </div>

                    </div>

                </div>

                <div class="form-group">

                    <div class="row">

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

                         <button type="button" id="d1" class="btn btn-info">登录</button>

                         </div>

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

                        <span class="help-block login-error"></span>

                    </div>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

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

<script src="/static/bootstrap/js/bootstrap.min.js"></script>

{#<script src="/static/setupajax.js"></script>#}

4:ajax请求代码

　　1:ajax请求,返回响应并将错误添加页面

　　2:当input框获得焦点,移除错误信息

　　3:点击验证码,会重新请求获得验证码(刷新)

<script>

    $('#d1').on('click', function () {

        $.ajax({

            url: '/login/',

            type: 'post',

            data: {

                user: $('#username').val(),

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

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

                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()

            },

            success: function (data) {

                if (data.status) {

                    location.href = data.msg

                } else {

                    $(".login-error").text(data.msg)

                }

            }

        })

    });

    // 获得光标事件清空错误

    $("#username,#pwd").focus(function () {

        $('.login-error').text('')

    });

    // 刷新验证码

    $('#valid_img').click(function () {

        $(this)[0].src +='?';

    })

</script>

Django框架登录验证及产生随机验证码的实例的更多相关文章

django框架--登录注册功能（ajax）
注册实现一个注册功能编写 html 内容 input 标签 csrf_token ajax 路由视图: 提供页面负责处理业务,返回响应接收到 post 请求传递的参数写库返回 ...
Django学习系列之重写User模型和登录验证
重写User模型 Django内置的User模型可能不适合某些项目,我们可能要基于内置的添加一些字段创建users app startapp users 修改settings.py配置文件,覆盖默认 ...
ThinkPHP之登录验证
验证方面写的不是很完整,正在完善当中 <?php /** * Created by dreamcms. * User: Administrator * Date: 2016/9/5 * Time ...
Django之路 - 实现登录随机验证码
登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验 ...
Django登录(含随机生成图片验证码)注册实例
登录,生成随机图片验证码一.登录 - 随机生成图片验证码 1.随机生成验证码 Python随机生成图片验证码,需要使用PIL模块,安装方式如下: pip3 install pillow 1)创建图片 ...
Django之实现登录随机验证码
登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验 ...
python笔记-20 django进阶（model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）
一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...
Django框架之验证码生成示例
一.生成随机颜色的图片 1)前端代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
如何使用Django实现用户登录验证
最初开始搞用户登录验证的时候感觉没什么难的,不就是增删改查中的查询数据库么,但是还是遇到许多小问题,而且感觉在查询数据库的时候,要把前端的数据一条一条的进行比对,会导致我的代码很丑,而且方式很不智,所 ...

随机推荐

PHP1.9--数组
1.array_slice()函数作用是在数组中根据条件取出一段值并返回,如果数组有字符串键,所返回的数组将保留健名 array array_slice(array array ,int offset ...
PHP1.6--数组
一.数组的键值操作函数 1.array_values() 函数作用是返回数组中所有元素的值,只有一个参数,规定传人给定数组,返回一个包含给定数组中所有值的数组,但不保留键名被返回的数组将使用顺序的数 ...
Centos rpm 卸载
参考网址: http://blog.sina.com.cn/s/blog_7d12ba3f01014gxv.html
HTML5中的数据集dataset和自定义属性data-*
在html5中可为所有元素添加一种自定义的属性,这种属性的前缀以data-开头,比如:data-name,目的是为元素提供与页面渲染无关,但与dom元素强相关的属性.添加完自定义属性后我们可以通过元素 ...
WebBrowser修改默认白色背景
背景:在使用Winform的WebBrowser显示网页的时候,在网页还未加载完成之前会显示白色,刚好网页内容呈现黑色,这样视觉效果上就十分差,想把这层白色的去掉. 试了很久之后发现根本去不掉,应 ...
群晖安装transmission
首先需要添加第三方的套件下载地址 http://packages.synocommunity.com/ 然后找到tr 根据需要设置文件夹路径因为我需要跑rss,所以用到了flexget,先放这里 ...
python无法启动火狐浏览器且报错“selenium.common.exceptions.WebDriverException: Message: Unable to find a matching set of capabilities”
安装了python2,使用pip安装了selenium,但是在使用时,报了“selenium.common.exceptions.WebDriverException: Message: 'gecko ...
洛谷P1978 集合 [2017年6月计划数论08]
P1978 集合题目描述集合是数学中的一个概念,用通俗的话来讲就是:一大堆数在一起就构成了集合.集合有如下的特性: •无序性:任一个集合中,每个元素的地位都是相同的,元素之间是无序的. •互异性 ...
sublime3安装javascript控制台环境方法2
1.下载node.js sublimeText3- 安装nodejs插件 ctrl+shift+p — install package —nodejs 2.修改配置文件在 Sublie Text ...
web前端学习（二）html学习笔记部分（5）--拖放元素、canvas画布使用
1.2.11 拖放 1.2.11.1 html拖放 1.2.11.2 html拖放本次资源 showOjb(一个对象)展示一下一个对象的信息. 1.2.12 html画布(canvas) 标 ...

Django框架登录验证及产生随机验证码的实例

1:views视图代码

2:views视图中产生随机验证码

3:HTML中的代码

4:ajax请求代码

Django框架登录验证及产生随机验证码的实例的更多相关文章

随机推荐

热门专题