0
点赞
收藏
分享

微信扫一扫

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

_阿瑶 2022-03-23 阅读 176
ajaxcsshtmlHtml/CSS前端开发


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

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

1、模板目录位置

  • 应用下

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

  • 工程下

  • 需要注册

  • settings.py范例

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

  • 可以在不同应用中复用

1.1Django框架自带模板位置

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

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关键字(包括标签，特殊字符等) 进行过滤替换.

过滤替换格式如下：

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

假设：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>

效果图：

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

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":"你哈什么哈"})
    - 渲染时给模板传递数据

后记

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

如果文章对您有帮助，请我喝杯咖啡吧！

公众号

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


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



举报

相关推荐

python框架Django中MTV框架之VIew(业务控制器)

html路由表数据Html/CSS前端开发

Spring框架之模板方法模式 (Template Method Pattern)

ubuntulinux运维

Django基础之MTV模型

mysqlb树数据库

【Django之Django REST Framework框架安装+Django之ORM框架】

字段名字段数据模型IT职场私藏项目实操分享

Python中Web开发-Django框架

YOLO音视频目标跟踪

Django框架入门之视图和URL、模板

djangopython后端数据客户端系统/运维

【python】 Django Web框架

ffmpegjson音视频ffprobecutxargs

Django框架 之定义模型

java系统/运维

Web框架之Django二

2d3d5ePython后端开发

Django框架之视图层

djangopython后端
0 条评论