实验环境:
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
这个页面很多的class可以不用搞清楚,因为是相关的css样式
1.最主要的是提交方法要 post 要和views里面的方法一样
2.还有就是input中的username和password的name要与后台还有form一致
3.我为什么在密码input写了两段
因为我不想要我的html页面被浏览器自动填充登陆表单,所以添加了第一行input password
这样就可以骗过浏览器的自动填充功能
方法出自知乎 怎么禁止自动填充浏览器记住的密码?