Django的模板系统（二）

沉觞流年

已于 2022-08-16 23:41:49 修改

阅读量282

点赞数

分类专栏： # Python Django 文章标签： django python 后端

于 2022-08-16 22:48:06 首次发布

本文链接：https://blog.csdn.net/qq_44614026/article/details/126375939

版权

Python Django 专栏收录该内容

26 篇文章 9 订阅

订阅专栏

Django的模板系统（二）

静态文件

前端的一些精美页面的渲染，需要加载静态文件，例如加载css文件、js文件，在Django项目中，需要在模板中进行配置，去加载这些静态文件

引入静态文件

在项目根目录（或应用目录）下创建 statics 目录，在 statics 目录下创建 css 目录、js 目录、images 目录、plugins 目录，分别存放 css文件、js文件，图片，插件。前端的这些样式精美的文件，可以去 bootstrap这些网站去下载下来

在这里插入图片描述

修改项目根目录下的settings.py文件，将sgin目录下statics文件夹加入到静态资源访问路径中。

STATIC_URL = '/static/' 	#别名 
STATICFILES_DIRS =[os.path.join(BASE_DIR,'sgin/statics')]		# 静态文件所在目录

前端页面HTML文件的写法，引入 css、js 文件，一般是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <!-- Bootstrap Styles-->
    <link href="css/bootstrap.css" rel="stylesheet" />
    
    <title>Title</title>
</head>
<body>
    
<!-- jQuery Js -->
<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="js/bootstrap.min.js"></script>
    
</body>
</html>

在Django项目中，HTML文件通过模板系统加载静态文件，需要进行一些修改，在html文件开头，需要通过{% load static %}声明加载静态文件，引入 css、js 文件也需要声明是从 static 引入的静态文件

<!--声明加载静态文件-->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <!--声明是从 static 引入 Bootstrap Styles-->
    <link href="{% static 'css/bootstrap.css' %} " rel="stylesheet" />
    
    <title>Title</title>
</head>
<body>
    
<!--声明是从 static 引入 jQuery Js -->
<script src="{% static 'js/jquery-1.10.2.js' %}"></script>
<!--声明是从 static 引入 Bootstrap Js -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
    
</body>
</html>

event.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <!-- Bootstrap Styles-->
    <link href="{% static 'css/bootstrap.css' %} " rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="{% static 'css/custom-styles.css' %}" rel="stylesheet" />
    <title>测试</title>
</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand"><i class="icon fa fa-plane"></i> 测试学习系统</a>

            <div id="sideNav" >
                <i class="fa fa-bars icon"></i>
            </div>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a class="active-menu" href="/sgin/events/"><i class="fa fa-dashboard"></i> 测试资料 </a>
                </li>
                <li>
                    <a href="/sgin/guests/"><i class="fa fa-desktop"></i> 测试练习 </a>
                </li>

            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">

        <div class="header">
            <div class="page-header">


            </div>
        </div>

        <div id="page-inner" class="panel-body">

        <ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >{{ event }}</li>
            {% endfor %}
        </ul>

            <footer><p>Author:沉觞.  <a href="#" target="_blank">测试学习笔记</a></p>
            </footer>
        </div>
        <!-- /. PAGE INNER  -->

    </div>
    <!-- /. PAGE WRAPPER  -->
</div>

<!-- jQuery Js -->
<script src="{% static 'js/jquery-1.10.2.js' %}"></script>
<!-- Bootstrap Js -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- Custom Js -->
<script src="{% static 'js/custom-scripts.js' %}"></script>
<script>
  $(document).ready(
    $('#main-menu>li>a').each(function (){
      $(this).attr('class',''); //先取消选中
      let current_href = window.location.pathname
      if(current_href === $(this).attr('href')){
        $(this).attr('class','active-menu');
      }
    }),
  )
</script>


</body>
</html>

模板的继承

模板可以用继承的方式来实现复用，减少冗余内容。网页的头部、尾部、外层的框架，内容一般都是一致的，就可以通过模板继承来实现复用。

将通用的功能或者属性写在基础模板中，也叫基类模板或者父模板。

子模板可以继承父类模板，子模板继承后将自动拥有父类中的属性的内容，还可以在子模板中对父模板进行重写，即重写父模板中方法或者属性，从而实现子模板的定制。

模板继承的标签有 {% block %} 、 {% extends %} 标签，其中 {% block% } 标签与 {% endblock %} 标签成对出现，而 {% extends %} 放在子模板的第一行且必须是模板中的第一个标签，标志着此模板继承自父模板

模板继承的应用

父模板中需要声明的内容：

 <!-- 定义父模板可被重写内容 -->
{%block block_name%}
...可以被子模板覆盖的内容
{%endblock block_name%}

子模板中声明声明需要修改的内容：

 <!-- 继承父模板 -->
{% extends '父模板名称' %}


 <!-- 子模板重写父模板 -->
{%block block_name%}
...子模板覆盖后呈现的新内容
{%endblock block_name%}

请添加图片描述

例如在上图中，外层的框架，就可以通过模板继承来实现复用

在templates文件夹中新增一个base.html文件，将event.html文件中所有内容剪切到个base.html文件中，

event.html文件中需要的内容，就只是从 功能测试 到 安全测试 这块的内容

<ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >{{ event }}</li>
            {% endfor %}
</ul>

