【Flask基础】七，Flask--Jinja2模板学习

最新推荐文章于 2023-04-28 09:48:39 发布

宋建国

最新推荐文章于 2023-04-28 09:48:39 发布

阅读量423

点赞数

分类专栏： Flask全栈文章标签： flask 学习 python

本文链接：https://blog.csdn.net/hot7732788/article/details/126390419

版权

Flask全栈专栏收录该内容

9 篇文章 3 订阅

订阅专栏

一，模板变量

变量传至前端
可传输多种形式变量，并且可以在前端使用部分数据函数

二，变量控制语句

1.if

     {% if user %}
        <title> hello {{user}} </title>
    {% else %}
         <title> welcome to flask </title>        
    {% endif %}

2.for

        {% for index in fruit %}
            <li>{{ index }}</li>
        {% endfor %}

3.with+set

在这里插入图片描述

二，过滤器（支持链式操作）

过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值，我们还需要修改变量的显示，甚至格式化、运算等等，这就用到了过滤器。过滤器的使用方式为：变量名 | 过滤器。过滤器名写在变量名后面，中间用 | 分隔。如：{{variable | capitalize}}，这个过滤器的作用：把变量variable的值的首字母转换为大写，其他字母转换为小写。

过滤器支持链式操作

1.系统预设过滤器

在这里插入图片描述
https://www.likecs.com/show-203879391.html

常用字符串操作

#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>

#trim：把值的首尾空格去掉；
  <p>{{ ' hello world ' | trim }}</p>

#reverse:字符串反转；
  <p>{{ 'olleh' | reverse }}</p>

#format:格式化输出；
  <p>{{ '%s is %d' | format('name',17) }}</p>

#striptags：渲染之前把值中所有的HTML标签都删掉；
  <p>{{ '<em>hello</em>' | striptags }}</p>

#truncate过滤器: 截取一个变量的字符串长度, 相当于切片操作
 <div class="intro">
     {{article.content | striptags | truncate(80)}}
 </div>

常用列表操作

#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>

2.自定义过滤器

过滤器的本质是函数。当模板内置的过滤器不能满足需求，可以自定义过滤器。自定义过滤器有两种实现方式：一种是通过Flask应用对象的add_template_filter方法。还可以通过装饰器来实现自定义过滤器。
自定义的过滤器名称如果和内置的过滤器重名，会覆盖内置的过滤器。
在这里插入图片描述

注册自定义过滤器

#【过滤器注册1】
def list_step_2(li):
    """自定义的过滤器"""
    return li[::2]
# 注册过滤器
app.add_template_filter(list_step_2, "li2")

#【过滤器注册2】
@app.template_filter("li3")
def list_step_3(li):
    """自定义的过滤器"""
    return li[::3]

调用自定义过滤器

    <!--过滤器过滤数据-->
    <p>{{my_list | li2 }}</p>
    <p>{{my_list | li3 }}</p>

三，模板宏+闪现

1.模板宏（纯前端方法）

宏的作用就是在模板中重复利用代码，避免代码冗余

（1）常用使用流程

定义：将宏单独封装在html文件中（例：macro.html）

{% macro input() %}
    <input type="text" name="username" placeholde="Username">
    <input type="password" name="password" placeholde="Password">
    <input type="submit">
{% endmacro %}

调用：在其它模板文件中先导入，再调用

{% import 'macro.html' as func %}
{{ func.input() }}

（2）不带参数宏的定义与使用

在这里插入图片描述

（3）带参数宏的定义与使用

在这里插入图片描述

2.闪现：闪现信息-存一次只能取一次（常用于提供首次执行需要用到的数据）

在这里插入图片描述

前端显示闪现数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>闪现--显示模板渲染前添加的闪现信息</h1>
    {% for msg in get_flashed_messages() %}
        <p>{{msg}}</p>
    {% endfor %}

</body>
</html>

后端插入闪现信息数据

# coding:utf-8
from flask import Flask, render_template, flash
app = Flask(__name__)
flag = True

app.config["SECRET_KEY"] = "SDHFOSDF"

