一.目的
Django有自带的登录页面，但是的颜色和页面的样式不是特别的喜欢。因此，利用ace的登录页面（图1）来模仿做一个自己的登录页面（图2）。根据实际的应用需要，去掉了Remember Me、Or Login Using、以及register和forgot password等功能。确切的来说，就是该页面只有“登录/验证”功能。 
二.所用方法
和所有的Django方法一样，创建好models后，建立登录所需的数据库。
将修改好的模版文件放在app目录下的templates文件夹中，将ace的相关文件放在project目录下的static文件夹中，并在html模版中，css的引用路径改为static下的路径。
在app文件下创建form.py：
# -*- coding: utf-8 -*-
from django import forms
class UserForm(forms.Form):
username = forms.CharField(
required=True,
widget=forms.TextInput(
attrs={
‘placeholder‘: ‘Username‘,
}
)
)
password = forms.CharField(
required=True,
widget=forms.PasswordInput(
attrs={
‘placeholder‘: ‘Password‘,
}
)
)
def clean(self):
if not self.is_valid():
raise forms.ValidationError(u"用户名和密码为必填项")
else:
cleaned_data = super(UserForm, self).clean()
在app下创建views文件：
# -*- coding: utf-8 -*-
from django.shortcuts import render_to_response, RequestContext
from Login.models import UAVUser, UAVAuthority
from forms import UserForm
def uavlogin(request):
if request.method == ‘GET‘: #页面初次显示
form = UserForm()
return render_to_response(‘login.html‘, RequestContext(request, {‘form‘: form}))
else:
form = UserForm(request.POST) #页面提交数据
if form.is_valid():
username = request.POST.get(‘username‘)
password = request.POST.get(‘password‘)
UserJuage = UAVUser.objects.filter(name=username, passwd=password) #和数据内的数据比对，返回一个set数据
if UserJuage:
userauth = UserJuage[0].role #获取用户角色
userunit = UserJuage[0].unit #获取用户单位
return render_to_response(‘test.html‘, {‘username‘: username, ‘userauth‘: userauth, ‘userunit‘: userunit}, context_instance=RequestContext(request)) #将数据提交给test.html用于测试
else:
return render_to_response(‘login.html‘, RequestContext(request, {‘form‘: form, ‘password_is_wrong‘: True})) #如果比对不成功，返回一个错误提示password_is_wrong
else:
return render_to_response(‘login.html‘, RequestContext(request, {‘form‘: form})) #如果页面数据提交有问题，刷新页面
编辑login.html模版：
<div class="position-relative">
<div id="login-box" class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header blue lighter bigger">
<i class="icon-coffee green"></i>
请输入您的用户信息
</h4>
<div class="space-6"></div>
{% if password_is_wrong %}
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
用户名或密码错误,重新输入!
</div>
{% endif %}
<form method="post" action="{% url ‘login:uavlogin‘ %}">
{% csrf_token %}
<label class="block clearfix">
<span class="block center">
<i class="icon-user"></i>
{{ form.username }}
{{ form.username.errors }}
</span>
</label>
<label class="block clearfix">
<span class="block center">
<i class="icon-lock"></i>
{{ form.password }}
{{ form.password.errors }}
</span>
</label>
<div class="clearfix center">
<button type="submit" class="width-60 btn btn-sm btn-primary">
登 录
</button>
</div>
{# <fieldset>#}
{# <label class="block clearfix">#}
{# <span class="block input-icon input-icon-right">#}
{# <input type="text" name="username" class="form-control" placeholder="Username" />#}
{# <i class="icon-user"></i>#}
{# </span>#}
{# </label>#}
{##}
{# <label class="block clearfix">#}
{# <span class="block input-icon input-icon-right">#}
{# <input type="password" name="password" class="form-control" placeholder="Password" />#}
{# <i class="icon-lock"></i>#}
{# </span>#}
{# </label>#}
{##}
{# <div class="space"></div>#}
{##}
{# <div class="clearfix">#}
{# <button type="submit" class="width-100 pull-left btn btn-sm btn-primary">#}
{# 登 录#}
{# </button>#}
{# </div>#}
{##}
{# <div class="space-4"></div>#}
{# </fieldset>#}
</form>
</div><!-- /widget-main -->
<div class="toolbar clearfix">
<div style="width: 100%;">
<i class="icon-signal"></i>
注册或忘记密码，请逐级上报恢复。
</div>
</div>
</div><!-- /widget-body -->
</div><!-- /login-box -->
</div><!-- /position-relative -->
时间： 2024-07-30 22:20:55