Flask-模板

编程语言 2018-07-07 08:58:30 阅读次数: 0

Jinja2模板引擎简介

模板

在前面的示例中，视图函数的主要作用是生成请求的响应，这是最简单的请求。实际上，视图函数有两个作用：处理业务逻辑和返回响应内容。在大型应用中，把业务逻辑和表现内容放在一起，会增加代码的复杂度和维护成本。本节学到的模板，它的作用即是承担视图函数的另一个作用，即返回响应内容。

  • 模板其实是一个包含响应文本的文件，其中用占位符(变量)表示动态部分，告诉模板引擎其具体的值需要从使用的数据中获取
  • 使用真实值替换变量，再返回最终得到的字符串，这个过程称为“渲染”
  • Flask是使用 Jinja2 这个模板引擎来渲染模板

使用模板的好处：

  • 视图函数只负责业务逻辑和数据处理(业务逻辑方面)
  • 而模板则取到视图函数的数据结果进行展示(视图展示方面)
  • 代码结构清晰，耦合度低

Jinja2

两个概念：

  • Jinja2：是 Python 下一个被广泛应用的模板引擎，是由Python实现的模板语言，他的设计思想来源于 Django 的模板引擎，并扩展了其语法和一系列强大的功能，其是Flask内置的模板语言。
  • 模板语言：是一种被设计来自动生成文档的简单文本格式，在模板语言中，一般都会把一些变量传给模板，替换模板的特定位置上预先定义好的占位变量名。

渲染模版函数

  • Flask提供的 render_template 函数封装了该模板引擎
  • render_template 函数的第一个参数是模板的文件名，后面的参数都是键值对，表示模板中变量对应的真实值。

使用

  • {{}} 来表示变量名，这种 {{}} 语法叫做变量代码块
<h1>{{ post.title }}</h1>

Jinja2 模版中的变量代码块可以是任意 Python 类型或者对象，只要它能够被 Python 的 str() 方法转换为一个字符串就可以，比如，可以通过下面的方式显示一个字典或者列表中的某个元素:

{{your_dict['key']}}
{{your_list[0]}}
  • 用 {%%} 定义的控制代码块，可以实现一些语言层次的功能，比如循环或者if语句
{% if user %}
    {{ user }}
{% else %}
    hello!
<ul>
    {% for index in indexs %}
    <li> {{ index }} </li>
    {% endfor %}
</ul>

