模板渲染基础

最新推荐文章于 2022-10-06 16:57:26 发布

ZERO的秃头之路

最新推荐文章于 2022-10-06 16:57:26 发布

阅读量154

点赞数

分类专栏： python笔记文章标签：过滤器 python django

本文链接：https://blog.csdn.net/m0_46471716/article/details/119766458

版权

python笔记专栏收录该内容

43 篇文章 5 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

模板渲染

变量

语法：{{}} 或 {{%%}}
views.py 视图文件

from django.shortcuts import render

def home(request):
    username = 'SByaya' # 可以传字符串
    num = 10 # 可以传数字
    lst1 = [11,22,33] # 可以传列表
    dict1 = {'k1':'v1','k2':'v2'} # 可以传字典
    class A:
        def __init__(self):
            self.name = 'yayasillydog'
        def get_name(self):
            return self.name + '太蠢了'
    a = A() # 可以传类对象

    dic = {
        'username':username,
        'num':num,
        'lst1':lst1,
        'dict1':dict1,
        'a':a,
    }
	'''
	'asdfasdfasdf{{hobby.0}}' =  hobby[0] 索引取值
	模板渲染完成之后, 才返回给浏览器, 浏览器再进行页面渲染, 生成效果
	'''
    return render(request,'home.html',dic)

html 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
</head>
<body>

<h1>Welcome to dog's home!!</h1>
<h1>{{ username }}</h1>
<h1>{{ num }}</h1>
<h1>{{ lst1 }}</h1>
<h1>{{ lst1.1 }}</h1> <!-- 用点索引来取值 -->
<h1>{{ dict1 }}</h1>
<h1>{{ dict1.k1 }}</h1> <!-- 字典.键来取值 -->
<h1>{{ a.name }}</h1> <!-- 可以获取对象里的属性 -->
<h1>{{ a.get_name }}</h1> <!-- 只能获取对象里的无参方法，不能够获取有参方法 -->

</body>
</html>

过滤器

语法

语法无参数过滤的用法{{ 变量|过滤器名称 }} 有参数过滤器用法{{变量|过滤器名称:‘参数’}}}

注意点：管道符两边不能有空格,有参数的冒号加参数,无参数的不需要冒号

django自带的过滤器

default默认值

如果一个变量是false或者为空，使用给定的默认值。否则，使用变量的值。

'''没有传值'''
def home(request):
    username = 'yayapig' # 可以传字符串
    dic = {
        # 'username':username, # 没有传username
    }

    return render(request,'home.html',dic)

值为空

'''值为空'''
username = ''

default默认值语法

<p>
    {{ username|default:'Libolun' }}
</p

length 判断长度

<p>
    {{ username|length }}
</p>

filesizeformat 展示为可读的大小,自动计算单位

<p>
    {{ file_size|filesizeformat }}
</p>

slice 切片

<p>
    {{ msg|slice:'0:4' }}
</p>

date 日期格式化

<p>
    {{ current_time|date:"Y-m-d H:i:s" }} <!-- 注意分钟是用i来表示 -->
</p>

safe 将标签字符串识别为一个标签效果

使用safe的目的：防止xss攻击(跨站脚本攻击)
views.py 视图文件

def test(requqest):
    a_tag = '<a href="">某宝</a>'
    return render(request,'test.html',{'a_tag':a_tag})

test.html

<p>
    {{ a_tag|safe }}
</p>

truncatechars 字符截断

注意:7包括4个字符加3个省略号

<p>
    {{ msg|truncatechars:7 }}
</p>

truncatewords 单词截断

<p>
    {{ msg|truncatewords:2 }}
</p>

cut 移除value中所有的与给出的变量相同的字符串

<p>
    {{ msg|cut:' ' }} <!-- 去除value中所有的空格 -->
</p>

join 字符串拼接

<p>
    {{ list1|join:'+' }} <!-- 等同于python中的"+".join(list1) -->
</p>

for 循环标签

语法

语法: {% 标签逻辑 %}

循环列表

<ul>
    {% for i in lst1 %}
    <li>{{ i }}</li>
    {% empty %}  
        <span>哥,啥也木有啊</span>
    {% endfor %}
</ul>
<!-- 如果lst1为空,或者后台没有给lst1数据,那么就展示empty下面的内容 -->

循环字典

<ul>
    {% for k,v in dic1.items %}
        <li>{{ k }}--->{{ v }}</li>
    {% endfor %}
</ul>
<!-- 在循环中,可以接dic1.keys values items -->

循环嵌套

<ul>
    {% for i in lst1 %}
        <li>{{ i }}--->{{ forloop.counter }}</li>
        {% if forloop.last %}
            {% for ii in i %}
                <li>{{ ii }}--->{{ forloop.counter }}--->{{ forloop.parentloop.counter }}</li>
            {% endfor %}
        {% endif %}
    {% endfor %}
</ul>

forloop用法

forloop.counter            # 当前循环的索引值(从1开始)，forloop是循环器，通过点来使用功能
forloop.counter0           # 当前循环的索引值（从0开始）

