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

    一，模板变量

    • 变量传至前端
      在这里插入图片描述
    • 可传输多种形式变量，并且可以在前端使用部分数据函数
      在这里插入图片描述

    二，变量控制语句

    1.if

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

    • 1
    • 2
    • 3
    • 4
    • 5

    2.for

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

    • 1
    • 2
    • 3

    3.with+set

    在这里插入图片描述

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

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

    • 过滤器支持链式操作
      在这里插入图片描述

    1.系统预设过滤器

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

    • 常用字符串操作
    #safe：禁用转义；
  <p>{{ '<em>helloem>' | 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>helloem>' | striptags }}p>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 常用列表操作
    #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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    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]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 调用自定义过滤器
        
    <p>{{my_list | li2 }}p>
    <p>{{my_list | li3 }}p>

    • 1
    • 2
    • 3

    三，模板宏+闪现

    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 %}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 调用：在其它模板文件中先导入，再调用
    {% import 'macro.html' as func %}
{{ func.input() }}

    • 1
    • 2

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

    在这里插入图片描述

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

    在这里插入图片描述

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

    在这里插入图片描述

    在这里插入图片描述

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

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 后端插入闪现信息数据
    # 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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    四，模板继承/引入

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

    • 其他模板填充位置标注
    
<div class="container" style="margin-top: 20px;">
    <div class="row">
        
        {% block content %}
        {% endblock %}
    div>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 本模板添加继承标注
      在这里插入图片描述

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

    • 被引入模板无需任何标注
    • 引入模板需要在需要位置，填写include标注（即可引入模板）：
            {# 按需引入side.html，首页需要 #}
        {% include '侧边栏-vue.html' %}

    • 1
    • 2

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

    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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 调用
      在这里插入图片描述
            {# 调用上下文处理器函数--函数形式调用 #}
        {{mytype('bianliang')}}<br/><br/>
        {{mytype('bianliang')['2']}}<br/><br/>
        {{mytype('bianliang')['2']}}<br/><br/>

    • 1
    • 2
    • 3
    • 4

    2.标准函数方式调用

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 调用
      在这里插入图片描述
            {# 调用上下文处理器函数--函数形式调用 #}
        {{mytype()}}<br/><br/>
        {{mytype()['2']}}<br/><br/>

    • 1
    • 2
    • 3

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

    from flask import Blueprint

myhtml = Blueprint('myhtml', __name__)

# 【方法一：直接将HTML写到代码中，并返回】
@myhtml.route('/template01')
def template01():
    resp = '''
    
    
        建国笔记
        
      
            
    • 这是菜单项一
      • 
            
    • 这是菜单项二
      • 
            
    • 这是菜单项三
      • 
            
    • 这是菜单项四
      • 
        
    
        
    欢迎登录.
    
    
    
    '''    
    return resp

# 【方法二：直接将变量和HTML进行拼接，再写入响应】
@myhtml.route('/template02/')
def template02(username):
    resp = '''
    
    
        建国笔记
        
      
            
    • 这是菜单项一
      • 
            
    • 这是菜单项二
      • 
            
    • 这是菜单项三
      • 
            
    • 这是菜单项四
      • 
        
    
        
    欢迎 %s 登录.
    
    
    
    '''     % 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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
  • 相关阅读:
    Vue响应式数据的实现原理（手写副作用函数的存储和执行过程）
    【机器学习】六、概率图模型
    做短视频必须要知道的几个视频设置参数，爆款必备。
    最新版本 Stable Diffusion 开源AI绘画工具之部署篇
    Vue 的生命周期
    vue中如何在自定义组件上使用v-model和.sync
    opencv 判断点在多边形内外
    [项目管理-8]：软硬件项目管理 - 项目成本管理（钱、财）
    centos安装conda python3.10
    XML配置文件
  • 原文地址：https://blog.csdn.net/hot7732788/article/details/126390419