目录

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

感谢您的三连!!!

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
joke_xiaoli6 小时前
如何重置 MySQL root 用户的登录密码?
数据库·mysql
鹏说大数据6 小时前
MySQL连接较慢原因分析及解决措施
数据库·mysql
LCY1337 小时前
django中间件说明
python·中间件·django
极限实验室8 小时前
使用 INFINI Gateway 保护 Elasticsearch 集群之修改查询不合理参数(二)
数据库
竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。8 小时前
etcd客户化工具
数据库·etcd
谷晓光8 小时前
python中print函数的flush如何使用
linux·服务器·数据库
OceanBase数据库官方博客8 小时前
自然语言秒转SQL—— 免费体验 OB Cloud Text2SQL 数据查询
数据库·sql·ai·oceanbase·分布式数据库·向量·text2sql
Stark、8 小时前
【MySQL】多表查询(笛卡尔积现象,联合查询、内连接、左外连接、右外连接、子查询)-通过练习快速掌握法
数据库·后端·sql·mysql
yqcoder9 小时前
Redis 的应用场景
数据库·redis·缓存
kngines9 小时前
【实战ES】实战 Elasticsearch:快速上手与深度实践-8.2.2成本优化与冷热数据分离
大数据·数据库·elasticsearch·搜索引擎