12 django管理系统 - 注册与登录 - 登录

为了演示方便，我就直接使用models里的Admin来演示，不再创建用户模型了。

ok，先做基础配置

首先是在base.html中，新增登录和注册的入口

html 复制代码

<ul class="nav navbar-nav navbar-right">
    <li><a href="/account/login/">登录</a></li>
    <li><a href="/account/register/">注册</a></li>
    
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

接着去配置URL路径

python 复制代码

urlpatterns = [
    # 部门管理
    path("dept/list/", dept.dept_list),
    path("dept/add/", dept.dept_add),
    path("dept/<int:nid>/edit_detail/", dept.dept_editdetail),
    path("dept/<int:nid>/delete/", dept.dept_delete),
    path("dept/search/", dept.dept_search),

    # 管理员管理
    path("admin/list/", admin.admin_list),
    path("admin/add/", admin.admin_add),

    # 登录
    path("account/login/", account.account_login),
    path("account/register/", account.account_register),

]

去my_views文件夹下创建account视图，接着定义account_login方法和account_register方法

python 复制代码

# 登录
def account_login(request):
    pass

# 注册
def account_register(request):
    pass

现在开始进入登录模块的编写

我们让account_login去渲染account_login.html

python 复制代码

# 登录
from django.shortcuts import render


def account_login(request):

    return render(request, "account_login.html")

然后在templates文件下下新建account_login.html，在bootstrap官网随便扒拉一个表单改改。

html 复制代码

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <!--引入css样式-->
    <link rel="stylesheet" href="{% static '/plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">

    </link>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .login-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .login-container h2 {
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .form-group input[type="submit"] {
            background-color: #5cb85c;
            color: white;
            border: none;
            cursor: pointer;
        }

        .form-group input[type="submit"]:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
<div class="account">
    <h2>用户登录</h2>
    <form>
        <div class="form-group">
            <label for="exampleInputText">用户名:</label>
            <input type="email" id="exampleInputText" class="from-control" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword">密码:</label>
            <input type="password" id="exampleInputPassword" class="from-control" placeholder="密码">
        </div>

        <div class="form-group">
            <input type="submit" value="登  录" class="btn btn-primary">
        </div>

    </form>
</div>
</body>
</html>

界面如下：

页面显示出来之后，那么就可以进行表单内容验证部分的。

我们使用ModelForm来实现

首先，我们创建一个AccountModelForm，继承BootStrapModelForm。

因为我们只要Admin里的name和password，不需要sex，所以设置一下字段。

python 复制代码

class AccountModelForm(BootStrapModelForm):
    class Meta:
        model = models.Admin
        fields = ["name", "password"]

接着就去取定义业务逻辑：

GET 请求：创建一个空的 AccountModelForm实例。将表单实例传递给 account_login.html 模板进行渲染，以便用户输入信息。

POST 请求：使用 POST 数据创建 LoginForm 实例并验证数据。验证通过后：获取用户名和密码。查询数据库，验证用户名和密码是否匹配。匹配成功，则设置 session 并返回登录成功提示。验证不通过：返回带有错误信息的登录页面。

python 复制代码

def account_login(request):
    if request.method == 'GET':
        form = AccountModelForm()
        context = {
            "form": form
        }
        return render(request, "account_login.html", context)
    
    form = AccountModelForm(data=request.POST)
    if form.is_valid():
        name = form.cleaned_data.get("name")
        password = form.cleaned_data.get("password")
        print(name, password)
        return HttpResponse("登录成功")
    else:
        return HttpResponse("登录失败")

因为表单数据没有进行数据库查询，我随便输入一下用户和密码看看能不能显示登录成功

可以看到能够进入表单验证阶段。

接下来是要编写account_login的表单验证业务逻辑。然后就去是数据库里找数据，判断是否在数据库中存在。

python 复制代码

def account_login(request):
    """
    处理用户登录请求。

    参数:
    - request: HttpRequest对象，包含登录请求的数据。

    返回:
    - HttpResponse对象，表示登录结果或渲染的登录表单。
    """
    # 判断请求方法，GET请求表示用户希望看到登录页面
    if request.method == 'GET':
        # 初始化登录表单对象
        form = AccountModelForm()

        # 构建上下文，将表单传递给模板以渲染登录页面
        context = {
            "form": form
        }

        # 返回渲染后的登录页面
        return render(request, "account_login.html", context)
    
    # 非GET请求视为登录尝试，使用POST数据初始化表单对象
    form = AccountModelForm(data=request.POST)
    # print(".........", form) 用于调试的打印语句，输出表单数据

    # 验证表单数据有效性
    if form.is_valid():
        # 获取验证后的用户名和密码
        name = form.cleaned_data.get("name")
        password = form.cleaned_data.get("password")
        # 打印用户名和密码，用于调试
        print(name, password)

        # 在数据库中查询匹配的用户对象
        obj = models.Admin.objects.using("default").filter(name=name, password=password).first()
        
        # 如果查询结果为空，返回错误信息
        if not obj:
            return HttpResponse("用户名或密码错误")
        
        # 登录成功，返回成功信息
        return HttpResponse("登录成功")
    
    # 表单数据无效，重新渲染登录页面并显示错误信息
    return render(request, "account_login.html", {"form": form})

如果我随便输入数据，那么会提示用户名或者密码错误

我们去数据库中找一个存在的进行表单验证看看

可以看到，明显是可以登录成功。

接下来，我们还要保存session，为用户下次登录做准备。

我们先进navicat看一下session表，是空的。

然后修改account_logind的业务逻辑，保存session

python 复制代码

def account_login(request):
    if request.method == 'GET':
        form = AccountModelForm()

        context = {
            "form": form
        }

        return render(request, "account_login.html", context)
    form = AccountModelForm(data=request.POST)
    # print(".........", form)
    if form.is_valid():
        name = form.cleaned_data.get("name")
        password = form.cleaned_data.get("password")
        print(name, password)
        obj = models.Admin.objects.using("default").filter(name=name, password=password).first()
        if not obj:
            return HttpResponse("用户名或密码错误")

        # 保存session
        request.session["user_info"] = {"id": obj.id, "name": obj.name}  # 设置session
        print('request.session["user_info"]...is', request.session["user_info"])
        # return HttpResponse("登录成功")
        # 返回管理员列表
        return redirect('/admin/list')

    return render(request, "account_login.html", {"form": form})

我们尝试登录一下，看看登录后是否跳转到管理员列表，并且看看session是否保存。

用户名：Kong Sze Yu，密码：Nd2ZeMwBhx

我们去navicat看看session