【玩转全栈】----Django制作部门管理页面

目录

大致效果

BootStrap

BootStrap简介

BootStrap配置

BootStrap使用

基本配置

部分代码解释及注意：

用户编辑：

新添数据：

删除数据：

大致效果

我先给个大致效果，基本融合了Django、Bootstrap、css、html等等。

基于Django的部门管理系统

BootStrap

BootStrap简介

Bootstrap 是一个由 Twitter 团队开发的开源前端框架，专注于帮助开发者快速构建响应式和现代化的网页。它基于 HTML、CSS 和 JavaScript，提供了一系列强大的组件和工具，包括栅格系统、按钮、导航栏、表单、模态框、卡片、警告框等，使网页开发变得更加高效和规范化。

Bootstrap 的核心特点是响应式设计，通过其强大的栅格系统和内置的媒体查询，开发者可以轻松创建在不同设备（如手机、平板、PC）上都能正常显示的页面。它还具有良好的跨浏览器兼容性，能够确保网页在主流浏览器中的一致性。

此外，Bootstrap 提供了丰富的可定制性，开发者可以通过修改变量或定制化 CSS 来调整样式。同时，它拥有大量社区支持和第三方资源，如模板、插件和扩展，大幅减少开发时间。Bootstrap 适用于从简单的静态网站到复杂的 Web 应用的快速开发，是现代前端开发中常用的工具之一。

BootStrap配置

需要大家自己去BootStrap官网上下载源码，然后引入即可，这里我已经给大家提供了，大家拷贝即可：

大家复制到此位置即可

引入也很简单，复制下面两行代码到html页面中，如图所示：

{% load static %}<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">

BootStrap使用

如果您学过vue，那一定知道element-ui，BootStrap和element-ui一样，作用都是使用组件 Demo 快速体验交互细节，帮助工程师快速开发。

BootStrap使用也很简单，打开BootStrap官网：

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

我这里举个使用的例子：

先找到自己需要的页面样式

复制代码到自己页面上就能显示相同的效果

像上面那个因为代码太长，官网没有直接给出源码的，可以点开F12工具，或者右键检查，定位到这个表格元素，右键table复制outerHTML代码即可。

运行得到的页面和官网差不多

有时页面也会因为自己的一些设置会有不同，可以自己修改。

基本配置

基本配置包括数据库创建和连接，可以直接用之前创建的app01_department表，有不知道的可以看看这篇：

【玩转全栈】----Django连接MySQL_django mysql-CSDN博客

像之前也写了一个用户管理案例，但页面不是很美观，基本的逻辑都是通的，本篇博客着手BootStrap组件库，带你使用BootStrap快速制作一个美观的页面。

源码展示：

用户管理大致逻辑：

urls.py:

from django.contrib import admin
from django.urls import path
from app01 import viewsurlpatterns = [path("",views.depart_list),path("depart/list/", views.depart_list),path("depart/add/", views.depart_add),path("depart/delete/", views.depart_delete),path("depart/<int:nid>/edit/", views.depart_edit),
]

view.py:

from django.http import HttpResponse
from django.shortcuts import render, redirect
from app01.models import Department
import sysdef depart_list(request):"""部门列表"""queryset = Department.objects.all()print(queryset)# sys.stdout.flush()  # 强制刷新输出return render(request, "depart_list.html",{"queryset":queryset})def depart_add(request):if request.method == "GET":return render(request, "depart_add.html")else:title = request.POST.get("title")pwd = request.POST.get("pwd")# 密码正确，放入数据库if pwd == "1234":Department.objects.create(title=title)return redirect("/depart/list")def depart_delete(request):nid = request.GET.get("nid")print(nid)Department.objects.filter(id=nid).delete()return redirect("/depart/list")def depart_edit(request,nid):# filter获取匹配的多个数据，get获取一个obj = Department.objects.filter(id=nid).first()if request.method == "GET":return render(request, "depart_edit.html",{"obj":obj})else:title = request.POST.get("title")pwd = request.POST.get("pwd")if pwd == "1234":Department.objects.filter(id=nid).update(title=title)return redirect("/depart/list")return render(request, "depart_edit.html", {"obj": obj})

settings文件中的数据库配置和models文件中的操作和之前博客的都一样，不用做修改。

页面：

