devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Python实现员工管理系统（Django页面版 ) 一_python录入员工信息

作者：小小林熬夜学编程 | 2024-02-27 15:16:53

赞

踩

python录入员工信息

        本系统需要实现的板块比较多，为了方便各位能够更加轻松的学习，因为我们分多篇博客来将系统完善，希望能对各位的学习有帮助。作者文化水平有限，如果出现绕口的话请原谅。

本篇博客需要实现的需求：

1. 确定项目整体逻辑结构 

2. 创建Django项目

3. 对Djiango项目中的各组件进行配置

4. 对部门表进行创建以及构建部门信息的页面

需求实现：

1. 确定项目整体逻辑结构 

在本次项目中，我们需要做一个网页帮助我们进行员工管理的实现，包括部门管理，员工信息管理，账号管理。在初步实现中我会依次实现这四个板块，后续对于整个系统的完善也会在后面的博文中给出。

2. 创建Django项目

1 确认项目启动路径

2 创建Django项目 输入命令django-admin startproject 项目名

3 cd 项目名

4 创建app 输入命令 python manage.py startapp APP名

5 输入命令 python manage.py runserver 即可启动Django项目

通过默认URL我们可以在浏览器打开我们创建的Django页面（不能将我们上面的启动界面关闭） 

 出现以上界面就代表你的Django项目成功创建

我们通过我们的Pycharm打开我们刚才创建的项目，请注意我下面的打开操作，不然后续对于代码的运行可能会存在问题。

我们需要从你创建的地址下面的项目名进行打开，这样的好处就是你在运行整个Django项目时并不需要每次都输入python manage.py runserver。

基本上是这个界面就代表你项目成功按照我的方式进行打开

点击右上角的运行后即可出现下面的运行效果

我们可以发现里面有一个URL就是我们刚刚在上面进入网页的地址，这样我们可以直接通过点击这个地址即可进入我们的Django网页界面。

3. 对Djiango项目中的各组件进行配置

接下来我们需要对我们的项目对各个组件进行一个基本的配置，后续我们根据需要会不断的进行配置。

APP的配置：打开setting.py进行app的配置

找到INSTALLED_APPS,在里面添加 'project_manage.apps.ProjectManageConfig'，这个其实就是我们的app类的路径

这样我们就可以将我们的app配置成功，app如果配置不成功对于后续的数据库的迁移等操作就会产生影响，因此我们在进行配置项目组件时一定要注意对app的配置。

下面我们需要在app项目名所在的文件下创建两个文件夹，用于我们后续存放我们的html代码以及js代码

static : 用于存放js，css，img的内容

templates：用于存放html代码

 4 对部门表进行创建以及构建部门信息的页面

下面是我们对部门表作的一个基本的框架

1. 需要给一个URL地址用于展示部门信息 

2. 需要有一个导航栏用于用户对各个内容进行操作

3. 需要有一个部门列表用于存放我们所有的部门信息并展示

4. 需要有一个新建部门用于创建一个新的部门

5. 能够对部门信息进行直接修改或删除操作

4.1 为部门信息创建一个URL

找到url.py ，我们可以发现里面有一个path，这个里面存放的内容其实就是我们开始打开Django项目时的那个火箭，我们可以在这个urlpatterns列表下添加我们各个实现内容的url。

这样我们即可成功添加员工列表的url地址，接下来我们需要为实现这个内容构建方法，我们的方法构建都是在views.py里面进行的，因此我们需要导入views进来。

我们在views.py中创建这个方法，它会在用户跳转到对应的地址时自动运行。

我们的部门列表存放的是我们的部门信息数据，那这些数据都是从哪里来的？因此我们需要创建一个数据库用于存放我们数据。（在这里我们用的Mysql）

4.2 数据展示操作

1. 在mysql里面创建一个数据库用于存放数据

2. 在setting.py 下对你的MySQL的数据库进行一个导入配置

3. 利用model.py 完成对数据库迁移到Django项目中

4. 最后将我们得到的数据渲染到我们的部门界面中去

5 补充：数据的删除和修改操作

4.21 使用mysql 创建数据库用于存放员工信息

4.22 在setting.py 下对你的MySQL的数据库进行一个导入配置

首先在setting里面找到DATABASES

