在线教育平台实现登录功能（6）

（1）把html文件中index.html拷贝到templates文件夹内

（2）新建static目录用来存放静态文件，该文件与apps在同级目录。

在settings.py中设置路径

STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),
)

(3)引用静态文件

使用ctrl+f查找出所有“../”，然后ctrl+r 全部替换为“/static/”

修改：把login.html与index.html拷贝到templates文件夹下

(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'),
    path('login/', TemplateView.as_view(template_name='login.html'),name='login'),
]

更改index.html里面跳转到登录界面的url

将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

<form action="/login/" method="post" autocomplete="off">
                    <input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' />
                    <div class="form-group marb20 ">
                        <label>用 户 名</label>
                        <input name="username" id="account_l" type="text" placeholder="手机号/邮箱" />
                    </div>
                    <div class="form-group marb8 ">
                        <label>密     码</label>
                        <input name="password" id="password_l" type="password" placeholder="请输入您的密码" />
                    </div>
                    <div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div>
                     <div class="auto-box marb38">

                        <a class="fr" href="forgetpwd.html">忘记密码？</a>
                     </div>
                     <input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登录 > " />
                <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' />
                    {% csrf_token %}
                </form>

如果用户登录错误，应该有提示错误信息，下面代码：

<div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div>

（4）修改index.html

<div  class=" header">
             <div class="top">
                {% if request.user.is_authenticated %}
                <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>
                {% else %}
                <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>
                {% endif %}
            </div>

index.html

（5）增加邮箱登录

让用户可以通过邮箱或者用户名都可以登录，用自定义authenticate方法

这里是继承ModelBackend类来做的验证

# users/views.py

from django.shortcuts import render
from django.contrib.auth import authenticate,login

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

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')

users/views.py

users/views

MxOnline/settings.py添加如下代码：

AUTHENTICATION_BACKENDS = (
    'users.views.CustomBackend',
)

然后通过邮箱也可以实现登录了

在线教育平台实现登录功能（6）

用户登录：

猜你喜欢