Django部门管理系统实操
进bootstrap官网找组件
组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
面板、导航等点击检查然后粘贴outerhtml
建立depart_list.html
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>部门管理</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div 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="#">xx <span class="sr-only">(current)</span></a></li>
<li><a href="#">xx</a></li>
<li><a href="#">xx</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/login/">登录</a></li>
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="true">李华<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/logout">注销</a></li>
<li><a href="/userinfo">用户信息</a></li>
<li><a href="/personal/centre">个人中心</a></li>
<li role="separator" class="divider"></li>
<li><a href="/exit">退出登录</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div>
<div class="container">
<div style="margin-bottom: 20px;">
<a class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
新建部门
</a>
<a class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
新建人员
</a>
</div>
<div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
部门列表
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>销售部</td>
<td>
<a class="btn btn-primary">编辑</a>
<a class="btn btn-danger">删除</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>IT部</td>
<td>
<a class="btn btn-primary">编辑</a>
<a class="btn btn-danger">删除</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>运维部</td>
<td>
<a class="btn btn-primary">编辑</a>
<a class="btn btn-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<div style="position: static; display: none; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;">
<div id="trans-tooltip">
<div id="tip-left-top"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-left-top.png");"></div>
<div id="tip-top"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-top.png") repeat-x;"></div>
<div id="tip-right-top"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-right-top.png");"></div>
<div id="tip-right"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-right.png") repeat-y;"></div>
<div id="tip-right-bottom"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-right-bottom.png");"></div>
<div id="tip-bottom"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-bottom.png") repeat-x;"></div>
<div id="tip-left-bottom"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-left-bottom.png");"></div>
<div id="tip-left"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-left.png");"></div>
<div id="trans-content"></div>
</div>
<div id="tip-arrow-bottom"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-arrow-bottom.png");"></div>
<div id="tip-arrow-top"
style="background: url("chrome-extension://jpjgjbbhaifmiigkopmnpbgcgmigaame/imgs/map/tip-arrow-top.png");"></div>
</div>
</body>
django project下面
app01 views放函数
urls放路由
实际运作: