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. Ubuntu18.04 + win10双系统下时间问题

    Ubuntu 16.04使用systemd启动之后,时间也改成了由timedatectl来管理 解决的办法可以参考http://blog.sina.com.cn/s/blog_5379c55b0102 ...

  2. Centos 设置时区

    参考网址: http://jingyan.baidu.com/article/636f38bb268a82d6b84610bd.html //打开设置 tzselect //选择 )Asia → )c ...

  3. JavaScript--Map,ForEach遍历的比较

    /* forEach只会遍历,不会进行赋值 */ var sum = 0 ; dataArr.forEach(function (value,index,dataArr) { sum +=value. ...

  4. 【大数据】Hadoop常用启动命令

    Hadoop常用启停命令 最近在装大数据环境,不知由于年纪大的问题还是笨的缘故,老师记不住一些常用命令,在这里就单独记一下Hadoop常用的启停命令.Hadoop常用的启停命令都在hadoop/sbi ...

  5. js对象类型判断工具

    对象类型判断工具 /** *类功能:对象类型判断工具 **/ var TypeUtil = { /** *方法说明:是否是数组 **/ isArray: function (obj) {//是否是数组 ...

  6. SPFA(Bellman-Ford队列优化)

    原理:队列+松弛操作 将源点加入队尾,每一步读取队头顶点u,并将队头顶点u出队(记得消除标记):将与点u相连的所有点v进行松弛操作,如果能更新距离(即令d[v]变小),那么就更新,另外,如果点v没有在 ...

  7. Leetcode91.Decode Ways解码方法

    一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 给定一个只包含数字的非空字符串,请计算解码方法的总数. 示例 1 ...

  8. Leetcode64.Minimum Path Sum最小路径和

    给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [   [1,3,1], [1,5,1] ...

  9. Leetcode617.Merge Two Binary Trees合并二叉树

    给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否则不为 ...

  10. bzoj 1024 [SCOI2009]生日快乐——模拟

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1024 可以枚举这边放多少块.那边放多少块. 注意精度.不要每次用x*y/base算有多少块, ...