Django模板层(前端渲染、过滤器、标签控制、模板继承)

2024-03-10 04:30:06 分类：前端 热度：243 评论： 0

django模板层(前端渲染、过滤器、标签控制、模板继承)

模板渲染

后端：

在render解析时加入方法locals，可以将函数中的参数传递给前端

python">def test(request):
    name = '张三'
    age = 18
    return render(request,'app01/test.html',locals())

前端：

用{{ }}接受参数，并渲染在前端页面上

<body>
<p>{{ name }}</p>
<p>{{ age }}</p>
</body>

八大基础数据类型渲染

def test(request):
    # 【一】字符串类型的数据
    name = "张三"
    # 【二】数字类型的数据
    # （1）整数
    age = 18
    # （2）浮点数 : 如果是0精确度只能到小数点后一位
    salary = 100.6666666
    # 【三】列表类型
    num_list = [1, 2, 3, 4, 5, 6, 7]
    # 【四】字典类型的数据
    user_data = {"username": "dream", "password": "521521", "age": 1888, "hobby": ["music", "sport", "walk"],
                 "addr": {"country": "China", "location": "Shanghai"}}
    # 【五】布尔类型
    is_right = True
    # 【六】元组类型
    num_tuple = (1, 2, 3, 4, 5)
    # 【七】集合类型
    num_set = {1, 2, 3, 4, 5, 5, 5}
    return render(request,'app01/test.html',locals())

<body>
<p>字符串：{{ name }}</p>
<p>整数：{{ age }}</p>
<p>浮点：{{ salary }}</p>
<p>列表：{{ num_list }}</p>
<p>字典：{{ user_data }}</p>
<p>布尔：{{ is_right }}</p>
<p>元组：{{ num_tuple }}</p>
<p>集合：{{ num_set }}</p>
</body>

渲染结果：

渲染函数与类

函数
def test(request):
    def one():
        content = 10
    def two():
        return 2+2
    return render(request,'app01/test.html',locals())

<body>
<p>无返回值函数：{{ one }}</p>
<p>有返回值函数：{{ two }}</p>
</body>

渲染结果：

类
def index(request):
    class index(object):
        def __init__(self,name,age):
            self.name = name
            self.age = age

        def fun1(self):
            return '绑定对象方法'
        @classmethod
        def fun2(cls):
            return '绑定类方法'
        @staticmethod
        def fun3():
            return '非绑定方法'
        def __str__(self):
            return '这是index类'
    my_index = index(name="张三",age=18)
    return render(request,'app01/test.html',locals())

<body>
<p>绑定对象方法：{{ my_index.fun1 }}</p>
<p>绑定类方法：{{ my_index.fun2 }}</p>
<p>非绑定方法：{{ my_index.fun3 }}</p>
<p>类：{{ my_index }}</p>
</body>

过滤器

在Django中过滤器可以改变前端页面显示的变量，由符号|表示

如：{{index|lower}}，该操作会将index函数转换为小写，相当于引用了lower()方法

常用过滤器

<body>
<h2>渲染 name 变量</h2>
{{ name }}
<h2>【1】计算当前变量值的长度</h2>
{{ name|length }}
<h2>【2】字母大小写转换</h2>
{{ name|lower }}
<br>
{{ name|upper }}
<h2>【3】指定默认值</h2>
{{ age|default:18 }}
<h2>【4】渲染文件大小</h2>
{{ img_data|filesizeformat }}
<h2>【5】格式化日期对象</h2>
<div>{{ current_time }}</div>
<div>{{ current_time|date:"Y-m-d H:i:s" }}</div>
<h2>【6】切片(顾头不顾尾)</h2>
<div>{{ name }}</div>
<div>{{ name|slice:"0:4:2" }}</div>
<h2>【7】切取摘要</h2>
<div>{{ content }}</div>
<div>{{ content|truncatechars:9 }}</div>
<h2>【8】移除指定字符</h2>
<div>{{ name }}</div>
<div>{{ name|cut:"r" }}</div>
<h2>【9】拼接</h2>
<div>可以拼接的前提是后端的数据可以迭代</div>
<div>{{ num_list }}</div>
<div>{{ num_list|join:"|" }}</div>
<h2>【10】取消转义</h2>
<div>{{ html_content }}</div>
<div>第二种方案:不在后端用 make_safe 包一下</div>
<div>{{ html_content|safe }}</div>
<div></div>
</body>

标签

for循环语句

def index(request):
    class index(object):
        def fun1(self):
            name = ['a','b','c','d']
            return name
    my_index = index()
    return render(request,'app01/test.html',locals())

