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

【玩转全栈】----Django模板的继承

news 2025/11/8 20:57:30

 先赞后看，养成习惯！！！

目录

模板继承的好处

模板继承的语法规则

更新代码

       

         上文中的部门管理页面：

【玩转全栈】----Django制作部门管理页面-CSDN博客

        大家会发现，由于定义了多个html文件，多个html文件中有很大冗余的代码，比如导航栏、引入文件代码等等，这样的话一个文件的代码量可能就非常大，可读性不高。有没有什么方法能简化操作呢，当然，可以通过模板间的继承语法。

模板继承的好处

        Django模板的继承通过定义一个基础模板（如包含页面头部、导航栏和底部的整体布局），允许其他模板在此基础上扩展和定制，从而实现代码复用和统一管理。这种方式减少了重复代码的编写，提高了开发效率和可维护性。当需要更改页面布局时，只需修改基础模板即可统一更新所有子模板，避免逐个修改多个文件。此外，模板继承使页面结构清晰，便于团队协作。子模板中仅需关注特定内容区域的定义，符合模块化和分离关注点的设计原则，大幅提升了项目的可扩展性和灵活性。

模板继承的语法规则

        首先需要定义一个模板html文件，模板文件中的一切都会被其他html文件继承，在与其他html文件不同的位置加上：

{% block content %}{% endblock %}

可以理解为占位符，content 是该处占位符的名字，可以修改。

在要引入模板html的文件中，在最前面加入引入语句：

{% extends 'layout.html' %}

layout.html就是模板文件的文件名。

然后是内容：

{% block content %}"""
内容
"""{% endblock %}

当然也可以些多个占位符，给一些特定语法区域留位置，比如css、js.

更新代码

        通过这样的方式，能大大缩短子文件的代码量，像之前的用户管理页面，使用了模板语法后就是这样了:

