今天我们来完成"部门管理"页面，"编辑"功能的实现
需求：
做一个部门展示的页面，包含新增，删除，编辑三个功能
原型图：
开发方案：
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全栈开发专栏
