Django打造在線教育平臺_day_4：頁面（首頁、登陸）配置與登陸功能實現

時間 2019-11-20

標籤 django 打造在線教育平臺 day 頁面首頁登陸配置功能實現欄目 Python 简体版

原文原文鏈接

1、文件目錄分析css

MxOnline/urls.py:連接入口，關聯到對應的views.py中的一個類（函數），訪問的連接就對應一個類
templates：存放html文件夾
user(app)/adminx.py：後臺文件
user(app)/form.py：表單，用戶在瀏覽器上輸入提交，對數據的驗證工做以及輸入框的生成工做
user(app)/models.py：與數據庫操做相關，存入或者讀取數據時使用。
user(app)/views.py：處理用戶發出的請求，從urls.py中對應而來，經過渲染templates中的網頁能夠爲用戶顯示頁面內容。

2、配置首頁與登陸頁面html

一、把index.html（首頁）與login.html(登陸)文件複製到項目templates目錄下前端

三、在urls.py文件夾中配置index.html（首頁）與login.html(登陸)數據庫

from django.conf.urls import url
from django.views.generic import TemplateView
import xadmin

from users.views import LoginView
urlpatterns = [
    url(r'^$', TemplateView.as_view(template_name='index.html'), name='index'),  # 首頁
    url(r'^login/$', LoginView.as_view(), name='login'),  # 登陸頁面
]

四、在settings.py文件中配置靜態文件路徑django

#在文件最後添加
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),  #配置css\js\images\media文件路徑
)

#實現自定義登陸功能（用戶名和郵箱均可以登陸）
AUTHENTICATION_BACKENDS = (
    'users.views.CustomBackend',
)

五、修改index.htm與login.htmll文件:後端

<html>
    {% load staticfiles %} # 添加，讓連接修改起做用
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">  #修改前：../css/reset.css
　　<div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div> #修改css\js\images\media 
　　<form action= {%url 'index(login)'%}>
　　......
　　<div class= "{%if login_form.errors.username（password） %} errorput {%endif%}"></div> #輸入框錯誤高亮顯示
　　<div id="jsLoginTips">{% for key,error in login_form.errors.items%}{{ error }}{% endfor %}{{ msg }}</div> # 錯誤提示
　　{% csrf_token %} # 解決：禁止訪問，CSRF驗證失敗，相應中段的錯誤
　　</form>

{% if request.user.is_authenticated %} #登陸成功，顯示我的中心
　　<div class="personal">......</div>
{% else %} # 不然顯示登陸頁面
　　<a style="color:white" class="fr registerbtn"href="register.html">註冊</a>
　　<a style="color:white" class="fr loginbtn" href="{% url 'login' %}">登陸</a>
{% endif %}

</html>

2、登陸功能實現瀏覽器

一、功能分析app

　　表單輸入驗證form.py函數

　　後端驗證views.pypost

　　用戶名和郵箱登陸views.py

三、在form.py文件中實現表單輸入驗證

from django import forms

class LoginForm(forms.Form):
    """表單輸入預檢查功能（在連接數據庫以前）"""
    # username\password兩個變量與相應htmlform表單中的name要徹底同樣，否則功能無效
    username = forms.CharField(required=True)  # required=True輸入不能爲空
    password = forms.CharField(required=True, min_length=8)  # 最小長度8

四、在views.py文件中實現後端驗證與用戶（郵箱登陸）

from django.db.models import Q
from django.views.generic.base import View
from django.contrib.auth.hashers import make_password  # 對密碼加密模塊
from .models import UserProfile

class CustomBackend(ModelBackend):
    """自定義郵箱與帳戶登陸"""
    def authenticate(self, username=None, password=None, **kwargs):
        try:
            user = UserProfile.objects.get(Q(username=username)|Q(email=username))  # 用戶名與Email驗證
            if user.check_password(password):  # 驗證密碼
                return user
        except Exception as e:
            return None


class LoginView(View):
    """登陸功能"""
    def get(self, request):
        # get請求直接返回頁面
        return render(request, "login.html", {})

    def post(self, request):
        login_form = LoginForm(request.POST)
        if login_form.is_valid():
            # 輸入經過LoginForm驗證,連接數據庫驗證
            # 取用戶輸入值
            user_name = request.POST.get('username', '')
            pass_word = request.POST.get('password', '')

            # 向數據庫發起驗證請求用戶名和密碼是否正確
            # 正確會返回一個對象， 不正確會返回None
            user = authenticate(username=user_name, password=pass_word)
            if user is not None:
                # 數據庫匹配正確
                if user.is_active:  # 帳戶已激活
                    login(request, user)  # 調用登陸模塊
                    return render(request, 'index.html')
                else:
                    return render(request, "login.html", {'msg': "帳戶未激活，請到郵箱激活"})
            else:
                # 數據庫匹配不正確
                return render(request, "login.html", {'msg': "用戶名或者密碼錯誤"})
        else:
            # 輸入沒經過LoginForm驗證,返回錯誤緣由給前端
            return render(request, "login.html", {'login_form': login_form})