【玩转全栈】----Django制作部门管理页面 - 实践

目录

大致效果

BootStrap

BootStrap简介

BootStrap配置

BootStrap使用

基本配置

部分代码解释及注意：

用户编辑：

新添数据：

删除数据：

大致效果

我先给个大致效果，基本融合了Django、Bootstrap、css、html等等。

基于Django的部门管理系统

BootStrap

BootStrap简介

Bootstrap 是一个由 Twitter 团队开发的开源前端框架，专注于帮助开发者快速构建响应式和现代化的网页。它基于 HTML、CSS 和 JavaScript，提供了一系列强大的组件和工具，包括栅格系统、按钮、导航栏、表单、模态框、卡片、警告框等，使网页开发变得更加高效和规范化。

Bootstrap 的核心特点是响应式设计，通过其强大的栅格系统和内置的媒体查询，开发者可以轻松创建在不同设备（如手机、平板、PC）上都能正常显示的页面。它还具有良好的跨浏览器兼容性，能够确保网页在主流浏览器中的一致性。

此外，Bootstrap 提供了丰富的可定制性，开发者可以通过修改变量或定制化 CSS 来调整样式。同时，它拥有大量社区支持和第三方资源，如模板、插件和扩展，大幅减少开发时间。Bootstrap 适用于从简单的静态网站到复杂的 Web 应用的快速开发，是现代前端开发中常用的工具之一。

BootStrap配置

需要大家自己去BootStrap官网上下载源码，然后引入即可，这里我已经给大家提供了，大家拷贝即可：

大家复制到此位置即可

引入也很简单，复制下面两行代码到html页面中，如图所示：

{% load static %}

BootStrap使用

如果您学过vue，那一定知道element-ui，BootStrap和element-ui一样，作用都是使用组件 Demo 快速体验交互细节，帮助工程师快速开发。

BootStrap使用也很简单，打开BootStrap官网：

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

我这里举个使用的例子：

先找到自己需要的页面样式

复制代码到自己页面上就能显示相同的效果

像上面那个因为代码太长，官网没有直接给出源码的，可以点开F12工具，或者右键检查，定位到这个表格元素，右键table复制outerHTML代码即可。

运行得到的页面和官网差不多

有时页面也会因为自己的一些设置会有不同，可以自己修改。

基本配置

基本配置包括数据库创建和连接，可以直接用之前创建的app01_department表，有不知道的可以看看这篇：

【玩转全栈】----Django连接MySQL_django mysql-CSDN博客

像之前也写了一个用户管理案例，但页面不是很美观，基本的逻辑都是通的，本篇博客着手BootStrap组件库，带你使用BootStrap快速制作一个美观的页面。

源码展示：

用户管理大致逻辑：

urls.py:

from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path("",views.depart_list),
    path("depart/list/", views.depart_list),
    path("depart/add/", views.depart_add),
    path("depart/delete/", views.depart_delete),
    path("depart//edit/", views.depart_edit),
]

view.py:

from django.http import HttpResponse
from django.shortcuts import render, redirect
from app01.models import Department
import sys
def depart_list(request):
    """部门列表"""
    queryset = Department.objects.all()
    print(queryset)
    # sys.stdout.flush()  # 强制刷新输出
    return render(request, "depart_list.html",{"queryset":queryset})
def depart_add(request):
    if request.method == "GET":
        return render(request, "depart_add.html")
    else:
        title = request.POST.get("title")
        pwd = request.POST.get("pwd")
        # 密码正确，放入数据库
        if pwd == "1234":
            Department.objects.create(title=title)
    return redirect("/depart/list")
def depart_delete(request):
    nid = request.GET.get("nid")
    print(nid)
    Department.objects.filter(id=nid).delete()
    return redirect("/depart/list")
def depart_edit(request,nid):
    # filter获取匹配的多个数据，get获取一个
    obj = Department.objects.filter(id=nid).first()
    if request.method == "GET":
        return render(request, "depart_edit.html",{"obj":obj})
    else:
        title = request.POST.get("title")
        pwd = request.POST.get("pwd")
        if pwd == "1234":
            Department.objects.filter(id=nid).update(title=title)
            return redirect("/depart/list")
    return render(request, "depart_edit.html", {"obj": obj})

settings文件中的数据库配置和models文件中的操作和之前博客的都一样，不用做修改。

页面：

（没学过前端并且不想学的直接复制就行，前提是前面的BoosStrap已成功导入）

depart_list.html:

{% load static %}



    
    Title
    
    


