登陆界面开发前期准备和图片验证码介绍

登陆界面开发前期准备和图片验证码介绍

login.html

{% extends 'base.html' %}
{% load static %}
{% block body %}
<!-- 主体内容  -->

    <!-- 中间部分 start -->
    <div class="container">
        <!-- 主体内容 star  -->
        <div class="formbox">      
            <form action="/login/" method="post" id="form">{% csrf_token %}
                <h1 class="title">登录</h1>
                {{ errmsg }}
				<div class="item">
					<label for="mob">手机号</label>
                    <input type="mobile" name="mobile" placeholder="请输入手机号" id="mob">
                    <span class="haserror">{{ errmsg }}</span>
				</div>
				<div class="item clearfix">
                    <label for="pwd">登录密码</label>
                    <input type="password" name="password" placeholder="输入密码" id="pwd">
                    <span class="haserror"></span>
                    <a class="forget fr" href="#">{{ errmsg }}</a>
                </div>
				<div class="item flex">
					<input type="text" name="code" placeholder="请输入验证码" class="code" id="code">
					<a class="a_img" href="#"><img src="/code_img/" alt=""></a>
				</div>
				<div class="item">
					<button type="submit" name="submit" value="立即登录" id="login">立即登录</button>
                </div>
                
                <a class="forget fr" href="/register/">没有账号? 点击注册</a>
            </form>
        </div>
        <!-- 主体内容 end  -->
    </div>
    <!-- 中间部分 end -->
<!-- 主体内容  -->

    <!-- 网站页脚 start -->
{% endblock %}

views.py

def code_img(request):
    # 需要一张背景图
    # (189, 244, 9)  0-255    red green    #000fff
    width = 159
    height = 33
    bgcolor = (random.randrange(20, 200), random.randrange(20, 200), random.randrange(20, 200))
    im = Image.new('RGB', (width, height), color=bgcolor)

    # 需要一些噪点500
    draw = ImageDraw.Draw(im)  # 创建一个画笔对象
    for i in range(0, 500):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), random.randrange(0, 255), random.randrange(0, 255))
        draw.point(xy, fill=fill)

    # 需要4个数字
    str1 = '0123456789'
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]
    font = ImageFont.truetype('static/font/angsab.ttf', 23)

    fill = (random.randrange(0, 255), random.randrange(0, 255), random.randrange(0, 255))
    draw.text((5, 2), rand_str[0], font=font, fill=fill)
    draw.text((23, 5), rand_str[1], font=font, fill=fill)
    draw.text((59, 1), rand_str[2], font=font, fill=fill)
    draw.text((92, 5), rand_str[3], font=font, fill=fill)

    del draw
    request.session['code'] = rand_str
    buf = BytesIO()
    im.save(buf, 'png')
    return HttpResponse(buf.getvalue())