Django 小實例S1 簡易學生選課管理系統 第4節——實現登錄頁面
點擊查看教程總目錄
作者自我介紹：b站小UP主，時常直播編程+紅警三，python1對1輔導老師。
本文涉及到的新的額外知識點：
template、view、urls、forms
沒有這部分基礎的讀者，建議一邊閱讀本文一邊查閱相關知識
這里推薦我的專欄：Django自學筆記 相關章節內容
0 添加用戶視圖(view)與模板(template)、設置urls
Django 采用了 MVT 的軟件設計模式，其中MVT分別指
- Model（模型） - 負責數據
- View（視圖）- 負責邏輯
- Template（模板）- 負責前端展示
我們在前面已經實現了模型（model）
這里要實現一個頁面，基本套路是
- 先完成模板(template) - 前端展示用
- 然后實現視圖(view) - 后端邏輯
- 設置好url - 設置url和view的對應關系
本文就是按照這個順序來組織代碼的
1 主頁面
本項目主頁面實際是一個選擇身份的頁面，點擊后跳轉到具體的身份登錄頁，整個頁面實現起來比較簡單
- A 首先添加模板(template)
這里由於主頁面和登錄頁面的背景是相同的，所以這兩個頁面可以使用共同的母版，這里先添加母版
在項目的template文件夾下，新建user文件夾，在其中添加background.html,內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
學生選課管理系統
</title>
</head>
<body>
<div class="main-container">
<div class="main-header">
<div class="main-title">學生選課管理系統</div>
<div class="sub-title">Student Course Management System</div>
{% block welcome_message %}
{% endblock %}
</div>
<div class="login-container">
{% block login_container %}
{% endblock %}
</div>
</div>
</body>
</html>
然后再添加login_home.html文件，內容如下
{% extends "user/background.html" %}
{% block login_container %}
<div class="login-kind student-login-button">
<a href="">學生登錄</a>
</div>
<div class="login-kind teacher-login-button">
<a href="">教師登錄</a>
</div>
{% endblock %}
- B 添加對應的視圖(view)方法
在./user/views.py中，添加方法
def home(request):
return render(request, "user/login_home.html")
- C 設置主頁的url
新建./user/urls.py代碼如下
from user import views
from django.urls import path
urlpatterns = [
path('login/', views.home, name="login"),
]
在./SSCMS/urls.py中添加user模塊的urls，
修改后的./SSCMS/urls.py代碼如下（原來的注釋建議保留，不保留也無所謂）
from django.urls import path, include
urlpatterns = [
path('user/', include("user.urls")),
]
此時運行項目，訪問http://127.0.0.1:8000/user/login/
效果如下
2 登錄頁面view實現
登錄需要表單來提交登錄信息（賬號和密碼），這里我們使用Django From
在user文件夾中新建forms.py， 添加以下代碼來實現老師和學生的登錄信息表單
from django import forms
from user.models import Student, Teacher
class StuLoginForm(forms.Form):
uid = forms.CharField(label='學號', max_length=10)
password = forms.CharField(label='密碼', max_length=30, widget=forms.PasswordInput)
class TeaLoginForm(forms.Form):
uid = forms.CharField(label='教職工號', max_length=10)
password = forms.CharField(label='密碼', max_length=30, widget=forms.PasswordInput)
- A 添加模板(template)
在項目的template/user文件夾下，添加login_detail.html:
{% extends "user/background.html" %}
{% block welcome_message %}
<div class="welcome-message">歡迎</div>
{% endblock %}
{% block login_container %}
{% if kind == "student" %}
<div class="login-kind-title">我是學生</div>
{% else %}
<div class="login-kind-title">我是老師</div>
{% endif %}
<div class = "form">
<form method="post">
{% csrf_token %}
{{form.as_p}}
<div class="submit-button">
<input type="submit" value="登錄"/>
<a href="">注冊</a>
</div>
</form>
<div class="return-button"><a href="{% url 'login' %}">返回上一頁</a></div>
</div>
{% endblock %}
- B 添加對應的視圖(view)方法
為了區分學生和老師，這里給該視圖添加了kind參數
kind必須為"teacher"或"student"，如果不是的話，就會返回一個文本標明這不是一個合適的kind。
所以需要在視圖中添加用於返回的文本，考慮到后續也會有一些其他文本。
這里建議把文本放在一個專門的py文件中，不僅方便修改和檢查，在以后如果要支持多語言也方便。
這里在項目下建立一個constants.py文件，存放相關的文本
先添加一個標明這是不支持的kind的文本
INVALID_KIND = "Invalid kind.kind should be student or teacher."
在./user/views.py中，添加方法
from django.http.response import HttpResponse
from constants import INVALID_KIND
from user.forms import StuLoginForm, TeaLoginForm
def login(request, *args, **kwargs):
if not kwargs or kwargs.get("kind", "") not in ["student", "teacher"]:
return HttpResponse(INVALID_KIND)
kind = kwargs["kind"]
context = {'kind': kind}
if request.method == 'POST':
if kind == "teacher":
form = TeaLoginForm(data=request.POST)
else:
form = StuLoginForm(data=request.POST)
if form.is_valid():
uid = form.cleaned_data["uid"]
temp_res = "hello, %s" % uid
return HttpResponse(temp_res)
else:
context['form'] = form
else:
if kind == "teacher":
form = TeaLoginForm()
else:
form = StuLoginForm()
context['form'] = form
return render(request, 'user/login_detail.html', context)
由於還沒有實現注冊功能，所以這里的登錄只先實現了各空殼，
填寫賬號密碼就先直接各個hello的相應
- C 設置主頁的url
在./user/urls.py中，給urlpatterns列表添加元素
path('login/<slug:kind>', views.login, name="login")
然后這個時候我們需要去更新下前面主頁的href，指向對應的學生老師登錄頁
更新后的login_home.html文件如下
{% extends "user/background.html" %}
{% block login_container %}
<div class="login-kind student-login-button">
<a href="{% url 'login' 'student' %}">學生登錄</a>
</div>
<div class="login-kind teacher-login-button">
<a href="{% url 'login' 'teacher' %}">教師登錄</a>
</div>
{% endblock %}
此時運行項目，訪問http://127.0.0.1:8000/user/login/
點擊我是學生，對應頁面效果：
隨便填個學號密碼（比如12345678）
點擊登錄后頁面：
到這里，一個簡陋的登錄頁面就算完成了