然后按照下面进行MySQL配置

 4.23 利用model.py 完成对数据库迁移到Django项目中

 编写一个员工列表类用于存放员工数据

 编写完成后开始进行数据的迁移

 依次输入 makemigrations 以及  migrate 即可完成数据的迁移

 通过pycharm连接数据库后我们可发现里面多出来了很多表，其中有一个表就是我们刚刚创建的Department 这个类所构成的表

 

其中的id是Django自动生成的一个id字段，是每一条数据的主键，后续我们进行数据的删除修改时经常会用到。

由此我们对数据库的迁移以及全部完成。

4.24 渲染数据到页面中

首先我们先人为的创建一些数据到数据库中去，方便后续查看。

接下来我们需要创建一个html文件用于我们页面的展示

在这里推荐大家一个非常实用的html样式大全，非常实用，我的HTML代码基本上都是以这里面的做一个框架，然后再修改。

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)icon-default.png?t=N7T8https://v3.bootcss.com/

使用步骤：

1. 下载Bootstrap的压缩包

2. 将下载 压缩包解压后将解压的文件放入到static文件下

3. 下载jquery将jquery文件夹放入到static文件下，用于html代码运行js代码

        jquery下载所有版本（实时更新） (jq22.com)

3. 将里面的js样式进行导入到html文件中

我们通过我渲染出来的界面进行讲解

导航栏的创建

由于我们的导航栏是贯彻到每一个实现模块中去的，那我们干脆就将导航栏单独拿出来放入一个html文件中，其他的html文件使用时直接继承即可。

点击组件后选择导航条

