各位看官老爷们,点击关注不迷路哟。你的点赞、收藏,一键三连,是我持续更新的动力哟!!!
目录
各位看官老爷们,点击关注不迷路哟。你的点赞、收藏,一键三连,是我持续更新的动力哟!!!
4.8depart_confirm_delete.html(部门删除)
5.3 Bootstrap 3.0、4.0、5.0 以上版本之间的差别与联系
寝室管理系统
1.新建项目:
参考文章:VScode上的Vue+Django(Python)_vscode python django-CSDN博客
通过命令:
Python manage.py startapp 注册应用名
注册应用app
结果架构入下图所示:
接下来在settings.py文件中进行引入:
"Web_manage.apps.WebManageConfig"
2.编写表结构(ORM)
在models.py文件中进行编写:
class Department(models.Model): #部门表 title = models.CharField(verbose_name='标题', max_length=32) class Userinfo(models.Model): #员工表 name = models.CharField(verbose_name='姓名', max_length=16) password = models.CharField(verbose_name='密码', max_length=64) age = models.IntegerField(verbose_name="年龄") #salary = models.FloatField(verbose_name="工资") account = models.DecimalField(verbose_name="账户余额",max_digits=10,decimal_places=2,default=0) create_time = models.DateTimeField(verbose_name="入职时间") # 无约束 # depart_id = models.BigIntegerField(verbose_name="部门ID") # 1.有约束 # - to, 与那张表关联 # - to_field, 表中的那一列关联 # 2.django自动 # - 写的depart # - 生成数据列 depart_id depart = models.ForeignKey(to="Department", to_field="id") # 3.部门表被删除 # 3.1 级联删除 depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.CASCADE) # 3.2 置空 #depart = models.ForeignKey(to="Department", to_field="id", null=True, blank=True, on_delete=models.SET_NULL) gender_choice =( (1,'男'), (2,'女') ) gender = models.SmallIntegerField(verbose_name="性别",choices=gender_choice)
3.创建数据库等:
-
创建数据库(NAvicat中)
-
修改数据库配置:在setting.py中:
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # 使用 MySQL 引擎 'NAME': 'yuangong_manage', # 数据库名(需提前创建) 'USER': 'root', # 数据库用户名 'PASSWORD': '', # 数据库密码 'HOST': 'localhost', # 数据库主机(默认本地) 'PORT': '3306', # 端口(默认 3306) # 'OPTIONS': { # 'init_command': "SET sql_mode='STRICT_TRANS_TABLES'", # 严格模式(可选) # 'charset': 'utf8mb4' # 字符集(推荐 utf8mb4) # } } }
-
在Django中生成相应的表:
使用命令:
python manage.py makemigrations python manage.py migrate
-
如果第三步未能执行成功:
出现以下图示内容:
为了解决以上图中出现的问题:
就在终端中运行以下命令:
(vsvenv) PS E:\py_project\Yuangong_manage\yuangong_manage> pip install mysqlclient
4.部门管理
体验,最原始方法来做。
Django中提供的Form和ModelForm组件(方便多了)
4.1 urls.py:
urls.py: from django.contrib import admin from django.urls import path from Web_manage import views urlpatterns = [ # path("admin/", admin.site.urls), path("",views.home, name='Home'), path("depart/list",views.depart_list, name='depart_list'), path('depart/add', views.depart_add, name='depart_add'), path('depart/edit/<int:pk>/', views.depart_edit, name='depart_edit'), path('depart/delete/<int:pk>/', views.depart_delete, name='depart_delete'), # 员工管理 path('user/list', views.user_list, name='user_list'), ]
4.2 views.py:
views.py: from django.shortcuts import get_object_or_404, redirect, render from .models import Department, Userinfo # 使用点号表示当前应用 def home(request): return render(request,'home.html') # Create your views here. # 部门列表 def depart_list(request): depart_list = Department.objects.all() return render(request, 'depart_list.html', {'depart_list': depart_list}) # 添加部门 def depart_add(request): if request.method == 'POST': title = request.POST.get('title') Department.objects.create(title=title) return redirect('depart_list') return render(request, 'depart_add.html') # 编辑部门 def depart_edit(request, pk): depart = get_object_or_404(Department, pk=pk) if request.method == 'POST': depart.title = request.POST.get('title') depart.save() return redirect('depart_list') return render(request, 'depart_edit.html', {'depart': depart}) # 删除部门(级联删除关联员工) def depart_delete(request, pk): depart = get_object_or_404(Department, pk=pk) if request.method == 'POST': depart.delete() return redirect('depart_list') return render(request, 'depart_confirm_delete.html', {'depart': depart}) def user_list(request): # 员工列表 user_list = Userinfo.objects.all() return render(request, 'user_list.html', {'user_list': user_list})
写完以上两个py文件中的具体内容后,我们就可以开始写相关网页文件了:
4.3 base.html(项目基础模版网页文件):
{% load static %} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1407住户管理系统</title> <!-- Bootstrap 5.3 核心样式 --> <link rel="stylesheet" href="{% static 'plugins/bootstrap5.3/css/bootstrap.min.css' %}"> <style> .navbar { margin-bottom: 30px; } </style> </head> <body> <!-- Bootstrap 5.3 导航栏 --> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="{% url 'depart_list' %}">1407住户管理系统</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <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="{% url 'depart_list' %}">部门管理</a> </li> <li class="nav-item"> <a class="nav-link" href="{% url 'user_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> <!-- 可按需添加更多下拉项 --> </ul> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">登录</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> HKC </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">个人信息</a></li> <li><a class="dropdown-item" href="#">退出登录</a></li> </ul> </li> </ul> </div> </nav> <div class="container"> {% block content %}{% endblock %} </div> <!-- 脚本引用 --> <script src="{% static 'js/jquery-3.7.1.js' %}"></script> <script src="{% static 'plugins/bootstrap5.3/js/bootstrap.bundle.min.js' %}"></script> </body> </html>
4.4 home,html(首页界面):
{% extends 'base.html' %} <!-- 声明继承自base.html --> {% block title %}首页 - 1407住户管理系统{% endblock %} <!-- 覆盖标题块 --> {% block content %} <!-- 覆盖content块 --> <h1 class="mt-4">欢迎使用1407用户管理系统</h1> <p class="lead">这里是系统首页内容</p> <a href="{% url 'depart_list' %}" class="btn btn-primary">进入部门管理</a> <a href="{% url 'user_list' %}" class="btn btn-secondary">进入员工管理</a> {% endblock %}
4.5 depart_list.html(部门列表界面)
{% extends 'base.html' %} {% block content %} <h1 class="page-header">部门管理</h1> <a href="{% url 'depart_add' %}" class="btn btn-primary mb-3">添加部门</a> <table class="table table-bordered table-hover"> <thead> <tr> <th>ID</th> <th>部门名称</th> <th>操作</th> </tr> </thead> <tbody> {% for depart in depart_list %} <tr> <td>{{ depart.id }}</td> <td>{{ depart.title }}</td> <td> <a href="{% url 'depart_edit' depart.pk %}" class="btn btn-warning btn-xs">编辑</a> <a href="{% url 'depart_delete' depart.pk %}" class="btn btn-danger btn-xs">删除</a> </td> </tr> {% endfor %} </tbody> </table> {% endblock %}
4.6 depart_add.html(新增部门界面)
{% extends 'base.html' %} {% block content %} <h1 class="page-header">添加部门</h1> <form method="post" class="form-horizontal"> {% csrf_token %} <div class="form-group"> <label for="title" class="col-sm-2 control-label">部门名称</label> <div class="col-sm-10"> <input type="text" class="form-control" id="title" name="title" required> </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> {% endblock %}
4.7 depart_edit.html(部门编辑界面)
{% extends 'base.html' %} {% block content %} <h1 class="page-header">编辑部门: {{ depart.title }}</h1> <form method="post" class="form-horizontal"> {% csrf_token %} <div class="form-group"> <label for="title" class="col-sm-2 control-label">部门名称</label> <div class="col-sm-10"> <input type="text" class="form-control" id="title" name="title" value="{{ depart.title }}" required> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">保存</button> <a href="{% url 'depart_list' %}" class="btn btn-default">取消</a> </div> </div> </form> {% endblock %}
4.8depart_confirm_delete.html(部门删除)
{% block content %} <h1 class="page-header">确认删除部门</h1> <p>你确定要删除部门 "{{ depart.title }}" 吗?</p> <form method="post"> {% csrf_token %} <button type="submit" class="btn btn-danger">确认删除</button> <a href="{% url 'depart_list' %}" class="btn btn-default">取消</a> </form> {% endblock %}
5.部门管理——知识点:
5.1 static
-
概念:在 Django 中,
{% static %}
标签用于引用静态文件,如 CSS、JS、图片等。通过它,Django 能够正确找到并加载这些静态资源。 -
使用方法:在模板中,需先通过
{% load static %}
加载静态文件标签库,然后才能使用{% static '文件路径' %}
来引用静态文件,例如{% static 'plugins/bootstrap5.3/css/bootstrap.min.css' %}
。 -
作用:将静态文件与项目代码分离,便于管理和维护,同时提高了页面的加载效率和用户体验。
5.2 基础模板、子模板、父模板
-
基础模板(父模板):通常是
base.html
这类模板文件,定义了页面的基本结构和公共部分,如导航栏、头部信息、底部版权声明等,还使用{% block %}
标签定义了可被子模板覆盖的内容区域。它是整个模板继承体系的基础,起到统一页面风格和结构的作用。 -
子模板:通过
{% extends 'base.html' %}
声明继承自基础模板,然后在子模板中使用与父模板中同名的{% block %}
标签,来填充或修改父模板中定义的可替换区域,实现特定页面的个性化内容展示。比如首页模板home.html
可以继承base.html
,并在其基础上添加首页特有的内容。 -
模板继承的好处:实现代码复用,避免在每个页面模板中重复编写公共代码,提高开发效率;便于统一修改页面的公共部分,只需要在基础模板中修改一次,所有继承它的子模板都会应用该修改。
5.3 Bootstrap 3.0、4.0、5.0 以上版本之间的差别与联系
5.4联系
-
核心功能:都用于快速构建响应式、移动设备优先的网页项目,提供了一系列的 CSS 样式类和 JavaScript 插件,方便开发者进行页面布局、组件开发等工作。
-
设计理念:均遵循响应式设计原则,通过媒体查询等技术,使网页能够在不同尺寸的设备上(如手机、平板、电脑)呈现出合适的布局和样式。
5.5 差别
-
语法和类名变化:
-
Bootstrap 3:导航栏类名如
.navbar-default
表示默认样式,使用.navbar-toggle
表示折叠按钮,图标使用glyphicon
字体图标库。例如导航栏代码nav class="navbar navbar-default"
。 -
Bootstrap 4:去掉了一些旧的类名和组件,引入了新的网格系统和 Flexbox 布局。导航栏默认样式类名变为
.navbar-expand-lg.navbar-light.bg-light
等组合,图标使用 SVG 或 Font Awesome 图标库替代glyphicon
。 -
Bootstrap 5:进一步简化,不再依赖 jQuery,自带的
bootstrap.bundle.min.js
包含了 Popper.js 。类名上也有调整,如导航栏折叠按钮类名是.navbar-toggler
,并且数据属性统一加上bs-
前缀,如data-bs-toggle="collapse"
。
-
-
JavaScript 依赖:
-
Bootstrap 3:依赖 jQuery,需要先引入 jQuery 库,再引入 Bootstrap 的 JS 文件。
-
Bootstrap 4:仍然依赖 jQuery,但也开始逐步减少对其的依赖程度,部分组件可以不依赖 jQuery 实现。
-
Bootstrap 5:不再依赖 jQuery,自身的 JS 代码库更加独立和完善,使用原生 JavaScript 实现组件功能,进一步优化了性能和体积。
-
-
网格系统改进:
-
Bootstrap 3:有 12 列网格系统,通过
col-xs-*
(超小屏幕)、col-sm-*
(小屏幕)、col-md-*
(中等屏幕)、col-lg-*
(大屏幕)等类名来定义不同屏幕尺寸下的布局。 -
Bootstrap 4:网格系统进一步优化,引入了 Flexbox 布局模式,使得布局更加灵活和易于控制,同时对不同屏幕尺寸的类名使用方式进行了一些调整和简化。
-
Bootstrap 5:继续完善网格系统,增强了对响应式布局的支持,提供了更多实用的工具类,方便开发者快速实现各种复杂的布局需求。
-
在该项目模板中,使用 {% static %}
加载 Bootstrap 的 CSS 和 JS 文件,利用基础模板和子模板的继承关系来复用和定制页面结构,同时依据不同版本 Bootstrap 的特性来构建美观且功能丰富的页面。