（没学过前端并且不想学的直接复制就行，前提是前面的BoosStrap已成功导入）

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-3.4.1/css/bootstrap.min.css' %}"><style>.navbar{border-radius: 0;}.my-div{height: 600px;width: 900px;margin: auto ;{#margin-top: 40px ;#}{#margin-top: 20px;#}border: 1px solid #d5dfe3;padding: 20px 40px;border-radius: 10px;box-shadow: 5px 5px 22px #aaa;}</style>
</head>
<body>{#<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>#}
{#<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>#}<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">位于 <span class="sr-only">(current)</span></a></li><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><a href="#">上海</a></li><li role="separator" class="divider"></li><li><a href="#">福建</a></li><li role="separator" class="divider"></li><li><a href="#">黑龙江</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group">{% csrf_token %}<label><input type="text" class="form-control" placeholder="Search"></label></div><button type="submit" class="btn btn-default">提交</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</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></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="my-div"><div style="margin-bottom: 10px"><a class="btn btn-primary" href="/depart/add/">
{#            target="_blank"使得跳转打开新页面#}<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新建部门</a></div><div><div class="panel-heading"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>部门列表</div><div class="bs-example" data-example-id="contextual-table"><table class="table"><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 %}</table></div></div>
</div>
</div>
</body>
</html>

depart_add.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>添加</title>
{#    压缩版本#}<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"><style>.navbar{border-radius: 0;}.my-div{height: 600px;width: 900px;margin: auto ;{#margin-top: 40px ;#}{#margin-top: 20px;#}border: 1px solid #d5dfe3;padding: 20px 40px;border-radius: 10px;box-shadow: 5px 5px 22px #aaa;}</style>
</head>
<body><script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">位于 <span class="sr-only">(current)</span></a></li><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><a href="#">上海</a></li><li role="separator" class="divider"></li><li><a href="#">福建</a></li><li role="separator" class="divider"></li><li><a href="#">黑龙江</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group">{% csrf_token %}<label><input type="text" class="form-control" placeholder="Search"></label></div><button type="submit" class="btn btn-default">提交</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</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></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
<div class="my-div"><div class="container"><div class="panel panel-default"  style="width: 750px;margin-top: 100px"><!-- Default panel contents --><div class="panel-heading">新建 部门</div><div class="panel-body"><form class="form-horizontal" method="POST">{% csrf_token %}<!-- 部门名输入框 --><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">部门名</label><div class="col-sm-10"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="XX部"></div></div><!-- 管理员密码输入框 --><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">管理员密码</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd"></div></div><!-- 保存按钮 --><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">保 存</button></div></div></form></div><!-- Table --><table class="table">...</table></div></div>
</div>
</body>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</html>

depart_edit.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>添加</title>
{#    压缩版本#}<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"><style>.navbar{border-radius: 0;}.my-div{height: 600px;width: 900px;margin: auto ;{#margin-top: 40px ;#}{#margin-top: 20px;#}border: 1px solid #d5dfe3;padding: 20px 40px;border-radius: 10px;box-shadow: 5px 5px 22px #aaa;}</style>
</head>
<body><script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">位于 <span class="sr-only">(current)</span></a></li><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><a href="#">上海</a></li><li role="separator" class="divider"></li><li><a href="#">福建</a></li><li role="separator" class="divider"></li><li><a href="#">黑龙江</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group">{% csrf_token %}<label><input type="text" class="form-control" placeholder="Search"></label></div><button type="submit" class="btn btn-default">提交</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</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></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
<div class="my-div"><div class="container"><div class="panel panel-default"  style="width: 750px;margin-top: 100px"><!-- Default panel contents --><div class="panel-heading">修改 部门</div><div class="panel-body"><form class="form-horizontal" method="POST">{% csrf_token %}<!-- 部门名输入框 --><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">部门名 :</label><div class="col-sm-10"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="{{ obj.title }}"></div></div><!-- 管理员密码输入框 --><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">管理员密码 :</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd"></div></div><!-- 保存按钮 --><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">保 存</button></div></div></form></div><!-- Table --><table class="table">...</table></div></div>
</div>
</body>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</html>

部分代码解释及注意：

这里代码按文件分开说的话可能说不清楚，下面我将按功能解释。

用户编辑：

url.py:

path("depart/<int:nid>/edit/", views.depart_edit)

这里的<int:nid>是动态传值，之前都是学的静态url，使用正则表达式可以使url变得动态起来。这里可以理解为：用户点击编辑按钮，会获得该行的id，并通过id构造一个专属url，从而跳转到编辑页面。

在depart_list.html中有这么一句代码：

<a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit">编辑</a>

用户点击编辑后会获取点击行的id，并跳转到动态url

在视图函数中：

将获取到的nid传给视图函数，视图函数根据id获取改行数据，传给depart_edit.html，以将原数据显示到编辑页面，用户在编辑页面修改信息后，点击提交，视图函数获取新数据，再到数据库更新，然后重定向至depart_list.html页面进行更新显示。

注意：此处表单没加action，即提交地址，则默认提交到已经渲染了的视图函数。

def depart_edit(request,nid):# filter获取匹配的多个数据，get获取一个obj = Department.objects.filter(id=nid).first()if request.method == "GET":return render(request, "depart_edit.html",{"obj":obj})else:title = request.POST.get("title")pwd = request.POST.get("pwd")if pwd == "1234":Department.objects.filter(id=nid).update(title=title)return redirect("/depart/list")return render(request, "depart_edit.html", {"obj": obj})

新添数据：

简单的POST请求，数据库存储，传参显示。可以参考用户编辑逻辑。

删除数据：

在depart_list.html中点击删除，获取该行的id值并构造动态url，执行对应的删除函数

<a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>

注意id直接通过 URL 的查询参数传参，视图函数中直接GET就能拿到，然后在数据库中删除，并重定向回depart_list页面。

注意：

用户编辑中的nid和删除数据中的nid，后者实际上是专门通过url传递参数的，查询参数（Query Parameters），它会将 nid={ { obj.id }} 作为 URL 的一部分发送到服务器。前面的是直接构造了动态url，直接通过视图函数参数列表传参，ID 是作为 URL 的一部分传递给服务器的，不是查询参数。

具体区别：