forloop.revcounter         # 当前循环的倒序索引值（从1开始）
forloop.revcounter0        # 当前循环的倒序索引值（从0开始）

forloop.first              # 当前循环是不是第一次循环（布尔值）
forloop.last               # 当前循环是不是最后一次循环（布尔值）

forloop.parentloop         # 本层循环的外层循环的对象，再通过上面的几个属性来显示外层循环的计数等

if循环标签

if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断，注意条件两边都有空格。
views.py

from django.shortcuts import render

def home(request):
    number = 102

    dic = {
        'number':number,
    }

    return render(request,'home.html',dic)

home.html

{% if number == 100 %}
    <h1>猜对了</h1>
{% elif number == 101 %}
    <h1>101不对呀</h1>
{% else %}
    <h1>这更不对了</h1>

{% endif %}

if语句也可以和过滤配合使用

{% if user_list|length > 5 %}  <!--结合过滤器来使用-->
    可以可以
{% else %}
    不行不行
{% endif %}

Django的模板语言中属性的优先级大于方法
views.py

d2 = {'items': [11,22,33]}
优先使用items属性,不使用items方法,容易导致错误

html文件

优先使用items属性,不使用items方法,容易导致错误
<ul>
    {% for key,v in d2.items %}
        <li>{{ key }} -- {{ v }}</li>
    {% endfor %}
</ul>

with 起别名

使用一个简单地名字缓存一个复杂的变量，多用于给一个复杂的变量起别名，当你需要使用一个“昂贵的”方法（比如访问数据库）很多次的时候是非常有用的

例如：

注意等号左右不要加空格。

{% with business.employees.count as total %}
    {{ total }} <!--只能在with语句体内用-->
{% endwith %}

模板继承

Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的 blocks 。
语法：

{{% extends '模板文件' %}}

{% block content %}
	<h1>基础模板</h1>
{% endblock %}

例如：
先创建一个模板
base.html 模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            background-color: pink;
            height: 40px;

        }
        .left-menu{
            background-color: tan;
            width: 200px;
            min-height: 600px;
        }
        .item{
            background-color: yellow;
            height: 40px;
            border-bottom: 1px solid red;
        }
        .left{
            float: left;
        }
        .right{
            float: left;
        }

    </style>

    {% block css %}

    {% endblock %}

</head>
<body>

<div class="nav">
    <div class="c1">
        <a href="">32官网</a>
        <span>性感荷官, 在线发牌</span>

    </div>

</div>

<div class="main">
    <div class="left">
    <div class="left-menu">
        <div class="menu1 item">
            <a href="/t1/">菜单1</a>  <!-- 写相对路径时,前面的斜杠必须写 -->
        </div>
        <div class="menu2 item">
            <a href="/t2/">菜单2</a>
        </div>
        <div class="menu3 item">
            <a href="/t3/">菜单3</a>
        </div>
    </div>
</div>
<div class="right">
    <div class="content">
        {% block content %} 
            <h1>基础模板</h1>
        {% endblock %}
    </div>
</div>
</div>

</body>
{% block js %}

{% endblock %}
</html>
'''
在模板中预留block块(叫做 钩子)
{% block content %}
	<h1>基础模板</h1>
{% endblock %}
'''

<!子页面中继承模板extends

并重写模板中预留的block块中的内容

{{ block.super }} `显示模板的内容 !>


{% extends 'base.html' %}

{% block css %}
    <style>
        .c1{
            background-color: green;
            height: 40px;

        }
    </style>
{% endblock %}

{% block content %}

    <h1>性感美女,在线指导</h1>
    {{ block.super }} <!-- 显示模板的内容 -->
{% endblock %}

block块的写法

{% block content %}
...
{% endblock %}

{% block content %}
...
{% endblock content %}　　  可以指定endblock的名称,起到一个提示作用

组件

概念：

组件:把完整的一套功能封装成模块

在前端中，就是把一套完整的样式封装起来,供其他人使用

在其他的html文件中引入一个html文件

在home.html中如果我们想使用已经封装好的zujian.html
zujian.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            background-color: pink;
            height: 40px;
        }
    </style>
</head>
<body>

<div class="nav">
    <div class="c1">
        <a href="">32官网</a>
        <span>性感荷官, 在线发牌</span>

    </div>
</div>
</body>
</html>

在home.html中引入一下include
在页面什么位置引入,组件效果就生成到什么位置
home.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>这是home页面</h1>
{% include 'zujian.html' %}

</body>
</html>

静态文件配置

在项目根目录下创建一个文件夹,比如名称为statics

在setting.py中写入如下内容

STATIC_URL = '/static/' #别名

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'statics'), # 注意别忘了写逗号,第二个参数就是项目中你存放静态文件的文件夹名称
]

在html文件中引入时使用别名

<!-- 两种引入方式 -->
<link rel="stylesheet" href="/static/css/test.css"> # 直接写别名路径开头
<link rel="stylesheet" href="{% static 'css/test.css' %}"> # 推荐使用

<!-- 导入一张图片 -->
<img src="/static/imgs/test.png" alt="">

<!-- 引入js文件 -->
<script src="/static/js/xx.js"></script>