layout.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"><style>.navbar{border-radius: 0;}.my-div{height: 600px;width: 900px;margin: auto ;{#margin-top: 40px ;#}{#margin-top: 20px;#}border: 1px solid #d5dfe3;padding: 20px 40px;border-radius: 10px;box-shadow: 5px 5px 22px #aaa;}</style>
</head>
<body>{#<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>#}
{#<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>#}<nav class="navbar navbar-default"><div class="container-fluid"><!-- 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><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="#">上海</a></li><li role="separator" class="divider"></li><li><a href="#">福建</a></li><li role="separator" class="divider"></li><li><a href="#">黑龙江</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group">{% csrf_token %}<label><input type="text" class="form-control" placeholder="Search"></label></div><button type="submit" class="btn btn-default">提交</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</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><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav><div class="container-fluid">
{#相当于占位符#}{% block content %}{% endblock %}
</div>
</body>
</html>

depart_list.html: 

{% extends 'layout.html' %}
{% block content %}<div class="container-fluid">
<div class="my-div"><div style="margin-bottom: 10px"><a class="btn btn-primary" href="/depart/add/">
{#            target="_blank"使得跳转打开新页面#}<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新建部门</a></div><div><div class="panel-heading"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>部门列表</div><div class="bs-example" data-example-id="contextual-table"><table class="table"><thead><tr><th>ID</th><th>部门名称</th><th>操作</th></tr></thead><tbody>{% for obj in queryset %}<tr><th scope="row">{{ obj.id }}</th><td>{{ obj.title }}</td><td><a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit">编辑</a><a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a></td></tr>{% endfor %}</table></div></div>
</div>
</div>
{% endblock %}

depart_add.html:

{% extends 'layout.html' %}
{% block content %}<style>.navbar{border-radius: 0;}.my-div{height: 600px;width: 900px;margin: auto ;{#margin-top: 40px ;#}{#margin-top: 20px;#}border: 1px solid #d5dfe3;padding: 20px 40px;border-radius: 10px;box-shadow: 5px 5px 22px #aaa;}</style><div class="my-div"><div class="container"><div class="panel panel-default"  style="width: 750px;margin-top: 100px"><!-- Default panel contents --><div class="panel-heading">新建 部门</div><div class="panel-body"><form class="form-horizontal" method="POST">{% csrf_token %}<!-- 部门名输入框 --><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">部门名</label><div class="col-sm-10"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="XX部"></div></div><!-- 管理员密码输入框 --><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">管理员密码</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd"></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><!-- Table --><table class="table">...</table></div></div>
</div>
{% endblock %}

depart_edit.html:

{% extends 'layout.html' %}{% block content %}<style>.navbar{border-radius: 0;}.my-div{height: 600px;width: 900px;margin: auto ;{#margin-top: 40px ;#}{#margin-top: 20px;#}border: 1px solid #d5dfe3;padding: 20px 40px;border-radius: 10px;box-shadow: 5px 5px 22px #aaa;}</style><div class="my-div"><div class="container"><div class="panel panel-default"  style="width: 750px;margin-top: 100px"><!-- Default panel contents --><div class="panel-heading">修改 部门</div><div class="panel-body"><form class="form-horizontal" method="POST">{% csrf_token %}<!-- 部门名输入框 --><div class="form-group"><label for="inputDepartmentName" class="col-sm-2 control-label">部门名 :</label><div class="col-sm-10"><input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="{{ obj.title }}"></div></div><!-- 管理员密码输入框 --><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">管理员密码 :</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd"></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><!-- Table --><table class="table">...</table></div></div>
</div>
{% endblock %}

感谢您的三连!!!

相关文章：

【玩转全栈】----Django模板的继承

先赞后看&#xff0c;养成习惯&#xff01;&#xff01;&#xff01; 目录 模板继承的好处 模板继承的语法规则 更新代码 上文中的部门管理页面&#xff1a; 【玩转全栈】----Django制作部门管理页面-CSDN博客 大家会发现&#xff0c;由于定义了多个html文件&#xff0c;多个ht…...

编程日记 2025/1/26 12:44:27

详解数据库系统概述

数据库系统概述 1. 数据库&#xff08;Database&#xff09;1.1 定义&#xff1a;1.2 特点&#xff1a;1.3 举例&#xff1a; 2. 数据库管理系统&#xff08;DBMS&#xff1a;Database Management System&#xff09;2.1 定义&#xff1a;2.2 DBMS 的主要功能&#xff1a;2.3 常…...

编程日记 2025/1/26 12:42:25

Windows的docker中安装gitlab

一.Windows的docker中安装gitlab 1.通过阿里云拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/lab99/gitlab-ce-zh 2.在本地创建备份数据的目录 mkdir -p D:home/software/gitlab/etc mkdir -p D:home/software/gitlab/logs mkdir -p D:home/software/gitlab/dat…...

编程日记 2025/1/26 12:39:21

基于微信小程序的健身管理系统设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/1/26 12:38:20

windows 安装 mysql 教程

一、下载 点开下面的链接&#xff1a; https://downloads.mysql.com/archives/community/ 点击Download 就可以下载对应的安装包了, 安装包如下: 二、解压 下载完成后我们得到的是一个压缩包&#xff0c;将其解压&#xff0c;我们就可以得到MySQL 8.0.28 的软件本体了(就是…...

编程日记 2025/1/26 12:36:18

Vue2+OpenLayers初始化高德地图

目录 一、案例截图 二、完整代码 一、案例截图 二、完整代码 一键复制即可运行&#xff1a; <template><div id"map-container"></div> </template> <script> import { Map, View } from ol import { Tile as TileLayer } from ol…...

编程日记 2025/1/26 12:35:16

六、深入了解DI

依赖注入是⼀个过程&#xff0c;是指IoC容器在创建Bean时,去提供运⾏时所依赖的资源&#xff0c;⽽资源指的就是对象. 在上⾯程序案例中&#xff0c;我们使⽤了 Autowired 这个注解&#xff0c;完成了依赖注⼊的操作. 简单来说,就是把对象取出来放到某个类的属性中。 关于依赖注…...

编程日记 2025/1/26 12:30:08

IMX6ull项目环境配置

文件解压缩&#xff1a; .tar.gz 格式解压为 tar -zxvf .tar.bz2 格式解压为 tar -jxvf 2.4版本后的U-boot.bin移植进SD卡后&#xff0c;通过串口启动配置开发板和虚拟机网络。 setenv ipaddr 192.168.2.230 setenv ethaddr 00:04:9f:…...

编程日记 2025/1/26 12:27:05

Edge-TTS在广电系统中的语音合成技术的创新应用

Edge-TTS在广电系统中的语音合成技术的创新应用 作者&#xff1a;本人是一名县级融媒体中心的工程师&#xff0c;多年来一直坚持学习、提升自己。喜欢Python编程、人工智能、网络安全等多领域的技术。 摘要 随着人工智能技术的快速发展&#xff0c;文字转语音&#xff08;Te…...

编程日记 2025/1/26 12:24:00

芸众商城小程序会员页面部分图标不显示问题解决办法

我遇到的问题 如下图所示&#xff0c;会员中心这里的图标在小程序端显示异常。但是在网页端又是能够正常显示的。 小程序端截图&#xff1a; 网页端截图&#xff1a; 我的解决方法 检查使用的小程序版本&#xff0c;比如这里使用的是1.2.238版本的小程序&#xff0c;最后…...

编程日记 2025/1/26 12:22:58

手机app如何跳过无障碍权限实现弹框自动点击-ADB连接专题

手机app如何跳过无障碍权限实现弹框自动点击 --ADB连接专题 一、前言 我们在前期的时候&#xff0c;在双SIM卡进行协同外呼和SIM卡切换时&#xff0c;对如何在手机中“执行批处理脚本做自动点击”的内容进行预研&#xff0c;力图使用事件触发和坐标点击等方式来实现手机安装…...

编程日记 2025/1/26 12:17:52

「 机器人 」扑翼飞行器控制的当前挑战与后续潜在研究方向

前言 在扑翼飞行器设计与控制方面，虽然已经取得了显著的进步，但在飞行时间、环境适应性、能量利用效率及模型精度等方面依旧存在亟待解决的挑战。以下内容概括了这些挑战和可能的改进路径。 1. 当前挑战 1.1 飞行时间短 （1）主要原因 能源存储有限（电池容量小）、驱动系…...

编程日记 2025/1/26 12:16:51

Vue入门(Vue基本语法、axios、组件、事件分发）

Vue入门 Vue概述 Vue (读音/vju/&#xff0c;类似于view)是一套用于构建用户界面的渐进式框架&#xff0c;发布于2014年2月。与其它大型框架不同的是&#xff0c;Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三…...

编程日记 2025/1/26 12:15:50

DELL EDI：需求分析及注意事项

Dell 的 EDI 需求分析 1.对接 Dell 需要使用的 EDI 传输协议 Dell 支持的传输方式包括&#xff1a; AS2&#xff08;Applicability Statement 2&#xff09;&#xff1a;主要用于安全可靠的数据传输&#xff0c;在使用 AS2 时&#xff0c;所有数据都通过 HTTPS 或 HTTP 协议…...

编程日记 2025/1/26 12:14:47

计算机网络 （62）移动通信的展望

一、技术发展趋势 6G技术的崛起 内生智能&#xff1a;6G将强调自适应网络架构&#xff0c;通过AI驱动的智能算法提升通信能力。例如&#xff0c;基于生成式AI的6G内生智能架构将成为重要研究方向&#xff0c;实现低延迟、高效率的智能通信。信息编码与调制技术&#xff1a;新型…...

编程日记 2025/1/26 12:13:45

java 中多线程、 队列使用实例，处理大数据业务

场景&#xff1a; 从redis 订阅数据 调用线程来异步处理数据 直接上代码 定义线程管理类 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.BeansException; import org.springframework.beans.factory.BeanFactory; import org…...

编程日记 2025/1/26 12:10:42

13.图形程序接口（Graphics API）

**图形程序接口&#xff08;Graphics API&#xff09;**是计算机图形学中的一个重要概念&#xff0c;可以理解为“程序员与GPU之间的桥梁”。用通俗易懂的方式来解释&#xff1a; 通俗解释&#xff1a;图形API就像翻译官 想象你是一个老板&#xff08;程序员&#xff09;&…...

编程日记 2025/1/26 12:08:36

PPT自动化 python-pptx -7: 占位符（placeholder）

占位符&#xff08;placeholder&#xff09;是演示文稿中用于容纳内容的预格式化容器。它们通过让模板设计者定义格式选项&#xff0c;简化了创建视觉一致幻灯片的过程&#xff0c;同时让最终用户专注于添加内容。这加快了演示文稿的开发速度&#xff0c;并确保幻灯片之间的外观…...

编程日记 2025/1/26 12:07:34

Pyecharts之图表组合与布局优化

在数据可视化中&#xff0c;我们经常需要将多个图表组合在一起&#xff0c;以展示不同维度的数据或者进行对比分析。同时&#xff0c;合理的布局能够提升图表的可读性和用户体验。Pyecharts 提供了强大的组件和方法&#xff0c;让我们可以轻松实现图表的组合和布局优化。本篇将…...

编程日记 2025/1/26 12:02:27

流行的开源高性能数据同步工具 - Apache SeaTunnel 整体架构运行原理

概述 背景 数据集成在现代企业的数据治理和决策支持中扮演着至关重要的角色。随着数据源的多样化和数据量的迅速增长&#xff0c;企业需要具备强大的数据集成能力来高效地处理和分析数据。SeaTunnel通过其高度可扩展和灵活的架构&#xff0c;帮助企业快速实现多源数据的采集、…...

编程日记 2025/1/26 12:01:15

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/11/7 20:35:54

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/11/8 8:30:44

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/10/23 16:56:42

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2025/11/8 5:25:18

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2025/11/8 9:14:58

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2025/11/7 19:43:21

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13

数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

编程新知 2025/11/7 2:35:56

【2D与3D SLAM中的扫描匹配算法全面解析】

引言 扫描匹配(Scan Matching)是同步定位与地图构建(SLAM)系统中的核心组件&#xff0c;它通过对齐连续的传感器观测数据来估计机器人的运动。本文将深入探讨2D和3D SLAM中的各种扫描匹配算法&#xff0c;包括数学原理、实现细节以及实际应用中的性能对比&#xff0c;特别关注…...

编程新知 2025/7/31 1:19:14