{#<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>#}
{#<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>#}





    
    

        

            
            部门列表

        

        
          {% for obj in queryset %}
            
            {% endfor %}
        

          
            

              ID
              部门名称
              操作
            

          
          

              {
  { obj.id }}
              {
  { obj.title }}
              
                  编辑
                  删除

depart_add.html:

{% load static %}



    
    添加
{#    压缩版本#}
    
    


<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>



    

        

          
          
新建 部门

          

            

                {% csrf_token %}
              
              

                
                

                  
                

              

              
              

                
                

                  
                

              

              
              

                

                  
                

              

            

          

          
          
            ...
          

        

    




<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

depart_edit.html:

{% load static %}



    
    添加
{#    压缩版本#}
    
    


<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>



    

        

          
          
修改 部门

          

            

                {% csrf_token %}
              
              

                
                

                  
                

              

               
              

                
                

                  
                

              

              
              

                

                  
                

              

            

          

          
          
            ...
          

        

    




<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

部分代码解释及注意：

这里代码按文件分开说的话可能说不清楚，下面我将按功能解释。

用户编辑：

url.py:

path("depart//edit/", views.depart_edit)

这里的int:nid是动态传值，之前都是学的静态url，使用正则表达式可以使url变得动态起来。这里可以理解为：用户点击编辑按钮，会获得该行的id，并通过id构造一个专属url，从而跳转到编辑页面。

在depart_list.html中有这么一句代码：

编辑

用户点击编辑后会获取点击行的id，并跳转到动态url

在视图函数中：

将获取到的nid传给视图函数，视图函数根据id获取改行数据，传给depart_edit.html，以将原数据显示到编辑页面，用户在编辑页面修改信息后，点击提交，视图函数获取新数据，再到数据库更新，然后重定向至depart_list.html页面进行更新显示。

注意：此处表单没加action，即提交地址，则默认提交到已经渲染了的视图函数。

def depart_edit(request,nid):
    # filter获取匹配的多个数据，get获取一个
    obj = Department.objects.filter(id=nid).first()
    if request.method == "GET":
        return render(request, "depart_edit.html",{"obj":obj})
    else:
        title = request.POST.get("title")
        pwd = request.POST.get("pwd")
        if pwd == "1234":
            Department.objects.filter(id=nid).update(title=title)
            return redirect("/depart/list")
    return render(request, "depart_edit.html", {"obj": obj})

新添数据：

简单的POST请求，数据库存储，传参显示。可以参考用户编辑逻辑。

删除数据：

在depart_list.html中点击删除，获取该行的id值并构造动态url，执行对应的删除函数

删除

注意id直接通过 URL 的查询参数传参，视图函数中直接GET就能拿到，然后在数据库中删除，并重定向回depart_list页面。

注意：

用户编辑中的nid和删除数据中的nid，后者实际上是专门通过url传递参数的，查询参数（Query Parameters），它会将 nid={ { obj.id }} 作为 URL 的一部分发送到服务器。前面的是直接构造了动态url，直接通过视图函数参数列表传参，ID 是作为 URL 的一部分传递给服务器的，不是查询参数。

具体区别：

特性

加问号（查询参数）href="/depart/delete/?nid={ { obj.id }}"

不加问号（路径参数）href="/depart/delete/{ { obj.id }}"

URL 格式

/depart/delete/?nid={ { obj.id }}

/depart/delete/{ { obj.id }}

信息传递方式

通过查询参数传递信息，格式为 ?key=value

通过 URL 路径传递信息，格式为 /<value>

服务器端获取方式

使用 request.GET 获取参数值

使用 Django URL 配置中的路径参数获取

适用场景

通常用于过滤、分页、排序等场景，或者传递附加的非核心数据

适用于 RESTful 风格的 API 或直接操作资源（如删除、编辑）

Django 路由配置

path('depart/delete/', views.depart_delete)

path('depart/delete/<int:nid>/', views.depart_delete)

常见用途

用于查询、搜索、筛选、分页等

用于操作特定资源的唯一标识（如删除特定部门）

SEO 友好性

查询参数不会显示在浏览器历史记录中，可能对搜索引擎不太友好

路径参数通常更直观，有时对 SEO 更有利，尤其是用于 RESTful 风格的 API

简洁性

URL 中包含查询参数，可能变长，参数较多时不够简洁

URL 结构更简洁、直观，适用于表示资源层次结构

可读性

查询参数有时可能让 URL 看起来不那么直观

路径参数使 URL 直接指向具体的资源，通常更易于理解

本次的分享就到这里的，感谢大家的三连！！！

posted @ 2025-12-13 21:10  yangykaifa  阅读(1)  评论(0)    收藏  举报