MTV框架之Template(模板/界面)

MTV框架之Template（模板/界面）

1、模板目录位置

应用下
- 不需要注册
- 无法跨应用地进行复用

工程下

需要注册

settings.py范例


# django默认的模板配置

TEMPLATES = [
  {
      ...,
      # 模板路径
      'DIRS': [
          os.path.join(BASE_DIR, 'templates'),
      ],
      ...
  },
]

可以在不同应用中复用

这里写图片描述

2、模板语法

2.1 读取数据

{{ xxx }}
{{ xxx.attr }}
{{ xxx.method }}
{{ xxx.i }}
{{ xxx.key }}

2.2 注释

{# 模板注释是不可见的（在html页面中是看不到的） #}
{% comment %}…{% endcomment %}
- 注释多行内容

2.3 模板内计算

加减
- {{ value|add:10 }} //value加10
- {{ value|add:-10 }} //value减10
乘除
- {% widthratio a b c %} //widthratio 是关键字
- a/b*c
大小写转换
- {{ animal.a_name|lower }} //小写
- {{ animal.a_name|upper }} //大写
判断是否整除
- {% if forloop.counter|divisibleby:2 %} //如果循环变量的下标整除2
连接容器内元素
- {{ animals|join:’=’ }}

2.4 加载静态文件

{% load static %}
{% load staticfiles %}


#访问静态资源

<img src="{% static 'img/dragon.gif' %}">
<img src="/static/img/dragon.gif">
<img src="{% static imgName %}">   #imgName是一个变量，由视图层传过来

settings.py配置

静态文件夹位置
访问路由

-#静态文件访问路由
STATIC_URL = '/static/'


#静态文件存储目录：根目录/static/

STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]

2.5 流程控制

遍历
- {% if forloop.first %} //如果第一个循环变量为真
- {% if forloop.last %} //如果最后一个循环变量为真
- {{ forloop.counter0 }}
- 正序下标，索引从0开始
- {{ forloop.counter }}
- 正序下标，索引从1开始算
- {{ forloop.revcounter }}
- 索引从最大长度到1
- forloop.revcounter0
- 索引从最大长度到0
- forloop.parentloop
- 获取上一层 for 循环的 forloop
- {% empty %}
- 当列表为空时用 for empty
```
{% for animal in animals %}
  <li>{{ animal.a_name }}</li>
{% empty %}
<h3>动物都跑啦</h3>
{% endfor %}

#当animals为空时，才会显示<h3>标签
```
if条件
- {% if forloop.first %}…{% elif forloop.last %}…{% else %}…{% endif %}
- {% ifequal value1 value2 %}…{% else %}…{% endifequal %}
- 如果value1==value2
- {% ifnotequal value1 value2 %}…{% else %}…{% endifnotequal %}
- 如果value1!=value2

2.6 转义开关

html转义就是将 html关键字(包括标签，特殊字符等) 进行过滤替换.

过滤替换格式如下：

这里写图片描述

假设：content=<h1>hello world</h1>

转义

{% autoescape off %} {{ content }} {% endautoescape %}

关闭自动抑制——进行转义
浏览器输出一号标题hello world

{{ content|safe }}

确认数据是安全的——对数据进行转义
浏览器输出一号标题hello world

抑制
```
直接展示数据模式使用抑制（不转义）
```
- {% autoescape on %} {{ content }} {% endautoescape %}
- {{ content }}
- ```
浏览器直接输出：<h1>hello world</h1>
```
2.7 继承与兼并
- {% extends ‘base_main.html’ %}
- 继承父模板
- {% include xxx.html %}
- 兼并另一个模板使之成为页面的一部分
- 父模板
{% block header %}
{% endblock %}
```
#重写父模板的当前块

{% block header %}
...
{% endblock %}
```
- {{ block.super }}
- 引用父模板对当前块的实现

2.8 翻页框架

引入

样式

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">

脚本

<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>

样式

“`html


- 外层包裹，需要配合脚本使用

- ```html
<div class="swiper-wrapper">

翻页包装器

“`html

…


- 分页内容1

- ```html
<div class="swiper-slide">...</div>

分页内容2
如果需要分页器
```
<div class="swiper-pagination"></div>
```
如果需要导航按钮
```
<div class="swiper-button-prev"></div>
```
如果需要滚动条
```
<div class="swiper-scrollbar"></div>
```

脚本

      $(function () {
          var swiper = Swiper(".swiper-container",{});
      })

例子：

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <style type="text/css">
        .swiper-container img {
            height: 300px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>

</head>
<body>
{# 轮播 #}
    <div class="swiper-container" style=" text-align: center;">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="{% static 'img/c++.jpg' %}">
            </div>
            <div class="swiper-slide">
                <img src="{% static 'img/python.jpg' %}">
            </div>
            <div class="swiper-slide">
                <img src="{% static 'img/go.jpg' %}">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script>
        $(function () {
            var mySwiper = new Swiper(
                '.swiper-container',
                {
                    direction: 'horizontal',
                    loop: true,

                    // 如果需要分页器
                    pagination: '.swiper-pagination',

                    // 如果需要前进后退按钮
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',

                    // 如果需要滚动条
                    scrollbar: '.swiper-scrollbar',
                }
            )
        })

    </script>
</body>

</html>

效果图：

这里写图片描述

2,9 模板渲染过程

 加载模板
  - template = loader.get_template('Hello.html')
   <class 'django.template.backends.django.Template'>
- 渲染模板
   result = template.render()
    <class 'django.utils.safestring.SafeText'> 
  result = template.render(context={"haha":"你哈什么哈"})
    - 渲染时给模板传递数据

MTV框架之Template(模板/界面)

MTV框架之Template（模板/界面）

1、模板目录位置

2、模板语法

2.1 读取数据

2.2 注释

2.3 模板内计算

2.4 加载静态文件

2.5 流程控制

2.6 转义开关

2.7 继承与兼并

2.8 翻页框架

2,9 模板渲染过程

猜你喜欢