Django 小实例S1 简易学生选课管理系统 4 实现登录页面

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）
点击登录后页面：

到这里，一个简陋的登录页面就算完成了