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
      

  • {{ 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>
      
      

• 样式

  • <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】，拉你进群，大家一起交流学习。
如果文章对您有帮助，请我喝杯咖啡吧！

公众号

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