完成登录功能（四）
2018-06-13 本文已影响29人
Zhang_derek
首页和登录页面的配置
（1）把html文件中index.html拷贝到templates文件夹内
前端初始文件可以去我github上面下载：https://github.com/derek-zhang123/MxOnline
image
（2）新建static目录用来存放静态文件
在settings.py中设置路径
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
image
(3)引用静态文件
使用ctrl+f查找出所有“../”， 然后ctrl+r 全部替换为“/static/”
image
(4)配置静态文件的url
MxOnline/urls.py中
# MxOnline/urls.py
import xadmin
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path('xadmin/', xadmin.site.urls),
path('', TemplateView.as_view(template_name='index.html'),name='index'),
]
(5)登录页面
把login.html拷贝到templates文件夹下
使用ctrl+f查找出所有“../”， 然后ctrl+r 全部替换为“/static/”
配置login的url
# MxOnline/urls.py
urlpatterns = [
path('xadmin/', xadmin.site.urls),
path('', TemplateView.as_view(template_name='index.html'),name='index'),
path('login/', TemplateView.as_view(template_name='login.html'),name='login'),
]
更改index.html里面跳转到登录界面的url
原始样子
<!-- <a style="color:white" class="fr registerbtn" href="register.html">注册</a> -->
<!-- <a style="color:white" class="fr loginbtn" href="login.html">登录</a> -->
取消注释，将login.html改为“login/”
<a style="color:white" class="fr registerbtn" href="register.html">注册</a>
<a style="color:white" class="fr loginbtn" href="/login/">登录</a>
现在可以访问index页面，然后点‘’登录”,跳转到登录页面了
用户登录
（1）修改login的路由
from django.views.generic import TemplateView
from users import views
urlpatterns = [
path('xadmin/', xadmin.site.urls),
path('', TemplateView.as_view(template_name='index.html'),name='index'),
path('login/',views.user_login,name = 'login'), #修改login路由
]
（2）写login的视图
from django.shortcuts import render
from django.contrib.auth import authenticate,login
def user_login(request):
if request.method == 'POST':
# 获取用户提交的用户名和密码
user_name = request.POST.get('username',None)
pass_word = request.POST.get('password',None)
# 成功返回user对象,失败None
user = authenticate(username=user_name,password=pass_word)
# 如果不是null说明验证成功
if user is not None:
# 登录
login(request,user)
return render(request,'index.html')
else:
return render(request,'login.html',{'msg':'用户名或密码错误'})
elif request.method == 'GET':
return render(request,'login.html')
(3)更改login.html
image.png
如果用户登录错误，应该有提示错误信息，下面代码：
<div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div>
image.png
（4）修改index.html
原始index.html的代码
<div class=" header">
<div class="top">
<div class="wp">
<div class="fl"><p>服务电话：<b>33333333</b></p></div>
<!--登录后跳转-->
<a style="color:white" class="fr registerbtn" href="register.html">注册</a>
<a style="color:white" class="fr loginbtn" href="/login/">登录</a>
<div class="personal">
<dl class="user fr">
<dd>bobby<img class="down fr" src="/static/images/top_down.png"/></dd>
<dt><img width="20" height="20" src="/static/media/image/2016/12/default_big_14.png"/></dt>
</dl>
<div class="userdetail">
<dl>
<dt><img width="80" height="80" src="/static/media/image/2016/12/default_big_14.png"/></dt>
<dd>
<h2>django</h2>
<p>bobby</p>
</dd>
</dl>
<div class="btn">
<a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
<a class="fr" href="/logout/">退出</a>
</div>
</div>
</div>
</div>
</div>
我们应该做个验证，当用户已登录状态的时候，显示用户姓名和图像及其个人中心信息
如果没有登录，则显示登录和注册
更改代码如下：
image
（5）增加邮箱登录
让用户可以通过邮箱或者用户名都可以登录，用自定义authenticate方法
from django.contrib.auth.backends import ModelBackend
from .models import UserProfile
from django.db.models import Q
#邮箱和用户名都可以登录
# 基础ModelBackend类，因为它有authenticate方法
class CustomBackend(ModelBackend):
def authenticate(self, request, username=None, password=None, **kwargs):
try:
# 不希望用户存在两个，get只能有一个。两个是get失败的一种原因 Q为使用并集查询
user = UserProfile.objects.get(Q(username=username)|Q(email=username))
# django的后台中密码加密：所以不能password==password
# UserProfile继承的AbstractUser中有def check_password(self, raw_password):
if user.check_password(password):
return user
except Exception as e:
return None
MxOnline/settings.py添加如下代码：
AUTHENTICATION_BACKENDS = (
'users.views.CustomBackend',
)
用form实现登录
（1）把前面views中的user_login()函数改成基于类的形式
from django.views.generic.base import View
class LoginView(View):
def get(self,request):
return render(request, 'login.html')
def post(self,request):
# 获取用户提交的用户名和密码
user_name = request.POST.get('username', None)
pass_word = request.POST.get('password', None)
# 成功返回user对象,失败None
user = authenticate(username=user_name, password=pass_word)
# 如果不是null说明验证成功
if user is not None:
# 登录
login(request, user)
return render(request, 'index.html')
else:
return render(request, 'login.html', {'msg': '用户名或密码错误'})
基于类的urls配置
from users.views import LoginView
path('login/',LoginView.as_view(),name = 'login'),
（2）users下新建form.py文件
代码如下：
# users/forms.py
from django import forms
# 登录表单验证
class LoginForm(forms.Form):
# 用户名密码不能为空
username = forms.CharField(required=True)
password = forms.CharField(required=True,min_length=5)
（3）定义好forms后利用它来做验证，并完善错误提示信息
from .forms import LoginForm
class LoginView(View):
def get(self,request):
return render(request, 'login.html')
def post(self,request):
# 实例化
login_form = LoginForm(request.POST)
if login_form.is_valid():
# 获取用户提交的用户名和密码
user_name = request.POST.get('username', None)
pass_word = request.POST.get('password', None)
# 成功返回user对象,失败None
user = authenticate(username=user_name, password=pass_word)
# 如果不是null说明验证成功
if user is not None:
# 登录
login(request, user)
return render(request, 'index.html')
# 只有当用户名或密码不存在时，才返回错误信息到前端
else:
return render(request, 'login.html', {'msg': '用户名或密码错误','login_form':login_form})
# form.is_valid（）已经判断不合法了，所以这里不需要再返回错误信息到前端了
else:
return render(request,'login.html',{'login_form':login_form})
（4）完善login.html的错误提示信息
<div class="form-group marb20 {% if login_form.errors.username %}errorput{% endif %}">
<label>用 户 名</label>
<input name="username" id="account_l" type="text" placeholder="手机号/邮箱" />
</div>
<div class="form-group marb8 {% if login_form.errors.username %}errorput{% endif %}">
<label>密 码</label>
<input name="password" id="password_l" type="password" placeholder="请输入您的密码" />
</div>
<div class="error btns login-form-tips" id="jsLoginTips">
{% for key,error in login_form.errors.items %}
{{ error }}
{% endfor %}
{{ msg }}
</div>
主要修改两处
image
显示效果，当不输入用户名，密码小与五位数的时候的提示信息如下：
image
