模板Templates

模板Templates

一、模板概述与配置

1、概述

模板是HTML页面 根据后台数据传递进行动态填充页面

2、配置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

3、目录层级

project/
	App/
	templates/

4、配置模板目录

选择templates->mark directory->template folder

二、模板的使用

1、渲染模板

  • render 直接渲染模板
  • render_to_string 返回渲染模板后的内容

2、传递变量

视图函数中

def test_tem(req):
    args = {'title': '首页'}
    return render(req, 'index.html', args)

将字典args传递模板中进行渲染

模板中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
<h1>首页</h1>
</body>
</html>

3、分类

模板中分为

  • 变量
  • 标签

4、注意

如果在模板中使用了不存在的变量 则插入空白符号(啥都没有)

三、标签

1、说明

在模板中 {% 标签名 %} 称为标签

2、if标签

操作符：

== != > >= < <= and or in not in not

算数语运算符不允许使用

  • 单一分支
    {% if ... %}
    ...
  • 双向条件分支
    {% if ... %}
    ...
    {% else %}
    ...
  • 多向条件分支
    {% if ... %}
    ...
    {% elif %}
    ...
    {% else %}
    ...

支持if嵌套

3、for标签

  • 说明
    与python中的for 使用方式一样 for in

  • 格式
    不搭配empty
    {% for var in seq %}
    ...
    {% endfor %}
    搭配empty
    {% for var in seq %}
    ...
    {% empty %}
    ...

  • 使用
    {% for k in info %}

  • {{ k }}

    • {% for k,v in info.items %}
    <li>{{ k }}====={{ v }}</li>
{% endfor %}

    empty
    {% for k in xxx %}

  • {{ k }}

    • {% empty %}
  • empty

    • {% endfor %}
    循环的变量不存在 执行empty

4、ifequal/ifnotequal 标签

  • 作用
    判断是否相等/不相等

  • 格式
    {% ifequal 表达式1 表达式2 %}
    ...
    {% else %}
    ...

    {% ifnotequal 表达式1  表达式2 %}
	...
{% else %}
	...
{% endifnotequal %}

  • 实例

点击查看代码 
  {% ifequal 'l' 'a' %}
          <li>为真</li>
          {% else %}
          <li>为假</li>
      {% endifequal %}
      
      
      {% ifnotequal 'l' 'a' %}
          <li>为真</li>
      {% else %}
          <li>为假</li>
      {% endifnotequal %}

5、注释标签

  • 说明
    • 代码调试
    • 解释说明
  • 单行注释
  • 多行注释

6、include导入标签

  • 说明
    include 语句可以把一个模板引入到另一个模板中 类似于 把一个模板的代码copy到当前指定的位置
  • 目录结构
    project/
    templates/
    common/
    header.html
    footer.html
  • 使用
点击查看代码 
  test_include.html
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <style>
              body{
                  padding: 0;
                  margin: 0;
              }
              header{
                  width: 100%;
                  height: 150px;
                  background-color: #000;
                  color: #fff;
                  font-size: 40px;
              }
              footer{
                  width: 100%;
                  height: 150px;
                  background-color: #000;
                  color: #fff;
                  font-size: 40px;
                  position: absolute;
                  bottom: 0;
              }
          </style>
      </head>
      <body>
      {% include 'common/header.html' %}
      <h1>测试include方法</h1>
      {% include 'common/footer.html' %}
      </body>
      </html>
  common/header.html
      <header>
          头部
      </header>
  common/footer.html
      <footer>
          底部
      </footer>
  视图函数
      # 测试导入标签
      def test_include(req):
          return render(req, 'test_include.html')
- 导入文件内部的代码一定是你要使用的代码 不要包含其它代码

7、模板继承

  • 概述
    django中的模板可以继承的 通过继承可以将 页面中许多元素 抽取出来 放在父母版中 父母版中 通过block标签 进行标记 在子模板中实现替换

  • 作用
    实现页面代码的复用 减少重复代码

  • 标签

    • 继承标签
    • 模板替换

  • 使用
    common/base.html



    {% block head %}

    {% block meta %}{% endblock %}
    {% block title %}Title{% endblock %}
    {% block link %}{% endblock %}
    {% block script %}{% endblock %}

    {% endblock %}

    {% endblock %}
</body>
</html>

    test_base.html
    {% extends 'common/base.html' %}
    {% block title %}
    {{ block.super }}
    首页
    {% endblock %}
    {% block con %}
    首页
    {% endblock %}
    视图
    def test_base(req):
    return render(req, 'test_base.html')

  • 注意：如果子模板替换了父母版 还想显示原来的内容 {{ block.super }}

