Django——实战项目:《校园宿舍学生——管理系统》!!!

各位看官老爷们,点击关注不迷路哟。你的点赞、收藏,一键三连,是我持续更新的动力哟!!!

目录

各位看官老爷们,点击关注不迷路哟。你的点赞、收藏,一键三连,是我持续更新的动力哟!!!

寝室管理系统

1.新建项目:

2.编写表结构(ORM)

3.创建数据库等:

4.部门管理

4.1 urls.py:

4.2 views.py:

4.3 base.html(项目基础模版网页文件):

4.4 home,html(首页界面):

4.5 depart_list.html(部门列表界面)

4.6 depart_add.html(新增部门界面)

4.7 depart_edit.html(部门编辑界面)

4.8depart_confirm_delete.html(部门删除)

5.部门管理——知识点:

5.1 static

5.2 基础模板、子模板、父模板

5.3 Bootstrap 3.0、4.0、5.0 以上版本之间的差别与联系

5.4联系

5.5 差别


寝室管理系统

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.创建数据库等:

  1. 创建数据库(NAvicat中)

  2. 修改数据库配置:在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)
            # }
        }
    }
    ​
  3. 在Django中生成相应的表:

    使用命令:

     python manage.py makemigrations
     python manage.py migrate  
  4. 如果第三步未能执行成功:

    出现以下图示内容:

    为了解决以上图中出现的问题:

    就在终端中运行以下命令:

    (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 的特性来构建美观且功能丰富的页面。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值