将这块内容从base.html文件提取出去，然后声明这块是需要被子模板覆盖的内容

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <!-- Bootstrap Styles-->
    <link href="{% static 'css/bootstrap.css' %} " rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="{% static 'css/custom-styles.css' %}" rel="stylesheet" />
    <title>测试</title>
</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand"><i class="icon fa fa-plane"></i> 测试学习系统</a>

            <div id="sideNav" >
                <i class="fa fa-bars icon"></i>
            </div>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a class="active-menu" href="/sgin/events/"><i class="fa fa-dashboard"></i> 测试资料 </a>
                </li>
                <li>
                    <a href="/sgin/guests/"><i class="fa fa-desktop"></i> 测试练习 </a>
                </li>

            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">

        <div class="header">
            <div class="page-header">


            </div>
        </div>

        <div id="page-inner" class="panel-body">
            
            <!-----此处声明可被重写内容---->      
            {% block content %}
            {% endblock %}


            <footer><p>Author:沉觞.  <a href="#" target="_blank">测试学习笔记</a></p>
            </footer>
        </div>
        <!-- /. PAGE INNER  -->

    </div>
    <!-- /. PAGE WRAPPER  -->
</div>

<!-- jQuery Js -->
<script src="{% static 'js/jquery-1.10.2.js' %}"></script>
<!-- Bootstrap Js -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- Custom Js -->
<script src="{% static 'js/custom-scripts.js' %}"></script>
<script>
  $(document).ready(
    $('#main-menu>li>a').each(function (){
      $(this).attr('class',''); //先取消选中
      let current_href = window.location.pathname
      if(current_href === $(this).attr('href')){
        $(this).attr('class','active-menu');
      }
    }),
  )
</script>


</body>
</html>

声明继承自父模板，并编写子模板覆盖的内容

event.html

<!-----此处声明继承父模板base.html---->
{% extends "base.html" %}

<!-----此处声明重写父模板内容---->
{% block content %}
     <ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >{{ event }}</li>
            {% endfor %}
     </ul>
{% endblock %}

访问http://127.0.0.1:8000/events/，可以发现，页面并没有发生变化
请添加图片描述

但如果删去event.html文件中{% block content %}与{% endblock %}之间的 ul标签中的内容，此时页面上从 功能测试 到 安全测试 这块的内容就会为空。这也就反向说明了子模板继承父模板这一流程， ul标签中的内容是区别于父模板，仅在子模板中展示的内容
父模板可以被子模板继承，子模板可以被更低一级的子模板继承，层层套娃，这里不再继续深究。

模板继承扩展

父模板也可以被多个子模板继承，可以继续新增html文件，去继承base.html

请添加图片描述

前端页面，通过点击测试资料分类页面的分类内容，进入测试资料详情页面

请添加图片描述

在sgin目录下的views.py文件中再编写一个视图函数event_detail；实现在浏览器中输入http://127.0.0.1:8000/events/detail/，进入的是测试资料详情页面

from django.shortcuts import render

# Create your views here.

def event(request):
    eventlist = [
        '功能测试',
        '性能测试',
        '自动化测试'
    ]
    return render(request,'events.html',{'event_list':eventlist})

def event_detail(request):

    return render(request,'event_detail.html')

在项目目录下urls.py 文件的 urlpatterns 列表中为event_detail视图函数配置路由映射关系

from django.contrib import admin
from django.urls import path
from demo import views  as demo_view   
from sgin import views as sgin_view		

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/',demo_view.index),      
    path('events/',sgin_view.event),	
    path('events/detail/',sgin_view.event_detail),	# 将视图函数添加入路由配置中
]

在sgin目录下的 templates 文件夹中新建一个 HTML 文件，并且将此文件命名为 event_detail.html，然后在此文件中编写 HTML 代码，该文件依旧继承base.html。

event_detail.html

{% extends "base.html" %}

{% block title %}
    测试资料详情页
{% endblock %}

{% block content %}
     <h1>测试资料详情</h1>
    <p>测试资料详情内容</p>
    <p>测试资料详情内容</p>
    <p>测试资料详情内容</p>
    <p>测试资料详情内容</p>
	
{% endblock %}

在浏览器中输入http://127.0.0.1:8000/events/detail/，进入的是测试资料详情页面

修改 events.html文件，添加a标签及路由链接，使其在前端点击测试资料分类，进入测试资料详情页面

events.html

{% extends "base.html" %}

{% block title %}
    测试资料分类
{% endblock %}

{% block content %}
     <ul class="list-group">
            {% for event in event_list %}
                <li class="list-group-item text-center" >
                   <a href="/events/detail"> {{ event }}</a>
                </li>
            {% endfor %}
     </ul>

{% endblock %}

注意： 这里href="/events/detail"，events路径前需要加上/，如果没有加上，浏览器会将路径进行拼接，访问的链接就变成了http://127.0.0.1:8000/events/events/detail，而不是测试资料详情页面的地址

修改 event_detail.html文件，添加a标签及路由链接，使其在前端点击按钮，返回测试资料分类页面。
event_detail.html

{% extends "base.html" %}

{% block title %}
    测试资料详情页
{% endblock %}

{% block content %}
     <h1>测试资料详情</h1>
    <p>测试资料详情内容</p>
    <p>测试资料详情内容</p>
    <p>测试资料详情内容</p>
    <p>测试资料详情内容</p>
	<!-----添加按钮，点击返回测试资料分类页---->
    <span><a href="/events/" class="btn btn-info">返回测试资料分类页</a></span>

{% endblock %}