首页 > > 网页制作 > css >

django搭建BBS-登入&验证码的生成

2019-08-26 05:47:40来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

django搭建BBS-登入&验证码的生成

django搭建BBS-登入&验证码的生成

基于注册完成后

文件结构

  • app 接口
    • migrations
    • __inint__.py
    • admin.py 管理员页面注册表单用
    • apps.py
    • bbsform.py form组件相关设置
    • models.py 模型存放
    • tests.py
    • views.py 业务逻辑
  • avatar 图片文件存储
  • BBS 项目名称以及路由存放
    • __inint__.py
    • settings.py
    • urls.py
    • wsgi.py
  • static
    • bootstrap-3.3.7-dist bootstrap文件网上下载的
    • jquery-3.4.1.min.js jq文件
  • templates 页面文件存放

一.创建图片验证

1.路由

urls.py

from django.conf.urls import url
from django.contrib import admin
#主路由导入视图内函数
from app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^register/', views.register),
    url(r'^login/', views.login),
    url(r'^get_code/', views.get_code),
]

2.逻辑业务

views.py

from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse
#Image导入
#ImageDraw在图片上写字
#ImageFont 写字的格式
from PIL import Image,ImageDraw,ImageFont
import random
# 相当于把文件以byte格式存到内存中
from io import BytesIO

from django.contrib import auth

from app.bbsforms import Register
from app import models

from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.db.models import F





# Create your views here.
def register(request):
    if request.method=='GET':
        form=Register()
        return render(request,'register.html',{'form':form})
    elif request.is_ajax():
        response={'code':100,'msg':None}
        form = Register(request.POST)
        if form.is_valid():
            #校验通过的数据
            clean_data=form.cleaned_data
            #把re_pwd剔除
            clean_data.pop('re_pwd')
            #取出头像
            avatar=request.FILES.get('avatar')
            if avatar:
                #因为用的是FileField，只需要把文件对象赋值给avatar字段，自动做保存
                clean_data['avatar']=avatar
            user=models.UserInfo.objects.create_user(**clean_data)
            if user:
                response['msg'] = '创建成功'
            else:
                response['code'] = 103
                # 把校验不通过的数据返回
                response['msg'] = '创建失败'
        else:
            response['code']=101
            #把校验不通过的数据返回
            response['msg']=form.errors
            print(type(form.errors))
        return JsonResponse(response,safe=False)


def login(request):
    if request.method=='GET':
        return render(request,'login.html')


