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

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

目录

模板继承的好处

模板继承的语法规则

更新代码

       

         上文中的部门管理页面：

【玩转全栈】----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 %}

感谢您的三连!!!

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/68436.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

nosql mysql的区别

nosql mysql的区别

NoSQL 和 MySQL 是两种不同类型的数据库管理系统&#xff0c;它们在设计理念、数据模型、可扩展性和应用场景等方面有着本质的区别。 NoSQL 数据库 特点: 灵活的数据模型: NoSQL 数据库通常没有固定的表结构&#xff0c;可以很容易地存储不同结构的文档或键值对。水平扩展: …
阅读更多...
python实现dbscan

python实现dbscan

python实现dbscan 原理 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法。它将簇定义为密度相连的点的最大集合&#xff0c;能够把具有足够高密度的区域划分为簇&#xff0c;并可在噪声的空间数据库中发现任意形…
阅读更多...
Lustre Core 语法 - 比较表达式

Lustre Core 语法 - 比较表达式

概述 Lustre v6 中的 Lustre Core 部分支持的表达式种类中&#xff0c;支持比较表达式。相关的表达式包括 , <>, <, >, <, >。 相应的文法定义为 Expression :: Expression Expression | Expression <> Expression | Expression < Expression |…
阅读更多...
gesp(C++六级)（4）洛谷：B3874：[GESP202309 六级] 小杨的握手问题

gesp(C++六级)（4）洛谷：B3874：[GESP202309 六级] 小杨的握手问题

gesp(C六级)&#xff08;4&#xff09;洛谷&#xff1a;B3874&#xff1a;[GESP202309 六级] 小杨的握手问题 题目描述 小杨的班级里共有 N N N 名同学&#xff0c;学号从 0 0 0 至 N − 1 N-1 N−1。 某节课上&#xff0c;老师安排全班同学进行一次握手游戏&#xff0c;具…
阅读更多...
【自然语言处理（NLP）】机器翻译之数据处理（数据收集、数据清洗、数据分词、数据标注、数据划分）

【自然语言处理（NLP）】机器翻译之数据处理（数据收集、数据清洗、数据分词、数据标注、数据划分）

文章目录 介绍机器翻译之数据处理数据收集数据清洗数据分词数据标注数据划分代码实现导包数据查看处理函数数据预处理词元化统计每句话的长度的分布情况截断或者填充文本序列将机器翻译的文本序列转换成小批量tensor加载数据试用一下 个人主页&#xff1a;道友老李 欢迎加入社区…
阅读更多...
【物联网】ARM核常用指令(详解)：数据传送、计算、位运算、比较、跳转、内存访问、CPSR/SPSR、流水线及伪指令

【物联网】ARM核常用指令(详解)：数据传送、计算、位运算、比较、跳转、内存访问、CPSR/SPSR、流水线及伪指令

文章目录 指令格式&#xff08;重点&#xff09;1. 立即数2. 寄存器位移 一、数据传送指令1. MOV指令2. MVN指令3. LDR指令 二、数据计算指令1. ADD指令1. SUB指令1. MUL指令 三、位运算指令1. AND指令2. ORR指令3. EOR指令4. BIC指令 四、比较指令五、跳转指令1. B/BL指令2. l…
阅读更多...
过年之无用知识研究：std::is_assignable到底怎么个事？

过年之无用知识研究：std::is_assignable到底怎么个事？

下面是gcc的std::is_assignable相关源码&#xff1a;template<typename _Tp, typename _Up>class __is_assignable_helper{template< typename _Tp1, typename _Up1,typename decltype(declval<_Tp1>() declval<_Up1>()) //注意这行 >static true_ty…
阅读更多...
单链表算法实战：解锁数据结构核心谜题——链表的回文结构

单链表算法实战：解锁数据结构核心谜题——链表的回文结构

题目如下&#xff1a; 解题过程如下&#xff1a; 回文结构举例&#xff1a; 回文数字&#xff1a;12521、12321、1221…… 回文字符串&#xff1a;“abcba”、“abba”…… 并不是所有的循环嵌套的时间复杂度都是O(n^2) 可以用C写C程序&#xff1a; C里可以直接使用ListNode…
阅读更多...
C++ 包装器与绑定器的应用之回调函数的实现

C++ 包装器与绑定器的应用之回调函数的实现

回调函数的实现 在消息队列和网络库的框架中&#xff0c;当接收到消息&#xff08;报文&#xff09;时&#xff0c;回调用户自定义的函数对象&#xff0c;把消息&#xff08;报文&#xff09;参数传给它&#xff0c;由它决定如何处理。 queue参考文章:C queue(STL queue&…
阅读更多...
除了layui.js还有什么比较好的纯JS组件WEB UI？在谷歌浏览上显示

