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框架登录验证及产生随机验证码的实例的更多相关文章

  1. django框架--登录注册功能（ajax）

    注册 实现一个注册功能 编写 html 内容 input 标签 csrf_token ajax 路由 视图: 提供页面 负责处理业务,返回响应 接收到   post   请求传递的参数 写库 返回   ...

  2. Django学习系列之重写User模型和登录验证

    重写User模型 Django内置的User模型可能不适合某些项目,我们可能要基于内置的添加一些字段 创建users app startapp users 修改settings.py配置文件,覆盖默认 ...

  3. ThinkPHP之登录验证

    验证方面写的不是很完整,正在完善当中 <?php /** * Created by dreamcms. * User: Administrator * Date: 2016/9/5 * Time ...

  4. Django之路 - 实现登录随机验证码

    登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到 应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验 ...

  5. Django登录(含随机生成图片验证码)注册实例

    登录,生成随机图片验证码 一.登录 - 随机生成图片验证码 1.随机生成验证码 Python随机生成图片验证码,需要使用PIL模块,安装方式如下: pip3 install pillow 1)创建图片 ...

  6. Django之实现登录随机验证码

    登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到 应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验 ...

  7. python笔记-20 django进阶 （model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）

    一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

  8. Django框架之验证码生成示例

    一.生成随机颜色的图片 1)前端代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. 如何使用Django实现用户登录验证

    最初开始搞用户登录验证的时候感觉没什么难的,不就是增删改查中的查询数据库么,但是还是遇到许多小问题,而且感觉在查询数据库的时候,要把前端的数据一条一条的进行比对,会导致我的代码很丑,而且方式很不智,所 ...

随机推荐

  1. ECS应用管理最佳实践

    前言 即使在CloudNative发展如火如荼的当下,ECS应用(直接将应用部署在ECS上,不使用容器)仍然占了相当大的比重,原因主要在于相对容器化应用,ECS应用由于不需要容器的运行时环境和类似K8 ...

  2. laravel-admin 自定义导出excel功能，并导出图片

    https://www.jianshu.com/p/91975f66427d 最近用laravel-admin在做一个小项目,其中用到了excel导出功能. 但是laravel-admin自带的导出功 ...

  3. Java review-design pattern

    Design Patterns (Factory, Abstract Factory, singleton, DAO, Proxy): 1. Factory: In Factory pattern, ...

  4. netbeans调试webapp 只能用localhost访问

    etbeans 我的电脑是192.168.0.2,用这个地址访问 网上有人说,分两种情况 此问题分两种情况: 1. 可以用127.0.0.1访问 2. 不能用127.0.0.1访问 针对第一种情况,我 ...

  5. git中的错误

    ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'git@gitee.co ...

  6. java-继承进阶_抽象类_接口

    概要图 一, 继承的进阶 1.1,成员变量 重点明确原理. 特殊情况: 子父类中定义了一模一样的成员变量. 都存在于子类对象中. 如何在子类中直接访问同名的父类中的变量呢? 通过关键字 super来完 ...

  7. MySQL与PostgreSQL比较 哪个数据库更好

    最后结论说的好,通常由团队成员的熟悉度来决定: PostgreSQL 的名字很少听到,最近试装发现不是很友好:官方文档写的对新手来说有点坑: 有数据库工作经验的直接看最后一句就可以. 如果打算为项目选 ...

  8. CentOS8/RHEL8--恢复root用户密码及简易加固GRUB

    CentOS8/RHEL8--简易加固GRUB 今天突然想到放在数据中心的虚拟化平台下的Linux服务器,都是采用默认方式安装的,没有设置太多的安全选项,如果有恶意用户重启服务器后,通过GRUB调整启 ...

  9. Linux C/C++开发

    首先就是要熟练在vim里面写代码,其实就是没有提示和自动补全了,这个问题并不大. 我服务器gcc版本是4.8.5,所以就按照这个来了 https://gcc.gnu.org/onlinedocs/gc ...

  10. Web学习之跨域问题及解决方案

    在做前端开发时,我们时常使用ajax与服务器通信获取资源,享受ajax便利的同时,也知道它有限制:跨域安全限制,即同源策略. 同源策略(SOP),核心是确保不同源提供的文件之间是相互独立的 默认情况下 ...