def get_code(request):
    if request.method == 'GET':
        img = Image.new('RGB', (350, 40), (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
        # 写文字
        # 生成一个字体对象
        font = ImageFont.truetype('/static/Gabriola.ttf', 34)
        # 调用方法，返回一个画板对象
        draw = ImageDraw.Draw(img)

        new_text =''
        # 生成随机8位数字
        for x_index in range(1, 8):
            num = chr(random.randint(48, 57))
            word = chr(random.randint(65, 90))
            word_1 = chr(random.randint(97, 122))
            text =random.choice((num, word, word_1))
            draw.text((x_index * 32, 0),text, font=font)
            new_text +=text

        # 加点线
        width = 320
        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.line((x1, y1, x2, y2), fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))

        for i in range(33):
            # 画点
            draw.point([random.randint(0, width), random.randint(0, height)], fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
            x = random.randint(0, width)
            y = random.randint(0, height)
            # 画弧形
            draw.arc((x, y, x + 4, y + 4), 0, 90, fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
        print(new_text)
        #存在session中
        request.session['code']=new_text
        #存内存
        f = BytesIO()
        img.save(f, 'png')
        return HttpResponse(f.getvalue())

3.网页

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'bootstrap.html' %}<--载入bootstrap-->
    <meta charset="UTF-8">
    <title>登入</title>
</head>
<body>
<div class="container-fluid center-block">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登陆</h1>
            <form action="">
                <div class="form-group">
                    <label for="id_name">用户名</label>
                    <input type="text" name="name" id="id_name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" name="pwd" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="id_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" name="code" id="id_code" class="form-control">
                        </div>
                        <div class="col-md-6" id="img">
                            <img src="/get_code/" height="40" width="350" class="img-code">
                        </div>
                    </div>
                </div>
                <input type="submit" value="提交" class="btn-success">
            </form>
        </div>
    </div>
</div>
</body>
{% include 'jq.html' %} <--载入jq-->
<script>  <--利用img标标签属性src发送改变后会自己去找-->
    $('.img-code').click(function () {
        var img_code_src = $(this).attr('src');
        img_code_src += '1';
        console.log(img_code_src);
        $(this).attr('src',img_code_src)
    })
</script>
</html>

二.账号信息进行验证

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'bootstrap.html' %}
    <meta charset="UTF-8">
    <title>登入</title>
</head>
<body>
<div class="container-fluid center-block">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            {% csrf_token %}
            <h1>登陆</h1>
            <form action="">
                <div class="form-group">
                    <label for="id_name">用户名</label>
                    <input type="text" name="name" id="id_name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" name="pwd" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="id_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" name="code" id="id_code" class="form-control">
                        </div>
                        <div class="col-md-6" id="img">
                            <img src="/get_code/" height="40" width="350" class="img-code">
                        </div>
                    </div>
                </div>
                <input type="button" value="提交" class="btn-success" id="up_data">
                <span style="color: red" id="msg"></span>
            </form>
        </div>
    </div>
</div>
</body>
{% include 'jq.html' %}
<script>
    $('.img-code').click(function () {
        var img_code_src = $(this).attr('src');
        img_code_src += '1';
        console.log(img_code_src);
        $(this).attr('src',img_code_src)
    })
</script>


<script>
    $('#up_data').click(function () {
        $.ajax({
            type:'post',
            url:'/login/',
            data:{'name':$('#id_name').val(),
                'pwd':$('#pwd').val(),
                'code':$('#id_code').val(),
                'csrfmiddlewaretoken':'{{csrf_token}}'
            },
            success:function (msg) {
                console.log(msg);
                $('#msg').text(msg);
                if (msg =='登入成功'){
                    console.log('sb');
                    window.location.replace('http://www.baidu.com');<--暂时先放百度-->
                }
            }
        })
    })
</script>
</html>

views.py

from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse
#Image导入
#ImageDraw在图片上写字
#ImageFont 写字的格式
from PIL import Image,ImageDraw,ImageFont
import random
# 相当于把文件以byte格式存到内存中
from io import BytesIO

from django.contrib import auth

from app.bbsforms import Register
from app import models

from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.db.models import F





# Create your views here.
def register(request):
    if request.method=='GET':
        form=Register()
        return render(request,'register.html',{'form':form})
    elif request.is_ajax():
        response={'code':100,'msg':None}
        form = Register(request.POST)
        if form.is_valid():
            #校验通过的数据
            clean_data=form.cleaned_data
            #把re_pwd剔除
            clean_data.pop('re_pwd')
            #取出头像
            avatar=request.FILES.get('avatar')
            if avatar:
                #因为用的是FileField，只需要把文件对象赋值给avatar字段，自动做保存
                clean_data['avatar']=avatar
            user=models.UserInfo.objects.create_user(**clean_data)
            if user:
                response['msg'] = '创建成功'
            else:
                response['code'] = 103
                # 把校验不通过的数据返回
                response['msg'] = '创建失败'
        else:
            response['code']=101
            #把校验不通过的数据返回
            response['msg']=form.errors
            print(type(form.errors))
        return JsonResponse(response,safe=False)


def login(request):
    if request.method=='GET':
        return render(request,'login.html')
    else:
        print(request.POST)
        user_name=request.POST.get('name')
        pwd=request.POST.get('pwd')
        code=request.POST.get('code')

        user=auth.authenticate(username=user_name,password=pwd)
        print(user)
        if request.session.get('code').upper() !=code.upper(): #忽略大小写
            return HttpResponse('验证码错误')
        elif not user:
            return HttpResponse('账号密码错误')
        else:
            return HttpResponse('登入成功')



def get_code(request):
    if request.method == 'GET':
        img = Image.new('RGB', (350, 40), (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
        # 写文字
        # 生成一个字体对象
        font = ImageFont.truetype('/static/Gabriola.ttf', 34)
        # 调用方法，返回一个画板对象
        draw = ImageDraw.Draw(img)

        new_text =''
        # 生成随机8位数字
        for x_index in range(1, 8):
            num = chr(random.randint(48, 57))
            word = chr(random.randint(65, 90))
            word_1 = chr(random.randint(97, 122))
            text =random.choice((num, word, word_1))
            draw.text((x_index * 32, 0),text, font=font)
            new_text +=text

        # 加点线
        width = 320
        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.line((x1, y1, x2, y2), fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))

        for i in range(33):
            # 画点
            draw.point([random.randint(0, width), random.randint(0, height)], fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
            x = random.randint(0, width)
            y = random.randint(0, height)
            # 画弧形
            draw.arc((x, y, x + 4, y + 4), 0, 90, fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
        print(new_text)
        #存在session中
        request.session['code']=new_text
        #存内存
        f = BytesIO()
        img.save(f, 'png')
        return HttpResponse(f.getvalue())

原文链接:https://www.cnblogs.com/pythonywy/p/11408318.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML5 WebSocket

下一篇：nodes.js详细安装

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签