除了layui.js还有什么比较好的纯JS组件WEB UI？在谷歌浏览上显示

以下是一些比较好的纯JS组件WEB UI&#xff0c;可以在谷歌浏览器上良好显示&#xff1a; 1. Sencha 特点&#xff1a;提供超过140个高性能UI组件&#xff0c;用于构建现代应用程序。支持与Angular和React集成&#xff0c;提供企业级网格解决方案。 适用场景&#xff1a;适用于…
阅读更多...
计算机网络 （58）无线局域网WLAN

计算机网络 （58）无线局域网WLAN

前言 无线局域网WLAN&#xff08;Wireless Local Area Network&#xff09;是一种利用无线通信技术将计算机设备互联起来&#xff0c;构成可以互相通信和实现资源共享的网络体系。 一、定义与特点 定义&#xff1a; WLAN通过无线信道代替有线传输介质连接两个或多个设备形成一个…
阅读更多...
AIP-132 标准方法：List

AIP-132 标准方法：List

编号132原文链接AIP-132: Standard methods: List状态批准创建日期2019-01-21更新日期2022-06-02 在许多API中&#xff0c;通常会向集合URI&#xff08;例如 /v1/publishers/1/books &#xff09;发出GET请求&#xff0c;获取集合中资源的列表。 面向资源设计&#xff08;AIP…
阅读更多...
Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局

Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局

要使用 Vue 实现上传 Word 模板、打印并设置自定义样式和布局&#xff0c;可以借助一些工具和库来完成这个任务。 实现步骤 创建 Vue 项目&#xff1a;使用 Vue CLI 创建一个新的 Vue 项目。安装依赖&#xff1a;安装 docx-templates 库来处理 Word 模板&#xff0c;file-sav…
阅读更多...
算法随笔_28:最大宽度坡_方法2

算法随笔_28:最大宽度坡_方法2

上一篇:算法随笔_27:最大宽度坡-CSDN博客 题目描述如下: 给定一个整数数组 nums&#xff0c;坡是元组 (i, j)&#xff0c;其中 i < j 且 nums[i] < nums[j]。这样的坡的宽度为 j - i。 找出 nums 中的坡的最大宽度&#xff0c;如果不存在&#xff0c;返回 0 。 示例 …
阅读更多...
C++中函数返回值当引用

C++中函数返回值当引用

文章目录 一、概述二、返回值当引用的基本语法三、返回局部变量的引用四、返回引用的常见用途五、返回右值引用六、总结 一、概述 在 C 中&#xff0c;函数返回值当引用&#xff08;即返回引用&#xff09;是一个常见的编程技巧。它可以让你返回一个函数内部的局部变量或对象的…
阅读更多...
10 款《医学数据库和期刊》查阅网站

10 款《医学数据库和期刊》查阅网站

在毕业设计过程中，需要查阅到关于医学的相关文献和图片作为参考，发现下面10款非常的好用，作为分享。 1. PubMed: PubMed 搜索关键词如“lung cancer CT images”或“lung cancer CT scan”。 Radiopaedia: https://radiopaedia.org/ 这是一个放射学专业网站，有大量肺癌的CT…
阅读更多...
OpenCV：形态学梯度

OpenCV：形态学梯度

目录 简述 1. 用图像运算和腐蚀实现形态学梯度 1.1 代码示例 1.2 运行结果 2. 形态学梯度接口 2.1 参数解释 2.2 代码示例 2.3 运行结果 3. 形态学梯度与边缘检测 4. 形态学梯度的应用场景 5. 注意事项 相关阅读 OpenCV&#xff1a;图像的腐蚀与膨胀-CSDN博客 简述…
阅读更多...
Java 大视界 -- Java 大数据在生物信息学中的应用与挑战（67）

Java 大视界 -- Java 大数据在生物信息学中的应用与挑战（67）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…
阅读更多...
MySQL中InnoDB逻辑存储结构

MySQL中InnoDB逻辑存储结构

在MySQL中&#xff0c;InnoDB是最常用的存储引擎之一&#xff0c;它具有高度的事务支持、行级锁、ACID特性以及自动崩溃恢复等特性。InnoDB的逻辑存储结构可以分为多个层次&#xff0c;下面是详细的解析。 1. 表空间 (Tablespace) InnoDB的物理存储结构以表空间为基础。表空间…
阅读更多...
字符设备驱动模版-中断

字符设备驱动模版-中断

字符设备驱动模版-中断 思维导图在线高清查看&#xff1a;https://www.helloimg.com/i/2025/01/27/679791b5257c0.png 修改设备树 1添加pinctrl节点 1创建对应的节点 在 iomuxc 节点的 imx6ul-evk 子节点下 2添加“fsl,pins”属性 3在“fsl,pins”属性中添加PIN配置信息 …
阅读更多...
最新文章

Copyright @ 2022~2023