复制其outerHTML即可获取它的html代码

 layout.html(导航栏代码)

  1. {# 导入static文件夹 #}
  2. {% load static %}
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
  9. </head>
  10. <body>
  11. <div class="navbar navbar-default">
  12.     <div class="container">
  13.         <!-- Brand and toggle get grouped for better mobile display -->
  14.         <div class="navbar-header">
  15.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  16.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  17.                 <span class="sr-only">Toggle navigation</span>
  18.                 <span class="icon-bar"></span>
  19.                 <span class="icon-bar"></span>
  20.                 <span class="icon-bar"></span>
  21.             </button>
  22.             <a class="navbar-brand" href="http://127.0.0.1:8000/">管理系统</a>
  23.         </div>
  24.  
  25.         <!-- Collect the nav links, forms, and other content for toggling -->
  26.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  27.             <ul class="nav navbar-nav">
  28.                 <li><a href="/depart/list">部门列表</a></li>
  29.                 <li><a href="/user/list/">员工列表</a></li>
  30.                 <li><a href="/pretty/list/">账号管理</a></li>
  31.  
  32.  
  33.             </ul>
  34.  
  35.             <ul class="nav navbar-nav navbar-right">
  36.                 <li><a href="#">登录</a></li>
  37.                 <li class="dropdown">
  38.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  39.                        aria-expanded="false">用户 <span class="caret"></span></a>
  40.                     <ul class="dropdown-menu">
  41.                         <li><a href="#">Action</a></li>
  42.                         <li><a href="#">Another action</a></li>
  43.                         <li><a href="#">Something else here</a></li>
  44.                         <li role="separator" class="divider"></li>
  45.                         <li><a href="#">Separated link</a></li>
  46.                     </ul>
  47.                 </li>
  48.             </ul>
  49.         </div><!-- /.navbar-collapse -->
  50.     </div><!-- /.container-fluid -->
  51. </div>
  52.  
  53. <div>
  54.     {#用于其他html代码进行代码复写#}
  55.     {% block content %}
  56.     {% endblock %}
  57. </div>
  58.  
  59. {# 引入js代码 #}
  60. <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
  61. <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
  62.  
  63. {% block js %}
  64.  
  65. {% endblock %}
  66. </body>
  67. </html>

我们只需要对其中的内容进行部分修改，我们就可以直接拿来用。我们将layout.html渲染出来的效果作为首页查看一些渲染情况。

url.py

  1. from django.contrib import admin
  2. from django.urls import path
  3. from project_manage import views
  4.  
  5. urlpatterns = [
  6.     # 这个没什么用我们直接注释
  7.     # path('admin/', admin.site.urls),
  8.     # 首页URL,路径为空表示初始界面
  9.     path('', views.index),
  10.  
  11.     path('depart/list', views.depart_list),
  12.  
  13. ]

views.py

  1. from django.shortcuts import render
  2.  
  3. # Create your views here.
  4. def index(request):
  5.     render(request,'layout.html')
  6.  
  7.  
  8. def depart_list(request):
  9.     pass
  10.  
  11.

最后运行打开即可出现下面的效果

 接下来我们完成部门列表的显示，我们在点击“部门列表”的时候它就会把所有部门信息都显示到界面上

 

views.py

  1. from django.shortcuts import render
  2. # 导入model模块
  3. from project_manage import models
  4.  
  5. # Create your views here.
  6. def index(request):
  7.     render(request,'layout.html')
  8.  
  9.  
  10. def depart_list(request):
  11.     # 获取Department下的所有数据
  12.     data_list = models.Department.objects.all()
  13.     render(request,'depart_list.html',{'data_list':data_list})
  14.  
  15.

 depart_list.html

  1. {% extends 'layout.html' %}
  2. {% block content %}
  3.     <div class="container">
  4.         <div style="margin-bottom: 10px">
  5.             {# target="_blank" 重新打开一个页面 #}
  6.             <a href="/depart/add/" class="btn btn-success">
  7.                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新建部门</a>
  8.         </div>
  9.         <div class="panel panel-success">
  10.             <div class="panel-heading">
  11.                 <h3 class="panel-title"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 部门列表</h3>
  12.             </div>
  13.             <div class="panel-body">
  14.                 <table class="table">
  15.                     <thead>
  16.                     <tr>
  17.                         <th>部门ID</th>
  18.                         <th>部门名称</th>
  19.                         <th>部门操作</th>
  20.                     </tr>
  21.                     </thead>
  22.                     <tbody>
  23.                     {% for data in data_list %}
  24.                         <tr>
  25.                             <td>{{ data.id }}</td>
  26.                             <td>{{ data.title }}</td>
  27.                             <td>
  28.                                 <a href="/depart/delete/?nid={{ data.id }}"><span
  29.                                         class="glyphicon glyphicon-trash" aria-hidden="true" style="color: red"></span></a>
  30.                                 <span> </span>
  31.                                 <a href="/depart/{{ data.id }}/modify"><span
  32.                                         class="glyphicon glyphicon-new-window" aria-hidden="true"
  33.                                         style="color: #2aabd2"></span></a>
  34.                             </td>
  35.                         </tr>
  36.                     {% endfor %}
  37.  
  38.                     </tbody>
  39.                 </table>
  40.             </div>
  41.         </div>
  42.     </div>
  43. {% endblock %}
4.25 数据的删除和修改

数据展示完毕，接下来就是对数据的操作（删除和修改）

上面我们提到每一条数据的id值都是它对应的主键，那么我们就可以通过id值找到对应的数据并进行相对于的操作。

删除：

构造url，我们可以构造一个url为   ‘http://127.0.0.1:8000/depart/delete/?nid=1’ 表示id值为1的数据，其中的nid表示对应数据的id值，在这里面的nid是该url的参数，我们在对该url发起请求时可获取到对应的nid的值。

首先先为其创建一个url地址

urls.py

  1. from django.contrib import admin
  2. from django.urls import path
  3. from project_manage import views
  4.  
  5. urlpatterns = [
  6.     # 这个没什么用我们直接注释
  7.     # path('admin/', admin.site.urls),
  8.     # 首页URL,路径为空表示初始界面
  9.     path('', views.index),
  10.  
  11.     path('depart/list', views.depart_list),
  12.  
  13.     path('depart/delete/', views.depart_delete),
  14.  
  15. ]

views.py

  1. # 删除部门
  2. def depart_delete(request):
  3.     # 从get请求中得到参数nid值
  4.     nid = request.GET.get("nid")
  5.     # 从数据库中筛选出id值为nid并删除
  6.     models.Department.objects.filter(id=nid).delete()
  7.     # 删除后重定向到部门列表
  8.     return redirect("/depart/list")

由于删除操作并不需要重新做一个页面来进行展示，因此我们直接返回到原界面即可。

修改：

修改操作和删除会有一点区别，删除操作仅仅只是一个get请求方法，因为它并不涉及到数据库的操作，因此调用方法就可完成。而修改操作在用户进行修改操作的时候是get请求方法，再另外一个页面做提交数据修改时则为post请求方法。

修改操作同样是根据数据的id值进行操作的，因此我们也需要构建出一个url地址，url地址并不唯一，只要保证整个操作的逻辑一致即可。为了展示效果，下面作者用了一个不同的url表示方法来进行修改操作

构造url：‘http://127.0.0.1:8000//depart/1/modify’  在这里的1就不像刚刚那个是作为参数传递，而是以路径的形式放入。

urls.py：

  1.     # 修改部门
  2.     path('depart/<int:nid>/modify/', views.depart_modify),

views.py:

  1. # 修改部门
  2. def depart_modify(request, nid):
  3.     # 如果是get请求
  4.     if request.method == "GET":
  5.         # 获取该id值对应的部门名
  6.         title = models.Department.objects.filter(id=nid).first()
  7.         return render(request, "depart_modify.html", {"title": title})
  8.     
  9.     # 如果是post请求
  10.     title = request.POST.get("title")
  11.     # 找到对应的id值更新
  12.     models.Department.objects.filter(id=nid).update(title=title)
  13.     return redirect("/depart/list")

depart_modify.html

  1. {% extends 'layout.html' %}
  2.  
  3. {% block content %}
  4.     <div class="container">
  5.         <div class="panel panel-info">
  6.             <div style="margin-bottom: 10px">
  7.                 {# target="_blank" 重新打开一个页面 #}
  8.                 <a href="/depart/list/" class="btn btn-success">
  9.                     <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> 退出修改</a>
  10.             </div>
  11.             <div class="panel-heading">
  12.                 <h3 class="panel-title">修改部门</h3>
  13.             </div>
  14.             <div class="panel-body">
  15.                 <form method="post">
  16.                     {% csrf_token %}
  17.                     <div class="form-group">
  18.                         <label for="inputEmail3" class="col-sm-2 control-label">部门名称</label>
  19.                         <input type="text" class="form-control" id="inputEmail3" placeholder="{{ title.title }}"
  20.                                name="title">
  21.                     </div>
  22.  
  23.                     <button type="submit" class="btn btn-success">提交</button>
  24.  
  25.  
  26.                 </form>
  27.             </div>
  28.         </div>
  29.     </div>
  30. {% endblock %}
4.3 新增部门

我们需要在部门列表上面弄一个新建部门的按钮，在用户进行添加操作时可以由这个按钮进入，并在里面弄一个超链接，在用户点击后即可跳转到部门添加页面。

新增部门与修改部门信息的操作其实是差不多的，都是有get请求和post请求两种请求方式。用户在点击新增部门的按钮是一个get请求方式，在提交数据时是一个post请求方式，因为提交数据涉及到数据库的操作 。

urls.py

  1.     # 增加部门
  2.     path('depart/add/', views.depart_add),

views.py:

  1. # 增加部门
  2. def depart_add(request):
  3.     if request.method == "GET":
  4.         return render(request, "depart_add.html")
  5.  
  6.     title = request.POST.get("title")
  7.     models.Department.objects.create(title=title)
  8.     return redirect("/depart/list")

depart_add.html

  1. {% extends 'layout.html' %}
  2. {% block content %}
  3.         <div class="container">
  4.         <div class="panel panel-info">
  5.             <div class="panel-heading">
  6.                 <h3 class="panel-title">增加部门</h3>
  7.             </div>
  8.             <div class="panel-body">
  9.                 <form method="post">
  10.                     {% csrf_token %}
  11.                     <div class="form-group">
  12.                         <label for="inputEmail3" class="col-sm-2 control-label">部门名称</label>
  13.                         <input type="text" class="form-control" id="inputEmail3" placeholder="添加部门" name="title">
  14.                     </div>
  15.  
  16.                     <button type="submit" class="btn btn-success">提交</button>
  17.                 </form>
  18.             </div>
  19.         </div>
  20.     </div>
  21. {% endblock %}

 以上就是部门列表的整个操作流程。

由于代码内容过多，不太好全部展示，等后续我会在GitHub上将所有代码都放入的哈。本文中如果存在问题或者读友有模糊的地方可以评论留言或者私信。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号