人力资源管理系统- 部门管理（原始方式）
一 、网页样式草图
![]()
二、设计模板
![]()
layout.html 代码
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增部门</title>
<link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.0/css/bootstrap.css' %}"/>
<style>
{# 去掉导航条 navbar的圆角 #}
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="{% static 'img/logo.png' %}" alt="" width="30" height="30">
工联智慧企业资源管理系统</a>
<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="#">Link</a>
</li>
</ul>
<ul class="navbar-nav mr-1 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/depart/list/">登录</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
路平
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">退出登录</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div>
<div class="container">
{# 定义为模板 {% block content %} {% endblock %} #}
{% block content %} {% endblock %}
</div>
</div>
<script src="{% static 'js/jquery-3.6.4.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.0/js/bootstrap.js' %}"></script>
</body>
</html>
三、继承模板
1.depart_list.html
![]()
{#继承模板#}
{% extends 'layout.html' %}
{% block content %}
<div class="mt-3">
{# ================================================#}
{# 在同一页面新增#}
{# <div>#}
{##}
{# <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse"#}
{# data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">#}
{# <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button"#}
{# aria-expanded="false" aria-controls="collapseExample">#}
{# <span class="ml-2 text-sm font-weight-bold">#}
{##}
{# <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor"#}
{# class="bi bi-plus-circle " viewBox="0 0 16 16">#}
{# <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>#}
{# <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>#}
{# </svg>#}
{# </span>#}
{# 新增部门#}
{# </a>#}
{# </button>#}
{# </div>#}
{# <div class="collapse" id="collapseExample">#}
{# <div class="card card-body mt-2">#}
{# <form class="align-items-center row g-3" method="post" >#}
{# post 发送方式必须使用 {% csrf_token %} #}
{# {% csrf_token %}#}
{# <div class="col text-end">#}
{# <label class=" ">新增部门名称：</label>#}
{# </div>#}
{# <div class="col">#}
{# <input type="text" class="form-control " name="dp_name" placeholder="请输入...">#}
{# </div>#}
{# <div class="col">#}
{# <button type="submit" class="btn btn-primary btn-sm flex-sm-fill " >提 交</button>#}
{# </div>#}
{# </form>#}
{# </div>#}
{# </div>#}
{#=================================================================#}
<a class="btn btn-primary btn-sm" href="/depart/add" target="_blank">
<span class="ml-2 text-sm font-weight-bold">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor"
class="bi bi-plus-circle " viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</span>
<span class="ml-2 text-sm font-weight-bold"> 新增部门 </span>
</a>
</div>
<div class="card mt-3">
<div class="card-header">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
部门列表
</div>
<div class="card-body">
<table class="table">
<thead class="table-light">
<tr>
<th>ID</th>
<th>部门名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for dp in dp_list %}
<tr>
<td>{{ dp.id }}</td>
<td>{{ dp.dp_name }}</td>
<td>
<a class="btn btn-primary btn-sm" href="/depart/{{ dp.id }}/edit">编辑</a>
<a class="btn btn-danger btn-sm" href="/depart/delete/?nid={{ dp.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
2.depart_add.html
{#继承模板#}
{% extends 'layout.html' %}
{% block content %}
<div class="card mt-3">
<div class="card-header">
<span class="ml-2 text-sm font-weight-bold">
{# 标签#}
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor"
class="bi bi-plus-circle " viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</span>
<span class="ml-2 text-sm font-weight-bold"> 新增部门 </span>
</div>
<div class="card-body">
<form class="row g-3 align-items-center" method="post">
{# post 发送方式必须使用 #}
{% csrf_token %}
{% csrf_token %}
<div class="col text-end ">
<label>新增部门名称：</label>
</div>
<div class="col">
<input type="text" class="form-control" name="dep_name" placeholder="请输入..."/>
</div>
<div class="col">
<button type="submit" class="btn btn-primary">保 存</button>
</div>
</form>
</div>
</div>
{% endblock %}
3.depart_edit.html
{#继承模板#}
{% extends 'layout.html' %}
{% block content %}
<div class="card mt-3">
<div class="card-header">
<span class="ml-2 text-sm font-weight-bold">
{# 标签#}
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor"
class="bi bi-plus-circle " viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</span>
<span class="ml-2 text-sm font-weight-bold"> 修改部门 </span>
</div>
<div class="card-body">
<form class="row g-3 align-items-center" method="post">
{# post 发送方式必须使用 #}
{% csrf_token %}
<div class="col text-end ">
<label>修改部门名称：</label>
</div>
<div class="col">
<input type="text" class="form-control" name="dep_name" value="{{ dp.dp_name }}"/>
</div>
<div class="col">
<button type="submit" class="btn btn-primary">保 存</button>
</div>
</form>
</div>
</div>
{% endblock %}
四、配置路由表urls.py
from django.contrib import admin
from django.urls import path
from website import views # 新增：从website 中导入 views
urlpatterns = [
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), # 新增：路由
]
五、配置views.py
import requests
from django.shortcuts import render,redirect
from website import models # 引入models 模块
# Create your views here.
def depart_list(request):
'''部门列表'''
# 从数据库中获取数据
dp_list = models.Department.objects.all()
return render(request, 'depart_list.html' , {'dp_list':dp_list})
# '''在同一页面新增'''
# if request.method == 'GET':
# return render(request, 'depart_list.html' , {'dp_list':dp_list})
# else:
# dp_name = request.POST.get('dp_name')
# print(dp_name)
# models.Department.objects.create(dp_name=dp_name)
# return render(request, 'depart_list.html' , {'dp_list':dp_list})
def depart_add(request):
'''添加部门'''
if request.method == 'GET':
return render(request, 'depart_add.html')
else:
depart_name = request.POST.get('dep_name')
models.Department.objects.create(dp_name=depart_name)
return redirect('/depart/list')
def depart_delete(request):
'''删除部门'''
nid = request.GET.get('nid')
models.Department.objects.filter(id=nid).delete()
return redirect('/depart/list')
def depart_edit(request,nid):
'''删除部门'''
if request.method == 'GET':
row_dp = models.Department.objects.filter(id=nid).first()
return render(request,'depart_edit.html',{'dp':row_dp})
else:
depart_name = request.POST.get('dep_name')
models.Department.objects.filter(id=nid).update(dp_name=depart_name)
return redirect('/depart/list')
六、效果
浙公网安备 33010602011771号