#模板不仅可以创建，还可以继承-拓展（父模板为中心扩充），继承-包含（自己为中心包含其他模板）
@app.route("/")
def index():
    global flag  #变量全局化，用于控制闪现信息只显示一次
    if flag:
        # 添加闪现信息-存一次只能取一次--用于自定义错误显示信息（用时再看）
        flash("hello1")
        flash("hello2")
        flash("hello3")
        flag = False  #设置为只添加一次闪现信息
    return render_template("micro.html")

if __name__ == '__main__':
    app.run(debug=True)

四，模板继承/引入

1.模板继承–基于其他前端模板填充上本模板代码

其他模板填充位置标注

<!-- 中部区域布局 -->
<div class="container" style="margin-top: 20px;">
    <div class="row">
        <!-- 填充中部左侧文章列表和文章阅读页面内容 -->
        {% block content %}
        {% endblock %}
    </div>
</div>

本模板添加继承标注

2.模板引入–基于本前端模板填充其他模板代码

被引入模板无需任何标注
引入模板需要在需要位置，填写include标注（即可引入模板）：

        {# 按需引入side.html，首页需要 #}
        {% include '侧边栏-vue.html' %}

五，前端模板直接调用后端数据（固定数据）

1.变量方式调用（推荐这种）

定义

# 【第一种方式：使用上下文处理器来注册自定义函数到Jinja2模板引擎中，并且返回一个字典类型的数据】
@jinja2.context_processor
def gettype_01():
    type = {'1':'PHP开发', '2':'Java开发', '3':'Python开发'}
    return dict(mytype=type)

# 【使用频数较低】如果要为自定义函数传参，则需要使用二层闭包进行包裹
@jinja2.context_processor
def myfunc():
    def mytype(arg):
        type = {'1': 'PHP开发', '2': 'Java开发', '3': 'Python开发',"bianliang":arg}
        return type
    return dict(mytype=mytype)

调用

        {# 调用上下文处理器函数--函数形式调用 #}
        {{mytype('bianliang')}}<br/><br/>
        {{mytype('bianliang')['2']}}<br/><br/>
        {{mytype('bianliang')['2']}}<br/><br/>

2.标准函数方式调用

定义

# 【第二种方式：按照标准的函数调用的方式进行】
def gettype():
    type = {'1': 'PHP开发', '2': 'Java开发', '3': 'Python开发'}
    return type
#注册函数变量到全局环境
app.jinja_env.globals.update(mytype=gettype)

调用

        {# 调用上下文处理器函数--函数形式调用 #}
        {{mytype()}}<br/><br/>
        {{mytype()['2']}}<br/><br/>

六，无Jinja2模板下的数据传送前端方法

from flask import Blueprint

myhtml = Blueprint('myhtml', __name__)

# 【方法一：直接将HTML写到代码中，并返回】
@myhtml.route('/template01')
def template01():
    resp = '''
    <div style="width: 500px; height: 300px; margin:auto; border: solid 2px red;">
        <a href="#">建国笔记</a>
        <ul>
            <li>这是菜单项一</li>
            <li>这是菜单项二</li>
            <li>这是菜单项三</li>
            <li>这是菜单项四</li>
        </ul>
        <p>欢迎登录.</p>
    </div>
    '''
    return resp

# 【方法二：直接将变量和HTML进行拼接，再写入响应】
@myhtml.route('/template02/<username>')
def template02(username):
    resp = '''
    <div style="width: 500px; height: 300px; margin:auto; border: solid 2px red;">
        <a href="#">建国笔记</a>
        <ul>
            <li>这是菜单项一</li>
            <li>这是菜单项二</li>
            <li>这是菜单项三</li>
            <li>这是菜单项四</li>
        </ul>
        <p>欢迎 %s 登录.</p>
    </div>
    ''' % username
    return resp

# 【方法三：把HTML内容保存到文件中，打开该文件并响应】
@myhtml.route('/template03')
def template03():
    with open('template/myhtml.html', encoding='utf-8') as file:
        html = file.read()

    return html

# 【方法四：在HTML文件中标识模板变量，然后在渲染前对模板变量的值进行替换】
# 实现了Python代码与HTML模板页面分离
@myhtml.route('/template04')
def template04():
    with open('template/myhtml.html', encoding='utf-8') as file:
        html = file.read()

    html = html.replace('{{username}}', '建国笔记')

    return html