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

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

关注公众号“轻松学编程”了解更多。

1、模板目录位置

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

工程下

需要注册

settings.py范例

# django默认的模板配置
TEMPLATES = [
    {
        ...,
        # 模板路径
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        ...
    },
]

可以在不同应用中复用

这里写图片描述

1.1Django框架自带模板位置

这里写图片描述

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>标签
```

for循环中使用变量:

{% for i in comments %}
      <blockquote>
          <p>{{ i.user.name }}:</p>
          <p>{{ i.content }}</p>
          <small><a href="{% url 'good' i.id book.id %}">点赞({{ i.good }})</a>
          </small>
      </blockquote>
  {% endfor %}

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

确认数据是安全的——对数据进行转义
浏览器输出一号标题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>

样式

<div class="swiper-container" id="topSwiper">

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

```
<div class="swiper-wrapper">
```
- 翻页包装器
```
<div class="swiper-slide">...</div>
```
- 分页内容1
```
<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":"你哈什么哈"})
    - 渲染时给模板传递数据

后记

【后记】为了让大家能够轻松学编程，我创建了一个公众号【轻松学编程】，里面有让你快速学会编程的文章，当然也有一些干货提高你的编程水平，也有一些编程项目适合做一些课程设计等课题。

也可加我微信【1257309054】，拉你进群，大家一起交流学习。
如果文章对您有帮助，请我喝杯咖啡吧！

公众号

赞赏码

关注我，我们一起成长~~

posted @ 2018-05-30 20:19 轻松学编程阅读(125) 评论(0) 编辑收藏举报

刷新页面返回顶部

轻松学编程

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

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

1、模板目录位置

1.1Django框架自带模板位置

2、模板语法

2.1 读取数据

2.2 注释

2.3 模板内计算

2.4 加载静态文件

2.5 流程控制

2.6 转义开关

2.7 继承与兼并

2.8 翻页框架

2,9 模板渲染过程

后记

公告