注释

  • 使用 {# #} 进行注释，注释的内容不会在html中被渲染出来
{# {{ name }} #}

模板的使用

  • 在项目下创建 templates 文件夹，用于存放所有的模板文件，并在目录下创建一个模板html文件 temp_demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我的模板html内容
</body>
</html>
  • 设置 templates 文件夹属性以便能够在代码中有智能提示

  • 设置 html 中的模板语言，以便在 html 有智能提示

  • 创建视图函数，将该模板内容进行渲染返回
@app.route('/')
def index():
    return render_template('temp_demo1.html')

访问：http://127.0.0.1:5000/ 运行测试

  • 代码中传入字符串，列表，字典到模板中
@app.route('/')
def index():
    # 往模板中传入的数据
    my_str = 'Hello 黑马程序员'
    my_int = 10
    my_array = [3, 4, 2, 1, 7, 9]
    my_dict = {
        'name': 'xiaoming',
        'age': 18
    }
    return render_template('temp_demo1.html',
                           my_str=my_str,
                           my_int=my_int,
                           my_array=my_array,
                           my_dict=my_dict
                           )
  • 模板中代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我的模板html内容
<br/>{{ my_str }}
<br/>{{ my_int }}
<br/>{{ my_array }}
<br/>{{ my_dict }}

</body>
</html>
  • 运行效果

<!DOCTYPE html>

我的模板html内容 
Hello 黑马程序员 
10 
[3, 4, 2, 1, 7, 9] 
{'name': 'xiaoming', 'age': 18}
  • 相关运算，取值

<br/> my_int + 10 的和为：{{ my_int + 10 }}
<br/> my_int + my_array第0个值的和为：{{ my_int + my_array[0] }}
<br/> my_array 第0个值为：{{ my_array[0] }}
<br/> my_array 第1个值为：{{ my_array.1 }}
<br/> my_dict 中 name 的值为：{{ my_dict['name'] }}
<br/> my_dict 中 age 的值为：{{ my_dict.age }}
  • 结果
my_int + 10 的和为：20 
my_int + my_array第0个值的和为：13 
my_array 第0个值为：3 
my_array 第1个值为：4 
my_dict 中 name 的值为：xiaoming 
my_dict 中 age 的值为：18


过滤器

过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值，我们还需要修改变量的显示，甚至格式化、运算等等，而在模板中是不能直接调用 Python 中的某些方法，那么这就用到了过滤器。

使用方式：

  • 过滤器的使用方式为：变量名 | 过滤器。
{{variable | filter_name(*args)}}
  • 如果没有任何参数传给过滤器,则可以把括号省略掉
{{variable | filter_name}}
  • 如：``，这个过滤器的作用：把变量variable 的值的首字母转换为大写，其他字母转换为小写

链式调用

在 jinja2 中，过滤器是可以支持链式调用的，示例如下：

{{ "hello world" | reverse | upper }}

常见内建过滤器

字符串操作

  • safe：禁用转义
<p>{{ '<em>hello</em>' | safe }}</p>
  • capitalize：把变量值的首字母转成大写，其余字母转小写
<p>{{ 'hello' | capitalize }}</p>
  • lower：把值转成小写
<p>{{ 'HELLO' | lower }}</p>
  • upper：把值转成大写
<p>{{ 'hello' | upper }}</p>
  • title：把值中的每个单词的首字母都转成大写
<p>{{ 'hello' | title }}</p>
  • reverse：字符串反转
<p>{{ 'olleh' | reverse }}</p>
  • format：格式化输出
<p>{{ '%s is %d' | format('name',17) }}</p>
  • striptags：渲染之前把值中所有的HTML标签都删掉
<p>{{ '<em>hello</em>' | striptags }}</p>
  • truncate: 字符串截断
<p>{{ 'hello every one' | truncate(9)}}</p>

列表操作

  • first：取第一个元素
<p>{{ [1,2,3,4,5,6] | first }}</p>
  • last：取最后一个元素
<p>{{ [1,2,3,4,5,6] | last }}</p>
  • length：获取列表长度
<p>{{ [1,2,3,4,5,6] | length }}</p>
  • sum：列表求和
<p>{{ [1,2,3,4,5,6] | sum }}</p>
  • sort：列表排序
<p>{{ [6,2,3,1,5,4] | sort }}</p>

语句块过滤

{% filter upper %}
    #一大堆文字#
{% endfilter %}


自定义过滤器

过滤器的本质是函数。当模板内置的过滤器不能满足需求，可以自定义过滤器。自定义过滤器有两种实现方式：

  • 一种是通过Flask应用对象的 add_template_filter 方法
  • 通过装饰器来实现自定义过滤器

重要：自定义的过滤器名称如果和内置的过滤器重名，会覆盖内置的过滤器。

需求：添加列表反转的过滤器

方式一

通过调用应用程序实例的 add_template_filter 方法实现自定义过滤器。该方法第一个参数是函数名，第二个参数是自定义的过滤器名称：

def do_listreverse(li):
    # 通过原列表创建一个新列表
    temp_li = list(li)
    # 将新列表进行返转
    temp_li.reverse()
    return temp_li

app.add_template_filter(do_listreverse,'lireverse')

方式二

用装饰器来实现自定义过滤器。装饰器传入的参数是自定义的过滤器名称。

@app.template_filter('lireverse')
def do_listreverse(li):
    # 通过原列表创建一个新列表
    temp_li = list(li)
    # 将新列表进行返转
    temp_li.reverse()
    return temp_li
  • 在 html 中使用该自定义过滤器
<br/> my_array 原内容：{{ my_array }}
<br/> my_array 反转：{{ my_array | lireverse }}
  • 运行结果
my_array 原内容：[3, 4, 2, 1, 7, 9] 
my_array 反转：[9, 7, 1, 2, 4, 3]

控制代码块

控制代码块主要包含两个：

- if/else if /else / endif
- for / endfor

if语句

Jinja2 语法中的if语句跟 Python 中的 if 语句相似,后面的布尔值或返回布尔值的表达式将决定代码中的哪个流程会被执行:

{%if user.is_logged_in() %}
    <a href='/logout'>Logout</a>
{% else %}
    <a href='/login'>Login</a>
{% endif %}

过滤器可以被用在 if 语句中:

{% if comments | length > 0 %}
    There are {{ comments | length }} comments
{% else %}
    There are no comments
{% endif %}

循环

  • 我们可以在 Jinja2 中使用循环来迭代任何列表或者生成器函数
{% for post in posts %}
    <div>
        <h1>{{ post.title }}</h1>
        <p>{{ post.text | safe }}</p>
    </div>
{% endfor %}
  • 循环和if语句可以组合使用，以模拟 Python 循环中的 continue 功能，下面这个循环将只会渲染post.text不为None的那些post：
{% for post in posts if post.text %}
    <div>
        <h1>{{ post.title }}</h1>
        <p>{{ post.text | safe }}</p>
    </div>
{% endfor %}
  • 在一个 for 循环块中你可以访问这些特殊的变量:
变量 描述
loop.index 当前循环迭代的次数（从 1 开始）
loop.index0 当前循环迭代的次数（从 0 开始）
loop.revindex 到循环结束需要迭代的次数（从 1 开始）
loop.revindex0 到循环结束需要迭代的次数（从 0 开始）
loop.first 如果是第一次迭代，为 True 。
loop.last 如果是最后一次迭代，为 True 。
loop.length 序列中的项目数。
loop.cycle 在一串序列间期取值的辅助函数。见下面示例程序。

  • 在循环内部,你可以使用一个叫做loop的特殊变量来获得关于for循环的一些信息

    • 比如：要是我们想知道当前被迭代的元素序号，并模拟Python中的enumerate函数做的事情，则可以使用loop变量的index属性,例如:
{% for post in posts%}
{{loop.index}}, {{post.title}}
{% endfor %}
  • 会输出这样的结果
1, Post title
2, Second Post
  • cycle函数会在每次循环的时候,返回其参数中的下一个元素,可以拿上面的例子来说明:
{% for post in posts%}
{{loop.cycle('odd','even')}} {{post.title}}
{% endfor %}
  • 会输出这样的结果：
odd Post Title
even Second Post

示例程序

  • 实现的效果

  • 准备数据
# 只显示4行数据，背景颜色依次为：黄，绿，红，紫
my_list = [
    {
        "id": 1,
        "value": "我爱工作"
    },
    {
        "id": 2,
        "value": "工作使人快乐"
    },
    {
        "id": 3,
        "value": "沉迷于工作无法自拔"
    },
    {
        "id": 4,
        "value": "日渐消瘦"
    },
    {
        "id": 5,
        "value": "以梦为马，越骑越傻"
    }
]
  • 模板代码
{% for item in my_list if item.id != 5 %}
    {% if loop.index == 1 %}
        <li style="background-color: orange">{{ item.value }}</li>
    {% elif loop.index == 2 %}
        <li style="background-color: green">{{ item.value }}</li>
    {% elif loop.index == 3 %}
        <li style="background-color: red">{{ item.value }}</li>
    {% else %}
        <li style="background-color: purple">{{ item.value }}</li>
    {% endif %}
{% endfor %}

猜你喜欢

转载自blog.csdn.net/qq_29286967/article/details/80948351
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022