部门管理（体验，最原始方法来做，Django+mysql）

本人初学，写完代码在此记录和复盘

在创建和注册完APP之后（我的命名是employees），编写models.py文件创建表

手动插入了几条数据

1.部门查询

urls.py和views.py在编写之前，都要注意导入对应的库

urls.py：from employees import views （用于导入视图函数）

views.py：from employees import models （用于导入表）

def depart_list(request):
    # 从数据库中获取所有部门信息，返回一个查询集
    queryset = models.Department.objects.all()

    # 渲染 'depart_list.html' 模板，传递查询集数据到模板中
    return render(request, 'depart_list.html', {"queryset": queryset})

在templates文件夹中创建对应的html文件

depart_list.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.3/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        .c1{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>

</head>
<body>

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">部门管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/depart/list/">部门首页</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/depart/add">部门管理</a>
                </li>

                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>


            </ul>


        </div>

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">登录</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">注册</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="log" role="button"
                   data-bs-toggle="dropdown" aria-expanded="false">
                    豆腐乳
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">我的账户</a></li>
                    <li><a class="dropdown-item" href="#">修改密码</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">注销</a></li>
                </ul>
            </li>

        </ul>

    </div>
</nav>

<div>
    <div class="container">
        <div class="c1">
            <a class="btn btn-success" href="/depart/add">新建部门</a>
        </div>

        <div class="card c1">
            <div class="card-header">
                <i class="fa fa-list" aria-hidden="true"></i>
                部门列表
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">

                    <table class="table table-striped table-bordered table-hover mb-0">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for obj in queryset %}
                        <tr>
                            <th scope="row">{{ obj.id }}</th>
                            <td>{{ obj.title }}</td>
                            <td>
                                <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
                                <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                </div>

            </div>


        </div>

        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true"><<</span>
                    </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">>></span>
                    </a>
                </li>
            </ul>
        </nav>

    </div>
</div>


<script src="{% static 'plugins/bootstrap-5.3.3/js/bootstrap.bundle.min.js' %}"></script>


</body>
</html>

1. 视图函数 depart_list ：

   查询数据库中的部门表（Department），将所有部门数据传递给模板 depart_list.html。

2. 模板循环 ：

   遍历 queryset 中的每个部门对象，生成表格行，显示部门 ID、名称，并提供"编辑"和"删除"操作链接。

   • 编辑：跳转至 /depart/{id}/edit/

   • 删除：跳转至 /depart/delete/?nid={id}

2.部门增加

def depart_add(request):
    # 处理 GET 请求：返回添加部门的页面
    if request.method == 'GET':
        return render(request, 'depart_add.html')

    # 处理 POST 请求：获取表单中的部门名称并保存到数据库
    title = request.POST.get("title")  # 从 POST 请求中获取部门名称
    models.Department.objects.create(title=title)  # 创建新部门

    # 添加成功后，重定向到部门列表页面
    return redirect("/depart/list")

depart_list.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.3/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        .c1{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>

</head>
<body>

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">部门管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/depart/list/">部门首页</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/depart/add">部门管理</a>
                </li>

                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>


            </ul>


        </div>

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">登录</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">注册</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="log" role="button"
                   data-bs-toggle="dropdown" aria-expanded="false">
                    豆腐乳
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">我的账户</a></li>
                    <li><a class="dropdown-item" href="#">修改密码</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">注销</a></li>
                </ul>
            </li>

        </ul>

    </div>
</nav>

<div>
    <div class="container">
        <div class="c1">
            <a class="btn btn-success" href="/depart/add">新建部门</a>
        </div>

        <div class="card c1">
            <div class="card-header">
                新建部门
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="inputtitle" class="form-label">标题</label>
                        <input type="text" class="form-control" id="inputtitle" placeholder="标题" name="title">
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>

            </div>

        </div>

    </div>
</div>


<script src="{% static 'plugins/bootstrap-5.3.3/js/bootstrap.bundle.min.js' %}"></script>


</body>
</html>

运行

3.部门删除

def depart_delete(request):
    # 获取请求中传递的 'nid' 参数，即要删除的部门 ID
    nid = request.GET.get("nid")
    
    # 根据 'nid' 参数过滤部门对象并删除
    models.Department.objects.filter(id=nid).delete()
    
    # 删除完成后，重定向回部门列表页面
    return redirect("/depart/list")

depart_delete 函数效果：运行/depart/delete/?nid=1，就会删除id为1的数据

当用户点击"删除"按钮时，会触发 depart_delete 函数，该函数根据部门的 ID 删除对应的部门数据，并重定向回部门列表页面。

运行

4.部门修改

<int:nid>：这是一个捕获组 ，它告诉 Django 该部分的路径将匹配一个整数，并将这个整数作为参数传递给视图函数。在这里，nid 是变量名，表示部门的 ID。

def depart_edit(request, nid):
    # 如果请求方法是 GET（即用户访问编辑页面），获取对应部门的信息
    if request.method == 'GET':
        # 根据部门 ID 获取部门对象，并将其传递给模板
        row_object = models.Department.objects.filter(id=nid).first()
        return render(request, 'depart_edit.html', {"row_object": row_object})

    # 如果请求方法是 POST（即用户提交表单），更新部门信息
    title = request.POST.get("title")
    
    # 更新数据库中对应部门的标题
    models.Department.objects.filter(id=nid).update(title=title)
    
    # 更新完成后，重定向到部门列表页面
    return redirect("/depart/list")

当用户访问 /depart/<nid>/edit/ URL 时，depart_edit 函数会根据部门 ID (nid) 获取该部门的现有信息并显示在表单中，用户可以修改部门名称并提交表单。提交表单后，depart_edit 函数会更新数据库中对应部门的标题，并将用户重定向回部门列表页面。

depart_edit.py

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.3/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        .c1{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>

</head>
<body>

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">部门管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/depart/list/">部门首页</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/depart/add">部门管理</a>
                </li>

                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>


            </ul>


        </div>

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">登录</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">注册</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="log" role="button"
                   data-bs-toggle="dropdown" aria-expanded="false">
                    豆腐乳
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">我的账户</a></li>
                    <li><a class="dropdown-item" href="#">修改密码</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">注销</a></li>
                </ul>
            </li>

        </ul>

    </div>
</nav>

<div>
    <div class="container">

        <div class="card c1">
            <div class="card-header">
                修改部门
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="inputtitle" class="form-label">标题</label>
                        <input type="text" class="form-control" id="inputtitle" placeholder="标题" name="title" value="{{ row_object.title }}"/>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>

            </div>

        </div>

    </div>
</div>


<script src="{% static 'plugins/bootstrap-5.3.3/js/bootstrap.bundle.min.js' %}"></script>


</body>
</html>

运行

改成"媒体"

学习：【最新Python的web开发全家桶（django+前端+数据库）-哔哩哔哩】 https://b23.tv/O0w3SND