当前位置： 首页 > news >正文

django实现部门表的增删改查界面

news 2025/6/26 21:50:16

1、前期准备

  • 部署好mysql数据库，创建好unicom数据库
  • 下载好bootstap的插件
  • 下载好jquery的插件
  • 下载好mysqlclient-1.4.6-cp36-cp36m-win_amd64.whl的安装包，根据python的版本下载

2、创建项目

在pycharm中创建项目在这里插入图片描述
在pycharm的终端创建虚拟环境

 py -m venv venv

激活虚拟环境
在这里插入图片描述
在这里插入图片描述
这样就可以自动激活虚拟环境了
再安装需要的模块

pip install django

把mysqlclient-1.4.6-cp36-cp36m-win_amd64.whl放到项目跟目录

 pip install mysqlclient-1.4.6-cp36-cp36m-win_amd64.whl

配置数据库，打开settings.py


DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'unicom','USER': 'root','PASSWORD': '123456','HOST': '172.251.3.132','PORT': 3306,}
}

创建app

py manage.py startapp app01

注册app,在settings.py中添加最后一行
在这里插入图片描述

3、使用django创建数据库表

在app01的目录下的models.py中写如下代码
创建一个Department的表，有一个部门名称的字段，title
django会自动给每个表加上自增长id字段

from django.db import models# Create your models here.class Department(models.Model):"""部门表"""title = models.CharField(verbose_name="标题",max_length=32)

执行数据库执行命令

py -3 manage.py makemigrations
py -3 manage.py migrate

4、导航条编写

使用bootsrap的
需要引入静态文件
在这里插入图片描述
因为有不同的页面，所以我们使用模板继承，把导航条写在一个模板文件中，layout.html
进入https://v3.bootcss.com/components/ 的官网，找到导航条
在这里插入图片描述
把这个导航条的代码拷贝到自己的layout.html文件中，在根据自己的需要做修改
在这里插入图片描述
修改后的layout.html内容如下：

{% load static %}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>部门管理</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">{% block css %}{% endblock%}<style>.navbar {border-radius: 0;}</style>
</head>
<body>
<nav class="navbar navbar-default"><div class="container"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">用户管理系统</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">部门管理 <span class="sr-only">(current)</span></a></li><li><a href="#">用户管理</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">张顺 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">个人信息</a></li><li><a href="#">注销</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div></div>
</nav>
<div>{% block content %}{% endblock%}
</div>
<script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>{% block js %}{% endblock%}
</body>
</html>

5、部门列表编写

在urls.py中定义好路由

from django.urls import path
from app01 import viewsurlpatterns = [path('depart/list/', views.depart_list),
]

在views.py中定义函数

from django.shortcuts import render,redirect,HttpResponse
from app01 import models
def depart_list(request):"""部门管理"""#去数据库中获取所有的部门列表#[对象]queryset = models.Department.objects.all()return render(request,'depart_list.html',{'queryset':queryset})

将从数据库获取的对象传给depart_list.html页面，页面循环显示
使用了bootstrap的面板和表格，所有的html都放到app01的templates目录

{% extends 'layout.html' %}{% block content %}<div class="container"><div style="margin-bottom: 10px"><a class="btn btn-success" href="/depart/add/">新建部门</a></div><div class="panel panel-default"><div class="panel-heading" ><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 部门列表</div><table class="table table-bordered"><thead><tr><th>ID</th><th>名称</th><th>操作</th></tr></thead><tbody>{% for item in queryset %}<tr><td>{{ item.id }}</td><td>{{ item.title }}</td><td><a class="btn btn-primary btn-xs" href="/depart/{{ item.id }}/edit/">编辑</a><a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ item.id }}">删除</a></td></tr>{% endfor %}</tbody></table></div></div>{% endblock %}

运行项目的效果
在这里插入图片描述

6、添加部门

在部门列表展示页，点击新建部门需要跳转到新建部门的页面/depart/add/， 下面先定义路由

from django.urls import path
from app01 import viewsurlpatterns = [path('depart/list/', views.depart_list),path('depart/add/', views.depart_add),
]

