【从零开始开发一个线上网课系统-01】账号登录及退出登录功能开发

news2024/12/29 11:03:57

文章目录

- 1 视图层开发
- 2 form表单验证
- 3 配置urls.py
- 4 模板层开发

实际上在系统开发的博客中应该先描述数据库设计，但由于设计的表比较多，其理解简单，但撰写和描述较为麻烦，所以我以可视化方式来呈现这些数据表以及其中的关系，这其中包含了django内置的数据表、xadmin内置的数据表、自定义的数据表以及重写的django内置数据表，他们之间的关系如下：

1 视图层开发

整个视图层使用基于类的视图开发。
账号登录功能开发步骤如下：

GET方式访问该URL时，使用django内置参数is_authenticated，判断用户是否已经登陆过（检查cookies），若已登录则跳转至首页，反之跳转到登录界面；
POST方式访问时，按照如下步骤进行：
- 使用django内置的form表单模块，验证数据是否有效，并获取表单数据，若数据无效则返回登陆页面；
- 若表单数据不为空则使用django内置authenticate函数判断用户是否存在于数据库中；
  
  这里之所以使用django内置authenticate函数，而不使用user.objects.filter(username=username)的原因是：
  - 若只检查用户名或密码并不能完全查询到该用户；
  - 若同时验证用户名和密码，数据库中存储的密码为密文，用户输入的是明文，要经过一次加密才能验证，编码复杂；
- 若查询到用户，则使用django内置的login()函数登录并使用HttpResponseRedirect()函数重定向到index界面，否则使用render()函数返回登陆页面，并回传错误信息和错误数据。

退出登录仅需要调用内置的logout()函数并重定向到主页（index.html）即可。

from django.shortcuts import render
from django.views.generic.base import View
from django.contrib.auth import authenticate, login, logout
from django.http import HttpResponseRedirect
from django.urls import reverse

from apps.operations.models import UserProfile
from apps.users.forms import LoginForm, DynamicLoginForm, RegisterGetForm, RegisterPostForm


class LogoutView(View):
    def get(self, request, *args, **kwargs):
        logout(request)
        return HttpResponseRedirect(reverse("index"))


class LoginView(View):
    def get(self, request, *args, **kwargs):
        if request.user.is_authenticated:
            return HttpResponseRedirect(reverse("index"))
        return render(request, "login.html")

    def post(self, request, *args, **kwargs):
        login_form = LoginForm(request.POST)  # 创建表单用于验证数据以及获取数据
        if login_form.is_valid():
            user_name = login_form.cleaned_data["username"]
            password = login_form.cleaned_data["password"]

            # 表单验证
            if not user_name:
                return render(request, "login.html", {"msg": "请输入用户名"})
            if not password:
                return render(request, "login.html", {"msg": "请输入密码"})
            
            # 用户查询（通过用户名和加密后的密码）
            user = authenticate(username=user_name, password=password)
            if user is not None:
                login(request, user)
                # 重定向url，调用reverse函数通过urlname来反向解析url
                return HttpResponseRedirect(reverse("index"))
            else:
                return render(request, "login.html", {"msg": "用户名或密码错误", "login_form": login_form})
        else:
            return render(request, "login.html", {"login_form": login_form})

2 form表单验证

django中自带form表单验证模块，我们只需要在forms.py文件中规定表单字段，然后在视图层中创建该表单对象并使用模块内置的is_valid()函数验证即可，验证中会若出现错误信息会放在form.errors对象中。例如：password小于6个字符，就会在form.errors.password对应的信息中提示该错误，模板层开发中会使用该参数。更多高级操作会在后续的功能开发中使用到。

注意：变量名必须与前端输入框的<name>标签保持一致。

from django import forms


class LoginForm(forms.Form):
    """
    实现表单验证功能
    """
    username=forms.CharField(required=True, min_length=2)
    password=forms.CharField(required=True, min_length=6)

3 配置urls.py

注意：配置urls时需要设置name参数，后续前端界面配置url跳转时会使用到该参数。

from apps.users.views import LoginView, LogoutView
urlpatterns = [
    path('login/', LoginView.as_view(), name="login"),  # 当前app的专属urls配置文件
    path('logout/', LogoutView.as_view(), name="logout"),
]

4 模板层开发

配置form表单提交方式为POST：method="post"；配置form表单向登录url提交数据：action="{% url 'login' %}"，login是urls.py配置中所设置的name参数，对应url：http://127.0.0.1:8000/login/。
根据form表单验证中的报错信息高亮标注报错数据对应的输入框：在<input>标签的class属性中添加{% if login_form.errors.username %}errorput{% endif %}
显示报错信息。若form表单验证出错则显示其报错信息，否则显示视图层中回传的其余报错信息。

<div class="fl form-box">
    <h2>帐号登录</h2>
    <form action="{% url 'login' %}" method="post" autocomplete="off">
        <input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5'/>
        <div class="form-group marb20 {% if login_form.errors.username %}errorput{% endif %}">
            <label>用&nbsp;户&nbsp;名</label>
            <input name="username" id="account_l" type="text" placeholder="手机号/邮箱"
                   value="{{ login_form.username.value }}"/>
        </div>
        <div class="form-group marb8 {% if login_form.errors.password %}errorput{% endif %}">
            <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
            <input name="password" id="password_l" type="password" placeholder="请输入您的密码"
                   value="{{ login_form.password.value }}"/>
        </div>
        <div class="error btns login-form-tips" id="jsLoginTips">
            {% if login_form.errors %}
                {% for key, error in login_form.errors.items %}
                    {{ error }}
                {% endfor %}
            {% else %}
                {{ msg }}
            {% endif %}
        </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>
    <p class="form-p">没有慕学在线网帐号？<a href="register.html">[立即注册]</a></p>
</div>