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. 在Ubuntu Server 14.04上源码安装Odoo 9.0

    1. 更新Ubuntu服务器软件源 sudo apt-get update #更新软件源 sudo apt-get dist-upgrade #更新软件包,自动查找依赖关系 sudo shutdown ...

  2. MaxCompute 最新特性介绍 | 2019大数据技术公开课第三季

    摘要:距离上一次MaxCompute新功能的线上发布已经过去了大约一个季度的时间,而在这一段时间里,MaxCompute不断地在增加新的功能和特性,比如参数化视图.UDF支持动态参数.支持分区裁剪.生 ...

  3. [Array]448. Find All Numbers Disappeared in an Array

    Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...

  4. 7 个令人兴奋的 JavaScript 新特性

    前言 一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4五个阶段,每个阶段提交至下一阶段都需要TC39审批通过.本文介绍这些新特性处于Stage 3或者Stage 4阶段,这 ...

  5. Java review-basic1

    1. Dependency Injection Answer: Any application is composed of many objects that collaborate with ea ...

  6. WPF绘图性能问题

    代码: /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWind ...

  7. 2019.9.19 csp-s模拟测试47 反思总结

    思路接近正解?都想到了?这都是借口呀. 没有用的,往前走吧. T1:Emotional Flutter 我的做法和题解不太一样,我把s放在最后考虑了. 因为出发以后步幅是一样的,所以每一个黑条可以ba ...

  8. Linux 下安装和使用 Redis

    系统: CentOS-7-1611 首先安装gcc 因为要make编译 参照官网 wget  下载包 解压  make 编译完成后会在src目录下生成几个可执行文件 然后执行:make install ...

  9. python实例 字符串

    比起C/C++,Python处理字符串的方式实在太让人感动了.把字符串当列表来用吧. #! /usr/bin/python word="abcdefg" a=word[2] pri ...

  10. JS方法大全

    方法:document.createElement(tagName) 说明:创建指定元素 方法:document.createTextNode(文本) 说明:创建文本节点 方法:_dom.append ...