验证码 登录中应用

url路由:

#验证码
url(r'^v_code/$', views.v_code,name='v_code'),

sesting配置:

#权限设置
# 1. session设置
PERMISSION_SESSION_KEY = 'permissions'  #权限信息
MENU_SESSION_KEY = 'menus' #菜单信息
#2. 白名单设置
WHITE_URL_LIST = [
    r'^/login/$',
    r'^/logout/$',
    r'^/reg/$',
    r'^/admin/.*',  #这个后面用正则 .*  表示
    r'^/v_code/.*',  #验证码 --------------------------------- 此处添加
]

试图函数代码:

from PIL import Image,ImageDraw,ImageFont #验证码
import random #随机数

#颜色随机
def random_color():
    return random.randint(0,255),random.randint(0,255),random.randint(0,255)
#验证码
def v_code(request):
    # 创建一个随机颜色的图片对象
    img_obj=Image.new('RGB',(250,35),random_color())

    # 在该图片对象上生成一个画笔对象
    draw_obj=ImageDraw.Draw(img_obj)
    # 加载一个字体对象
    font_obj = ImageFont.truetype('static/font/kumo.ttf', 28)

    #创建随机数列表
    temp=[]
    for i in range(5):
        l=chr(random.randint(97,122)) #小写字母
        b=chr(random.randint(65,90)) #大写字母
        n=str(random.randint(0,9))
        # 从上面三个随机选一个
        t=random.choice([l,b,n])
        temp.append(t)
        #创建验证码
        draw_obj.text((i*45+35,0),t,fill=random_color(),font=font_obj)
    #加干扰线
    width=250 #图片宽度(防止越界)
    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=random_color())

    #记录到session中 变成字符串形式 upper就是大小写都可以
    request.session['v_code']=''.join(temp).upper()

    # 直接在内存中保存图片替代io操作
    from io import BytesIO
    f1=BytesIO()
    img_obj.save(f1,format='PNG')
    img_data=f1.getvalue()

    return HttpResponse(img_data,content_type='imsge/png')

# 登录界面
def login(request):
    ret=''
    if request.method=='POST':
        username=request.POST.get('username')
        password = request.POST.get('password')
        v_code=request.POST.get('v_code','').upper() #判断验证码 ----------------------------------此处
        if v_code==request.session.get('v_code'):
            #  判断密码对不对
            obj=auth.authenticate(request,username=username,password=password)
            if obj:
                # 记录登录状态
                auth.login(request,obj)
                ret=init_permission(request,obj)
                if ret:
                    return ret
                return redirect(reverse('page'))
            ret='用户名或密码错误'
        else:
            ret ='验证码错误'   
    return render(request,'login.html',{'ret':ret})

html中应用及js代码:

    <div class="login-center clearfix">
    <div class="login-center-img"><img src="{% static 'imgs/password.png' %}"></div>
    <div class="login-center-input">
        <input type="text" name="v_code" value="" placeholder="请输入验证码" onfocus="this.placeholder=''"
               onblur="this.placeholder='请输入验证码'">
        <div class="login-center-input-text">验证码</div>
    </div>
</div>


#此处为添加内存缓存图片
    <div style="text-align: center">
        <img src="{% url 'v_code' %}" alt="" id="v_code">
    </div>
#此处为js 代码 图片点击每次刷新
<script>

    img=document.getElementById('v_code');
    img.onclick=function () {
        img.src +='?'
    }
</script>