BBS项目登录界面代码详解

forms

from django import forms


# 创建form类
class LoginInfo(forms.Form):
    # 创建账号字段
    username = forms.CharField(
        #默认名称
        label="用户名",
        #错误提示
        error_messages={
            #不能为空
            "required":"用户名不能为空"
        },
        #widget方法调用，可以定义类
        widget=forms.widgets.TextInput(attrs={"class":"form-control"})

    )

    # 创建密码字段
    password = forms.CharField(
        # 默认名称
        label="密码",
        # 错误提示
        error_messages={
            # 不能为空
            "required": "密码不能为空"
        },
        # widget方法调用，可以定义类
        widget=forms.widgets.PasswordInput(attrs={"class": "form-control"})

    )

———————————————————————————————————————————————————————————————————————————————

views

from django.shortcuts import render,HttpResponse
from bolg import forms
from django.contrib import auth
from django.http import JsonResponse


# Create your views here.


def login(request):
    # 创建LoginInfo对象
    login_obj = forms.LoginInfo()
    # 判断是否是POST数据
    if request.method == "POST":
        # 用于传参判断
        ret = {'code': 0}
        # 提取账号密码和验证码
        username = request.POST.get('id_username')
        password = request.POST.get('id_password')
        print(username)
        v_code = request.POST.get('v_code')
        print(v_code)
        # 判断验证码是否正确，从session中提取
        if v_code.upper() == request.session.get('v_code'):
            # 用authenticate判断账户密码
            user = auth.authenticate(username=username, password=password)
            # 判断是否有此用户
            if user:
                # 有的话转入登录后页面
                ret['data'] = '/index/'
            else:
                # 用户错误，传递错误信息
                ret['code'] = 1
                ret['data'] = "用户名或密码错误"
        else:
            # 验证码错误传递错误信息
            ret['code'] = 1
            ret['data'] = "验证码错误"

        print(ret)
        return JsonResponse(ret)

    return render(request, 'login.html', {'login_obj': login_obj})


def v_code(request):
    # PIL 生成图片模块
    # Image 生成图片对象
    # ImageDraw 生成画笔对象
    # ImageFont 生成文字对象
    from PIL import Image, ImageDraw, ImageFont
    # 随机数类
    import random

    # 定义一个生成随机数颜色的方法
    def get_color():
        return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

    # 定义生成图片对象
    img_obj = Image.new(
        "RGB",  # 图片类型
        (250, 35),  # 图片大小
        color=get_color()  # 图片色彩
    )

    # 定义生成画笔对象
    # Draw生成img_obj的画笔对象
    draw_obj = ImageDraw.Draw(img_obj)

    # 定义生成字体对象
    # truetype 生成字体对象，后面参数，字体文件路径，字体大小
    font_obj = ImageFont.truetype('static/font/kumo.ttf', size=28)

    # 存放随机数
    tem_list = []

    # 产生随机字体
    for i in range(5):
        # 获取随机数，限定为数字0-9，大小写字母
        # 把得到的数字转为字符串
        a = str(random.randint(0, 9))
        # 把得到的数字转为asc编码值
        b = chr(random.randint(97, 122))
        c = chr(random.randint(65, 90))
        # 3个随机数取其一
        r = random.choice([a, b, c])

        # 画笔对象对图片中的字体进行修改
        draw_obj.text(
            (i * 48 + 20, 0),  # 字体在图片中的位置
            r,  # 上面随机数得到的文字内容
            get_color(),  # 字体颜色
            font=font_obj  # 字体样式
        )

        # 把穗子字体放入字体列表中
        tem_list.append(r)

    #用join将列表转为字符串
    code_str=''.join(tem_list)

    #把字符串转为小写，在放入session中
    request.session['v_code']=code_str.upper()

    from io import BytesIO
    #生成IO对象
    tem=BytesIO()
    #把图片对象以png格式放到tem对象中
    img_obj.save(tem,'png')

    #取出tem中的值
    data=tem.getvalue()

    # content_type 以什么类型和编码读取，这里设置的图片类型
    return HttpResponse(data, content_type="image/png")

def index(request):
    return render(request,'index.html')

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            {#                面板开始#}
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">BBS登录界面</h3>
                </div>
                <div class="panel-body">
                    {#                    登录界面开始#}

                    <form>
                        <div class="form-group">
                            <label for="{{ login_obj.username.id_for_label }}">{{ login_obj.username.label }}</label>
                            {{ login_obj.username }}
                        </div>
                        <div class="form-group">
                            <label for="{{ login_obj.password.id_for_label }}">{{ login_obj.password.label }}</label>
                            {{ login_obj.password }}
                        </div>
                        <div id="v-code-wrapper" class="form-group">
                            <label for="">验证码</label>
                            <input  type="text" class="form-control" id="v-code-input">
                            <img id="v_code" src="/v_code/" alt="">
                        </div>

                        <button type="button" class="btn btn-default btn-primary" id="button_denglu">登陆</button>
                        <span id="cuo" class="error"></span>
                    </form>
                    {#                    登录界面结束#}

                </div>
            </div>
            {#                面板结束#}

        </div>
    </div>
</div>

<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="/static/setupAjax.js"></script>

<script>
    $('#button_denglu').click(function () {
        $.ajax(
            {
                url: "/login/",
                type: "POST",
                data: {
                    "id_username": $('#id_username').val(),
                    "id_password": $('#id_password').val(),
                    "v_code": $('#v-code-input').val()
                },
                success: function (data) {
                    if (data.code) {
                        $('.error').text(data.data)
                    } else {
                        location.href = data.data
                    }
                }
            }
        )
    });
    $('form input').focus(function () {
        $('.error').text("")
    });

    $('#v_code').click(function () {
        this.src += '?'
    })
</script>

</body>
</html>

BBS项目 登录界面代码详解

猜你喜欢

BBS项目登录界面代码详解