{#输入for可以快速生成for循环语句#}
<ul>{% for i in my_index.fun1 %}
    <li>{{ i }}</li>
{% endfor %}
</ul>
forloop
a = [1, 2, 3]
{% for re in a %}
    <p>{{ forloop }}</p>
{% endfor %}

{'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 3, 'revcounter0': 2, 'first': True, 'last': False}
{'parentloop': {}, 'counter0': 1, 'counter': 2, 'revcounter': 2, 'revcounter0': 1, 'first': False, 'last': False}
{'parentloop': {}, 'counter0': 2, 'counter': 3, 'revcounter': 1, 'revcounter0': 0, 'first': False, 'last': True}
  • first
    • 标识 for 循环是否是第一次
  • last
    • 标识 for 循环是否是以后一次
  • counter0
    • 类似索引
  • counter
    • 计数
  • 取值
forloop其他参数
Variable Description
forloop.counter 当前循环的索引值（从1开始）
forloop.counter0 当前循环的索引值（从0开始）
forloop.revcounter 当前循环的倒序索引值（从1开始）
forloop.revcounter0 当前循环的倒序索引值（从0开始）
forloop.first 当前循环是不是第一次循环（布尔值）
forloop.last 当前循环是不是最后一次循环（布尔值）
forloop.parentloop 本层循环的外层循环

用法：

<ul>{% for i in my_index.fun1 %}
	<li>{{ forloop.counter }}:{{ i }}</li>
{% endfor %}
</ul>
for … empty 
def fun1(self):
    return None

<ul>{% for i in my_index.fun1 %}
    <li>{{ forloop.counter }}:{{ i }}</li>
{% empty %}
    <li>无数据</li>
{% endfor %}

当数据为空时执行empty下的代码

if语句

if\elif\else

if\else
<body>
{% if a > 1 %}
    正确
{% else %}
    错误
{% endif %}
</body>

if\elif\else
<body>
{% if a|length >1 %}
    大于1
{% elif a|length>5 %}
    大于5
{% else %}
  小于等于1
{% endif %}
</body>

def test(request):
    a = 10
    return render(request,'app01/test.html',locals())

with语句

将变量改名，一般用于将复杂且长的参数改简短

# 传递数值a
def test(request):
    a = 10
    return 
render(request,'app01/test.html',locals())
##################################################
# a改名为b
{% with a=b%}
或
{% with a as b %}
    {{ a }}
    {{ b }}
{% endwith %}

注意事项

  • Django的模板语言不支持连续判断，即不支持以下写法：
{% if a > b > c %}
...
{% endif %}
  • Django的模板语言中属性的优先级大于方法
def xx(request):
    d = {"a": 1, "b": 2, "c": 3, "items": "100"}
    return render(request, "xx.html", {"data": d})
  • 如上，我们在使用render方法渲染一个页面的时候
    • 传的字典d有一个key是items并且还有默认的 d.items() 方法
    • 此时在模板语言中:
{{ data.items }}
  • 默认会取d的items key的值

模板继承

关键语句

继承css

{% block page-css %}  
{% endblock %}

继承主内容：

{% block page-main %}
{% endblock %}

继承语句：(写在子版html的第一行)

{% extends 'home.html' %}

母版内容

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!--    引入jQuery-->
    <script src="{% static 'js/jquery.js' %}"></script>

    <!--    引入Bootstrap的CSS文件-->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

    <!--    引入Bootstrap的JavaScript文件-->
    <script src="{% static 'js/bootstrap.js' %}"></script>
    {% block page-css %}
        <style>
        h1{
            background: #4cae4c;
        }
        </style>
    {% endblock %}

</head>
<body>
{# <nav class="navbar navbar-default navbar-fixed-top">#}
{#  <div class="container">#}
{#    <button type="button" class="btn btn-default navbar-btn" >Sign in</button>#}
{#  </div>#}
{# </nav>#}
<h1>这是母版</h1>
{% block page-main %}
    <h2>这是母版的内容</h2>
{% endblock %}
</body>
</html>

渲染效果：

子版内容

{% extends 'home.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!--    引入jQuery-->
    <script src="{% static 'js/jquery.js' %}"></script>

    <!--    引入Bootstrap的CSS文件-->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

    <!--    引入Bootstrap的JavaScript文件-->
    <script src="{% static 'js/bootstrap.js' %}"></script>
    {% block page-css %}
        <style>
        h1{
            background: #761c19;
        }
        </style>
    {% endblock %}
</head>

<body>
{% block page-main %}
    <h2>我是被替换掉的母版内容</h2>
{% endblock %}
</body>
</html>

渲染效果：

总结：

子版会继承母版的所有内容

仅有被

{% block page-main %}
{% endblock %}

或

{% block page-css %}
{% endblock %}

包裹的内容是可以被子版替换的

转载请说明出处内容投诉
CSS教程_站长资源网 » Django模板层(前端渲染、过滤器、标签控制、模板继承)
大汤圆

大汤圆

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买