在urls.py中定义函数
如果是get请求就返回depart_add.html部门添加的页面，如果是添加了数据，post提交数据，就先获取post提交过来的部门名称title，保存数据到数据库，最后在返回到部门列表

from django.shortcuts import render,redirect,HttpResponse
from app01 import modelsdef depart_add(request):"""添加部门"""if request.method=='GET':return render(request,'depart_add.html')#获取用户POST提交过来的数据title = request.POST.get("title")#保存数据到数据库models.Department.objects.create(title=title)#重定向回部门列表return redirect("/depart/list/")

在写depart_add.html，

{% extends 'layout.html' %}{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">新建部门</div><div class="panel-body"><form class="form-horizontal" method="post">{% csrf_token %}<div class="form-group"><label  class="col-sm-2 control-label">部门名称</label><div class="col-sm-10"><input type="text" class="form-control" name="title" placeholder="部门名称"></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></div></div></div>{% endblock %}

效果如下：
在这里插入图片描述

7、删除部门

定义路由，urls.py

from django.urls import path
from app01 import viewsurlpatterns = [path('depart/list/', views.depart_list),path('depart/add/', views.depart_add),path('depart/delete/', views.depart_delete),
]

views.py 定义函数
通过在get路径后面传nid 来表示要删除的id,这个值是在depart_list.html中，当点击删除的时候带出来的
在这里插入图片描述

from django.shortcuts import render,redirect,HttpResponse
from app01 import modelsdef depart_delete(request):"""删除部门"""# http://127.0.0.1:8000/depart/delete/?nid=1#获取nidnid = request.GET.get("nid")#删除数据库id为nid的值models.Department.objects.filter(id=nid).delete()return redirect("/depart/list/")

8、编辑部门

定义路由，urls.py， 将要编辑的id放到访问路径中

from django.urls import path
from app01 import viewsurlpatterns = [path('depart/list/', views.depart_list),path('depart/add/', views.depart_add),path('depart/delete/', views.depart_delete),#http://127.0.0.1:8000/depart/2/edit/path('depart/<int:nid>/edit/', views.depart_edit),
]

views.py 如果是get 请求根据nid获取数据库的对象，对象包含id 和title,将title传给编辑页面，显示当前编辑的是什么数据
提交数据后修改数据库的title字段，重定向到部门列表页面

from django.shortcuts import render,redirect,HttpResponse
from app01 import models
##http://127.0.0.1:8000/depart/2/edit/
def depart_edit(request,nid):"""编辑部门"""if request.method == 'GET':# http://127.0.0.1:8000/depart/2/edit/row_query = models.Department.objects.filter(id=nid).first()return render(request,'depart_edit.html',{'row_query':row_query})#获取用户提交的标题title = request.POST.get("title")#修改数据库部门名称字段models.Department.objects.filter(id=nid).update(title=title)return redirect("/depart/list/")

depart_edit.html 页面，根添加的页面差不多的

{% extends 'layout.html' %}{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">编辑部门</div><div class="panel-body"><form class="form-horizontal" method="post">{% csrf_token %}<div class="form-group"><label  class="col-sm-2 control-label">部门名称</label><div class="col-sm-10"><input type="text" class="form-control" name="title" placeholder="部门名称" value="{{ row_query.title }}"></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></div></div></div>{% endblock %}

相关文章：

django实现部门表的增删改查界面

1、前期准备 部署好mysql数据库&#xff0c;创建好unicom数据库下载好bootstap的插件下载好jquery的插件下载好mysqlclient-1.4.6-cp36-cp36m-win_amd64.whl的安装包&#xff0c;根据python的版本下载 2、创建项目 在pycharm中创建项目 在pycharm的终端创建虚拟环境 py -m v…...

编程日记 2023/8/4 2:38:29

Tomcat的介绍和安装配置、eclipse中动态web项目的创建和运行、使用IDEA创建web项目并运行

一、Tomcat的介绍和安装配置 安装tomcat&#xff1a; 环境变量的配置&#xff1a; 配置之后重启cmd&#xff0c;执行startup命令&#xff0c;启动tomcat 在localhost:8080&#xff0c;能进入tomcat主界面&#xff0c;说明配置成功 二、eclipse中动态web项目的创建和运行 tomca…...

编程日记 2023/8/4 2:37:27

idea操作——已经push到远程的代码回滚（不保留本地更改）

1. git&#xff1a; 2. 找到相应分支--->找到要回滚的代码的位置----->右键&#xff0c;然后选择如图的选项&#xff1a; 3.下图的选项选择hard&#xff0c;然后选择reset 4.操作完成后等一会&#xff0c;待同步结束后push代码到远程&#xff0c;选择force push.&#xf…...

编程日记 2023/8/4 2:36:25

无涯教程-Lua - 垃圾回收

Lua使用自动内存管理&#xff0c;该管理使用基于Lua内置的某些算法的垃圾回收。 垃圾收集器暂停 垃圾收集器暂停用于控制垃圾收集器之前需要等待多长时间&#xff1b; Lua的自动内存管理再次调用它。值小于100意味着Lua将不等待下一个周期。同样&#xff0c;此值的较高值将导…...

编程日记 2023/8/4 2:35:24

DP(各种模型）

数字三角形模型 摘花生 Hello Kitty想摘点花生送给她喜欢的米老鼠。 她来到一片有网格状道路的矩形花生地(如下图)&#xff0c;从西北角进去&#xff0c;东南角出来。 地里每个道路的交叉点上都有种着一株花生苗&#xff0c;上面有若干颗花生&#xff0c;经过一株花生苗就…...

编程日记 2023/8/4 2:34:20

开学在即，这个超好用的中小学新生录取查询系统制作方法值得借鉴

即将开学&#xff0c;中小学负责招生的老师面临着新学年的招生工作。这是一项紧迫且重要的任务&#xff0c;需要老师们迅速而有效地应对。在新生录取过程中&#xff0c;有几个关键任务需要尽快完成。 首先&#xff0c;老师们需要录入新生的成绩信息。这包括学生的考试成绩、综…...

编程日记 2023/8/4 2:33:19

使用Canvas裁剪图片

使用Canvas裁剪图片 概述 在Web开发中&#xff0c;我们经常需要对图片进行裁剪&#xff0c;以满足不同尺寸需求或者实现图片的局部展示。本篇博客将带您深入了解如何使用Canvas技术来实现图片的裁剪功能。我们将通过一个实例来演示如何利用Canvas绘制图片&#xff0c;并通过蒙…...

编程日记 2023/8/4 2:32:18

JavaScript |（三）内建对象 | 数组 | string对象 | 尚硅谷JavaScript基础实战

学习来源&#xff1a;尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 &#x1f4da;数组&#x1f407;数组介绍⭐️数组&#xff08;Array&#xff09;⭐️基本操作⭐️数组的字面量 &#x1f407;数组中的常用方法⭐️push()⭐️pop()⭐️unshift()⭐️shif…...

编程日记 2023/8/4 2:31:17

势能线段树

目录 简单介绍 题目 1. 上帝造题的七分钟 2 2.SUM and REPLACE 3. And RMQ 总结 简单介绍 题目 1. 上帝造题的七分钟 2 链接&#xff1a;https://www.luogu.com.cn/problem/P4145 维护两种操作 1.区间开根号(下取整) 2.区间和询问 显然无法通过懒标记来计算区间开根号…...

编程日记 2023/8/4 2:30:16

【phaser微信抖音小游戏开发004】往画布上增加文本以及文本的操作

我们在states中创建st004.js的类&#xff0c;或者将states中的index.js直接重命名为st004.js&#xff0c;把里面的类名也修改为st004.如下图 在main.js中&#xff0c;引入st004,并设置启用的state为st004。如下图 接下来到states/st004里面&#xff0c;在create里面将文本修改一…...

编程日记 2023/8/4 2:29:15

【1.4】Java微服务：服务注册和调用（Eureka和Ribbon实现）

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 微服务 ✨特色专栏&#xff1a; 知识分享 &#x…...

编程日记 2023/8/4 2:28:13

QT中使用ffmpeg的api进行视频的播放

在了解ffmpeg使用api进行视频的播放之前&#xff0c;我们首先了解一下视频的播放流程。 一、视频的播放流程 首先是我们最常见的视频文件&#xff0c;在播放流程中首先是要打开视频文件&#xff0c;将视频文件中的数据进行解封装&#xff0c;之后再将解封装之后的视频进行解码…...

编程日记 2023/8/4 2:27:09

使用idea实现git操作大全（在项目开发中遇到的实际情况

使用idea实现git操作大全&#xff08;在项目开发中遇到的实际情况&#xff09; 1.安装git插件2.在开发中切记拉一个自己的分支 1.安装git插件 2.在开发中切记拉一个自己的分支 选中需要拉的分支&#xff0c;右键该分支&#xff0c;选中new breach from “分支”&#xff0c;点…...

编程日记 2023/8/4 2:26:08

SQL面试题：一个优化案例

问题描述 假如存在以下两个表&#xff1a; CREATE TABLE customer ( C_CUSTKEY int NOT NULL, C_NAME varchar(25) NOT NULL, C_ADDRESS varchar(40) NOT NULL, C_NATIONKEY int NOT NULL, C_PHONE char(15) NOT NULL, C_ACCTBAL decimal(15,2) NOT NULL, C_MKTSEGMENT char(…...

编程日记 2023/8/4 2:25:07

链表的总体涵盖以及无哨兵位单链表实现——【数据结构】

&#x1f60a;W…Y&#xff1a;个人主页 在学习之前看一下美丽的夕阳&#xff0c;也是很不错的。 如果觉得博主的美景不错&#xff0c;博客也不错的话&#xff0c;关注一下博主吧&#x1f495; 在上一期中&#xff0c;我们说完了顺序表&#xff0c;并且提出顺序表中的问题 1. 中…...

编程日记 2023/8/4 2:24:06

网页版Java五子棋项目（一）websocket【服务器给用户端发信息】

网页版Java五子棋项目&#xff08;一&#xff09;websocket【服务器给用户端发信息】 一、为什么要用websocket二、websocket介绍原理解析 三、代码演示1. 创建后端api&#xff08;TestAPI&#xff09;新增知识点&#xff1a;extends TextWebSocketHandler重写各种方法 2. 建立…...

编程日记 2023/8/4 2:23:05

企业大数据可视化案例专题分享-入门

一、什么是数据可视化&#xff1f; 基本概念&#xff1a;数据可视化是以图示或图形格式表示的数据。让决策者可以看到以直观方式呈现的分析&#xff0c;以便他们可以掌握困难的概念或识别新的模式。借助交互式可视化&#xff0c;可以使用技术深入挖掘图表和图形以获取更多详细…...

编程日记 2023/8/4 2:22:04

GoogLeNet卷积神经网络-笔记

GoogLeNet卷积神经网络-笔记 GoogLeNet是2014年ImageNet比赛的冠军&#xff0c; 它的主要特点是网络不仅有深度&#xff0c; 还在横向上具有“宽度”。 由于图像信息在空间尺寸上的巨大差异&#xff0c; 如何选择合适的卷积核来提取特征就显得比较困难了。 空间分布范围更广的…...

编程日记 2023/8/4 2:21:02

腾讯云TencentOS Server镜像系统常见问题解答

腾讯云TencentOS Server镜像是腾讯云推出的Linux操作系统&#xff0c;完全兼容CentOS生态和操作方式&#xff0c;TencentOS Server操作系统为云上运行的应用程序提供稳定、安全和高性能的执行环境&#xff0c;TencentOS可以运行在腾讯云CVM全规格实例上&#xff0c;包括黑石物理…...

编程日记 2023/8/4 2:20:01

【项目 进程13】2.28共享内存（1） 2.29共享内存（2）

文章目录 2.28共享内存&#xff08;1&#xff09;共享内存&#xff08;效率最高&#xff0c;比内存映射更高。因为内存映射还需一个文件做载体&#xff09;共享内存使用步骤共享内存操作函数头文件 2.29共享内存&#xff08;2&#xff09;共享内存相关问题共享内存和内存映射的…...

编程日记 2023/8/4 2:18:57

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/6/21 11:59:52

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/6/21 7:48:44

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/6/25 1:21:34

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/6/23 4:26:05

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/6/25 2:54:22

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/6/21 5:00:15

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/6/23 3:30:40

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/6/21 3:54:35

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

编程新知 2025/6/15 12:56:16