部门管理｜“编辑部门”功能实现（Django5零基础Web平台）

大飞记Python2025-10-21 1:34

今天我们来完成"部门管理"页面，"编辑"功能的实现

需求：

做一个部门展示的页面，包含新增，删除，编辑三个功能

原型图：

开发方案：

1、urls.py

添加 depart/edit/ 页面（新增路由）

python 复制代码 
from django.urls import path
from app01 import views

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('login/', views.login),
    path('user/',views.user),
    path('depart/list/',views.depart_list),
    path('depart/add/',views.depart_add),
    path('depart/delete/',views.depart_delete),
    path('depart/edit/',views.depart_edit)
]

2、views.py

新增 depart_edit 函数

  • 2.1、点击"编辑"按钮跳转至修改页面后，输入框需包含默认值

  • 2.2、点击"提交"按钮后，执行数据库update操作，更新修改部门名称，并重定向返回"部门列表"页面

完整代码

python 复制代码 
from django.shortcuts import render, HttpResponse, redirect
from app01 import models

def depart_edit(request):
    """修改部门/编辑按钮"""
    # 获取nid
    nid = request.GET.get("nid")
    if request.method == "GET":
        # 获取数据库中title名称
        row_object = models.Department.objects.filter(id=nid).first()
        # print(row_object)
        # 定向至depart_edit.html页面
        return render(request, 'depart_edit.html', {"row_object": row_object})
    else:
        # 获取POST数据的title
        request.POST.get("title")
        # 更新数据库中nid对于的title值
        models.Department.objects.filter(id=nid).update(title=request.POST.get("title"))
        # 返回"部门列表"
        return redirect("/depart/list/")

3、templates/depart_edit.html

复制修改 depart_add.html 页面，加入"默认值"

完整代码

html 复制代码 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入bootstrap文件 -->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <!-- 去掉圆角 -->
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>

<body>
<!-- 直接导入bootstrap导航样式 -->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">测试平台</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/depart/list/">部门管理 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">大飞 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">我的信息</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"> 修改部门 </h3>
            </div>
            <div class="panel-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="form-group" >
                        <label>标题</label>
                        <input type="text" class="form-control" placeholder="标题" name="title" value="{{ row_object.title }}">
                    </div>
                    <button type="submit" class="btn btn-primary">提 交</button>
                </form>

            </div>
        </div>
    </div>

</div>


<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

</body>
</html>

4、templates/depart_list.html

"编辑"按钮需加入跳转链接

完整代码

html 复制代码 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入bootstrap文件 -->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <!-- 去掉圆角 -->
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<!-- 直接导入bootstrap导航样式 -->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">测试平台</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/depart/list/">部门管理 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">大飞 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">我的信息</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div>
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/depart/add/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建部门
            </a>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                部门列表
            </div>


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

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

</body>
</html>

本章的难点在于理解和处理id 和title 两个变量。点击"编辑"按钮时需要获取部门id来展示"修改部门"页面的默认值，点击"提交"后的title值需要更新至MySQL数据库中对应这个id部门的title值，最后返回"部门列表"页面，完成整个编辑操作。

本「部门管理」部分已经完结，更多文章内容请前往免费专栏观看
Django5全栈开发专栏

相关推荐
诸葛韩信1 天前
前端工程化1——npm insatall背后的工作原理
前端·npm·node.js
k***12171 天前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
TDengine （老段）1 天前
TDengine 时间函数 WEEK 用户手册
大数据·数据库·物联网·时序数据库·iot·tdengine·涛思数据
学历真的很重要1 天前
LangChain V1.0 Short-term Memory 详细指南
后端·python·语言模型·面试·langchain·agent·ai编程
专注前端30年1 天前
如何使用 HTML5 的 Canvas + JavaScript 实现炫酷的游戏得分特效?
前端·javascript·游戏·html5·canvas·canva可画
q***06291 天前
解决 Tomcat 跨域问题 - Tomcat 配置静态文件和 Java Web 服务（Spring MVC Springboot）同时允许跨域
java·前端·spring
还是鼠鼠1 天前
Redisson实现的分布式锁能解决主从一致性的问题吗？
java·数据库·redis·分布式·缓存·面试·redisson
木易 士心1 天前
深入理解 CSS 中的 !important
前端·css
DingYuan1011 天前
MySql分类
数据库·mysql
LitchiCheng1 天前
Mujoco 基础：获取模型中所有 body 的 name, id 以及位姿
人工智能·python
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05Linux下V2Ray安装配置指南06【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连07本地部署阿里最新开源的Z-Image0846个Nano-banana 精选提示词，持续更新中09Meta第三代“分割一切”模型——SAM 3本地部署教程：首支持文本提示分割，400万概念、30毫秒响应，检测分割追踪一网打尽10Labelme从安装到标注：零基础完整指南