8、include与extend区别

  • 相同点
    均实现了代码的重用
  • 不同点
    包含是将目标文件整个渲染出来
    继承的本质是代码的替换 一般用来实现页面中重复不变的区域

9、模板中动态构造路由地址

配置

project/urls.py

urlpatterns = [
    path('', include(('App.urls', 'App'), namespace='App')),
]

App/urls.py

path('base/', index.test_base, name='test_base'),
path('args/<name>/<age>/', index.args, name='args'),

模板中进行构造

<h3>构造路由地址</h3>
<ul>
    <li>{% url 'App:test_base' %}</li>
    <li><a href="{% url 'App:test_base' %}" target="_blank">test_base</a></li>
    <li>{% url 'App:args' 'lucky' 18 %}</li>
    <li>{% url 'App:args' name='lucky' age=18 %}</li>
    <li>{% url 'App:args' name='lucky' age=18 %}?name=lucky&age=18</li>
</ul>

10、django使用bootstrap

  • 安装
    pip install django-bootstrap3

  • 配置
    INSTALLED_APPS = [
    ...
    'App',
    'bootstrap3',
    ]

  • index.html
    {% extends 'bootstrap3/bootstrap3.html' %}
    {% block bootstrap3_content %}

11、csrf跨站请求伪造

  • 说明
    某些恶意的网站上包含链接、表单按钮js代码 他们会利用你登陆过的信息视图在你的网站上完成某些操作 这就是跨站攻击
  • 作用
    在页面中生成csrf token的cookie
    在页面中生成csrf的隐藏域
    用于跨站请求伪造保护
  • 原理
    请求会带着cookie和隐藏域的值 访问服务器 服务器端根据cookie和表单隐藏域的值 进行对比 如果对比成功则通过 否则拒绝请求 403

12、autoescape 标签

  • 作用
    HTML转义标签
  • 使用
    开启转义（默认转义）
    {% autoescape on %}
    {{ con }}
    {% endautoescape %}
    关闭转义
  • 过滤关闭转义

四、过滤器

1、说明

  • 格式
  • 作用
    在变量显示前进行修改

2、内置过滤器

  • first 获取第一个成员

  • last 获取最后一个成员

  • lower 转换为小写

  • upper 转换为大写

  • cut 查找删除指定字符

  • default 默认值

  • escape 转换为实体符号标签

  • floatformat 保留小数 {{1.2345|floatformat:2}}

  • length 返回长度

  • random 返回随机项

  • join 字符串拼接

  • striptags 取出标签

    1. {{ 'abcd'|first }}
    2. {{ 'abcd'|last }}
    3. {{ 'abAHGHJcd'|lower }}
    4. {{ 'abAHGHJcd'|upper }}
    5. {{ 'abAHGHJcd'|upper|first }}
    6. {{ 'abcd'|cut:'a' }}
    7. {{ abc|default:'default' }}
    8. {{1.2345|floatformat:2}}
    9. {{ 'abcd'|length }}
    10. {{ 'abcd'|random }}
    11. {{ List|join:',' }}
    12. {{ 'b标签'|striptags }}

3、自定义过滤器

  • 目录结构
    project/
    App/
    templatetags/ 名字固定的
    init.py
    mytag.py 自定义的文件

  • mytags.py
    from django import template
    register = template.Library() # 实例化对象

    # 自定义过滤器
# 如果起别名 则使用  @register.filter('sum_filter')
@register.filter
# @register.filter('sum_filter')
def sum_filter(x, y):
    return x + y


# 自定义标签
# @register.simple_tag()
@register.simple_tag
def sum_tag(x, y):
    return x + y

  • 模板中使用

  • {{ 'b标签'|striptags }}

  • 自定义过滤器

  • {{ 1|sum_filter:1 }}

  • 自定义标签

  • {% sum_tag 1 2 %}

五、静态文件

1、说明

网站通常需要提供其它文件 比如图片、css、js 在django中我们称为静态文件

2、作用

管理静态文件

3、目录结构

project/
	App/
	templates/
	static/
		css/
		js/
		img/

4、配置静态文件

  • INSTALL_APPS 中 'django.contrib.staticfiles',
  • 设置url
    STATIC_URL = '/static/'

5、使用

点击查看代码 
 {% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="{% static 'css/test.css' %}">
    </head>
    <body>
    <h1>测试静态文件</h1>
    </body>
    </html>
posted @ 2022-02-28 18:58  寻月隐君  阅读(98)  评论(0)    收藏  举报