【PythonDjango后台实例 第六章】Django实现简单的登陆验证功能

实验环境:

Python3.6.2

Django.1.9.12



--------------------------------------------

今天越看之前的登陆界面越觉得很丑....所以索性就把登陆界面给替换算了.

顺便再重温一下Django如何开发一个简单的登陆系统

这是之前的登陆界面






然后改成了现在的登陆界面






好看与否这就是仁者见仁智者见智的事情啦.

那么就说一下如何实现这个登陆过程的

既然要用到验证码,那就先安装

pip install django-simple-captcha 然后进入自己的工程项目的setting.py添加进去
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'static',
'monitor',
'users',
'xadmin',
'crispy_forms',
'captcha', # 验证码插件
'PIL',
'dj_pagination',
]然后在自己需要进行登陆的app下面新建一个form.py文件(建议命名forms.py,我这里按照form.py来)
建立一个forms,这里是form.py文件

from django import forms
from captcha.fields import CaptchaField

class UserForm(forms.Form):
username = forms.CharField(label='用户名', max_length=100, error_messages={"invalid": u'用户名错误'})
password = forms.CharField(label='密码', widget=forms.PasswordInput(), error_messages={"invalid": u'密码错误'})
captcha = CaptchaField(label='验证码', error_messages={"invalid": u'验证码错误'})

我就建立了三个对象,用户名/密码/验证码
form建立好了之后,就建立自己的页面数据处理后台文件,俗称视图文件,view.py

我的备注都写得很详细:

from django.shortcuts import render
from django.views.generic.base import View
from django.shortcuts import render_to_response
from django.http import HttpResponse, HttpResponseRedirect
from django.template import RequestContext
# from .form import LoginForm
from .form import UserForm
from .models import User

def login(request):
if request.method == 'POST': # 登陆的方式是POST提交,这里判断是POST后就开始处理前台的输入
login_form = UserForm(request.POST) # 接收到登陆发过来的请求
if login_form.is_valid(): # 如果这个表格有效，指的是验证码，先比对验证码

# 获取表单用户密码
username = login_form.cleaned_data['username'] # 读取表单返回的值并赋予username变量
password = login_form.cleaned_data['password'] # 上同

# 获取的表单数据与数据库进行比较
user = User.objects.filter(username__exact=username, password__exact=password)

if user:

# 比较成功，跳转index
response = HttpResponseRedirect('/index/')

# 将username写入浏览器cookie,失效时间为3600
response.set_cookie('username', username, 3600)
return response
else:

# 比较失败，还在login
return HttpResponseRedirect('/login/')
else:
login_form = UserForm() # 要求重新提交，这里还是指的是验证码

return render_to_response('login.html', {'login_form': login_form}, context_instance=RequestContext(request)) # 停留在登陆页面

后台的部分就快写完了
我们写一个url路由地址,来关联验证码和登陆后台处理方法

在工程文件的app里面添加:

url(r'captcha/', include('captcha.urls')),

url(r'login/', users.views.login, name='login'),其中login的url中的users是我的app名字,views是文件,login是方法
后台部分就完成了,我们就来到html页面

我只取相关的一小段,login.html

<!-- Start Sign In Form -->
<form method="post" class="fh5co-form animate-box" data-animate-effect="fadeInLeft">
{% csrf_token %}
<h2>Sign In / 用 户 登 陆</h2>
<div class="form-group">
<label for="username" class="sr-only">Username</label>
<input id="id_username" type="text" name="username" class="form-control" placeholder="输入您的用户名" autocomplete="off">
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" style="display:none">
<input id="id_password" type="password" name="password" class="form-control" placeholder="输入您的密码" autocomplete="off">

</div>
<div class="form-group">
{{ login_form.captcha }}
</div>

<div class="form-group">
<button type="submit" class="btn btn-primary">进入系统</button>
</div>
</form>
<!-- END Sign In Form -->

前端都写完了
这个页面很多的class可以不用搞清楚,因为是相关的css样式

1.最主要的是提交方法要 post 要和views里面的方法一样

2.还有就是input中的username和password的name要与后台还有form一致

3.我为什么在密码input写了两段

<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" style="display:none">
<input id="id_password" type="password"
4000
name="password" class="form-control" placeholder="输入您的密码" autocomplete="off">

</div>因为我不想要我的html页面被浏览器自动填充登陆表单,所以添加了第一行input password
这样就可以骗过浏览器的自动填充功能

方法出自知乎 怎么禁止自动填充浏览器记住的密码？