django-验证码

最新推荐文章于 2024-04-09 10:00:00 发布

鲸鱼编程pyhui

最新推荐文章于 2024-04-09 10:00:00 发布

阅读量792

点赞数 3

本文链接：https://blog.csdn.net/ifubing/article/details/100716927

版权

参考资料

Django 2.1.7 模板 - 图片验证码的实现 - 云+社区 - 腾讯云
https://cloud.tencent.com/developer/article/1455075

安装Pillow

pip install pillow

Pillow 5.4.1

在这里插入图片描述

验证码的使用

from django.shortcuts import render, redirect, HttpResponse

# 验证码所需
# 验证码
from PIL import Image, ImageDraw, ImageFont
from django.utils.six import BytesIO
import os

from dj2019 import settings # 引入项目配置，用于拼接字体的全路径

def verifycode(request):
    # 引入随机函数模块
    import random
    # 定义变量，用于画面的背景色、宽、高
    bgcolor = (random.randrange(20, 100), random.randrange(
        20, 100), 255)
    width = 100
    height = 25
    # 创建画面对象
    im = Image.new('RGB', (width, height), bgcolor)
    # 创建画笔对象
    draw = ImageDraw.Draw(im)
    # 调用画笔的point()函数绘制噪点
    for i in range(0, 100):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
        draw.point(xy, fill=fill)
    # 定义验证码的备选值
    str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
    # 随机选取4个值作为验证码
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]
    # 构造字体对象
    FONT_PATH = os.path.join(settings.BASE_DIR, 'static/font/simhei.ttf')  # 字体文件路径
    font = ImageFont.truetype(FONT_PATH, 23)
    # 构造字体颜色
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    # 绘制4个字
    draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
    draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
    draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
    draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
    # 释放画笔
    del draw
    # 存入session，用于做进一步验证
    request.session['verifycode'] = rand_str
    # 内存文件操作
    buf = BytesIO()
    # 将图片保存在内存中，文件类型为png
    im.save(buf, 'png')
    # 将内存中的图片数据返回给客户端，MIME类型为图片png
    return HttpResponse(buf.getvalue(), 'image/png')
# # Create your views here.
# def identifying_code(request):
#
#     return render(request, "appone/identifying_code.html")

验证码的效果

在这里插入图片描述

应用到网站中

》写一个文本框，后面根验证码

》提交文本框的内容，比对验证码

》视图函数

def testcode(request):
    if request.GET:
        # 如果有参数，表示提交
        verifycode = request.GET.get("verifycode")
        sescode = request.session.get("verifycode")

        if verifycode.upper() == sescode.upper():
            return HttpResponse("{}验证成功".format(verifycode))
        else:
            return HttpResponse("{}验证失败".format(verifycode))
    else:
        # 没有参数，表示进入该页面
        return render(request, "testcode.html")

》模板页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form action="">
    <input type="text" name="verifycode"> <img src="{% url "one:verifycode" %}" alt="验证码">
    <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

》界面效果

在这里插入图片描述

作业

》实现验证码的视图

》输入数据，后端验证

》实现点击验证码，自动更新的效果

》注册功能，加上验证码

》登陆的功能，加上验证码

点击图片刷新验证码

》前端代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(main);
        function main() {
            {#拿到图片标签#}
            $("#verify_img").click(function () {
            {#让图标标签重橷加载一次#}
            {#方法二种#}
            {#1，简单的，给图片标签的src属性，重新赋值#}
                var src = $("#verify_img").attr("src");
                {#alert(src);#}
                var new_src = src+'?'+Math.random()
                alert(new_src)
                $("#verify_img").attr("src", new_src);

            {#2，麻烦的，发起ajax请求，请求验证码的视图函数，返回值给src#}
        });

        }


    </script>
</head>
<body>
<form action="">
    <input type="text" name="verifycode"> <img id="verify_img" src="{% url "one:verifycode" %}" alt="验证码">
    <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

鲸鱼编程pyhui

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
django-验证码

参考资料Django 2.1.7 模板 - 图片验证码的实现 - 云+社区 - 腾讯云https://cloud.tencent.com/developer/article/1455075验证码的使用from django.shortcuts import render, redirect, HttpResponse# 验证码所需# 验证码from PIL import Image...
复制链接

扫一扫