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

 先赞后看,养成习惯!!!

        上文中的部门管理页面:

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

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

模板继承的语法规则是这样的:

        首先需要定义一个模板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.rhkb.cn/news/4544.html

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

相关文章

4.JoranConfigurator解析logbak.xml

文章目录 一、前言二、源码解析GenericXMLConfiguratorlogback.xml解析通过SaxEvent构建节点model解析model节点DefaultProcessor解析model 三、总结 一、前言 上一篇介绍了logback模块解析logback.mxl文件的入口, 我们可以手动指定logback.xml文件的位置, 也可以使用其它的名…

直连EDI与VAN:如何选择更适合企业的数据交换方式

在推进EDI项目时&#xff0c;企业通常会面临两种主要的数据交换方式选择&#xff1a;直连EDI&#xff08;Direct EDI&#xff09;和增值网络VAN&#xff08;Value Added Network&#xff09;。那么&#xff0c;它们之间有什么区别&#xff1f;为什么我们更推荐企业使用直连EDI而…

用户中心项目教程(五)---MyBatis-Plus完成后端初始化+测试方法

文章目录 1.数据库的链接和创建2.建库建表语句3.引入依赖4.yml配置文件5.添加相对路径6.实体类的书写7.Mapper接口的定义8.启动类的指定9.单元测试10运行时的bug 1.数据库的链接和创建 下面的这个就是使用的我们的IDEA链接这个里面的数据库&#xff1a; 接下来就是输入这个用户…

如何使用MaskerLogger防止敏感数据发生泄露

关于MaskerLogger MaskerLogger是一款功能强大的记录工具&#xff0c;该工具可以有效防止敏感数据泄露的发生。 MaskerLogger旨在保护目标系统的日子安全&#xff0c;此格式化程序可确保你的日志安全并防止敏感数据泄露。例如使用此格式化程序&#xff0c;打印下列数据&#x…

boss直聘 __zp_stoken__ 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 逆向过程 py代码 import execjs imp…

2024-春秋杯冬季赛

Misc 简单算术 题目提示异或&#xff0c;直接把开头字符 y 与 f 异或&#xff0c;得到的是不可见字符&#xff0c;base64 编码一下得到异或的字符&#xff0c;将给出的每一个字符与编码后的结果异或即可得到 flag import base64result chr((ord("y") ^ ord("…

SparkSQL函数

文章目录 1. SparkSQL函数概述2. SparkSQL内置函数2.1 常用内置函数分类2.2 常用数组函数2.2.1 array()函数1. 定义2. 语法3. 示例 2.3 常用日期与时间戳函数2.4 常见聚合函数2.5 常见窗口函数 3. SparkSQL自定义函数3.1 自定义函数分类3.2 自定义函数案例演示3.2.1 定义自定义…

Tomcat下载配置

目录 Win下载安装 Mac下载安装配置 Win 下载 直接从官网下载https://tomcat.apache.org/download-10.cgi 在圈住的位置点击下载自己想要的版本 根据自己电脑下载64位或32位zip版本 安装 Tomcat是绿色版,直接解压到自己想放的位置即可 Mac 下载 官网 https://tomcat.ap…

ent.SetDatabaseDefaults()

在 AutoCAD 的 .NET API 中&#xff0c;ent.SetDatabaseDefaults() 这句代码通常用于将一个实体&#xff08;Entity&#xff09;对象的属性设置为与其所在的数据库&#xff08;Database&#xff09;的默认设置相匹配。这意味着&#xff0c;该实体将采用数据库级别的默认颜色、图…

【LeetCode: 215. 数组中的第K个最大元素 + 快速选择排序】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

Spring bean加载的顺序探究

目录 前言例子代码和bean顺序改变全注解类加载顺序bean 的依赖关系改变&#xff0c;被依赖的先加载自定义BeanFactoryPostProssort 提前获取某个bean按照refresh的finishBeanFactoryInitialization方法改变beanBeanDefinitionRegistryPostProcessor改变beanDefinitionsConfigur…

React 中hooks之useDeferredValue用法总结

目录 概述基本用法与防抖节流的区别使用场景区分过时内容最佳实践 概述 什么是 useDeferredValue? useDeferredValue 是 React 18 引入的新 Hook&#xff0c;用于延迟更新某个不那么重要的部分。它接收一个值并返回该值的新副本&#xff0c;新副本会延迟更新。这种延迟是有…

【博客之星2024年度总评选】年度回望:我的博客之路与星光熠熠

【个人主页】Francek Chen 【人生格言】征途漫漫&#xff0c;惟有奋斗&#xff01; 【热门专栏】大数据技术基础 | 数据仓库与数据挖掘 | Python机器学习 文章目录 前言一、个人成长与盘点&#xff08;一&#xff09;机缘与开端&#xff08;二&#xff09;收获与分享 二、年度创…

R 语言科研绘图第 20 期 --- 箱线图-配对

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…

支持向量机SVM的应用案例

支持向量机&#xff08;Support Vector Machine,SVM&#xff09;是一种强大的监督学习算法&#xff0c;广泛应用于分类和回归任务。 基本原理 SVM的主要目标是周到一个最优的超平面&#xff0c;该超平面能够将不同类别的数据点尽可能分开&#xff0c;并且使离该超平面最近的数…

Ubuntu 24.04 LTS 更改软件源

Ubuntu 24.04 LTS 修改软件源

wps数据分析000002

目录 一、快速定位技巧 二、快速选中技巧 全选 选中部分区域 选中部分区域&#xff08;升级版&#xff09; 三、快速移动技巧 四、快速录入技巧 五、总结 一、快速定位技巧 ctrl→&#xff08;上下左右&#xff09;快速定位光标对准单元格的上下部分双击名称单元格中…

[gdb调试] gdb调试基础实践gdb指令汇总

​ 一. 参考资料 《C/C代码调试的艺术》 二. 调试过程 1. 编译&#xff1a; 使用Debug模式编译&#xff0c;或者使用Release模式编译加入-g参数&#xff0c;-g选项会在可执行文件中加入调试信息&#xff0c;这些信息包含了程序中的变量名、函数名、行号等&#xff0c;能让…

风吹字符起,诗意Linux:一场指令与自由的浪漫邂逅(上)

文章目录 前言一. 知识过渡文件的属性与类型路径 二. 基本指令ls&#xff1a;风起草长&#xff0c;窥见世界的全貌cd&#xff1a;穿梭路径间&#xff0c;漫步荒原的远方pwd&#xff1a;定位自我&#xff0c;荒原上的坐标mkdir&#xff1a;种下希望&#xff0c;创建属于自己的世…

知识图谱中的word2vec 技术是做什么的?

Word2Vec 是一种将单词转换为向量表示的技术&#xff0c;由 Google 在 2013 年提出。这项技术的核心思想是通过大规模文本数据训练神经网络模型&#xff0c;从而将单词映射到低维稠密的向量空间中。这些向量能够捕捉到单词之间的语义和语法关系&#xff0c;使得相似或相关的单词…