zoukankan      html  css  js  c++  java

  • Flask—模板渲染jinja2 和render_template高级用法

    Flask 与 Django 的对比：

    • Django 的模板语言是 render_tempalte
    • Flask 的模板语言呢是jinja2
    • jinja2包含 render_tempalte

    看下面一些概念认认脸:

    {{ }}    # 变量,非逻辑代码

{% %}    # 逻辑代码

{% if session %}    # if 语句
{% endif %}

{% for foo in session %}    # for 循环语句    
{% endfor %}

@app.template_global() # 全局函数

Markup # 安全标签字符串儿
{% macro func() %}
{% endmacro %}

    定义以下参数

    STUDENT = {'name': 'Old', 'age': 38, 'gender': '中'},

STUDENT_LIST = [
    {'name': 'Old', 'age': 38, 'gender': '中'},
    {'name': 'Boy', 'age': 73, 'gender': '男'},
    {'name': 'EDU', 'age': 84, 'gender': '女'}
]

STUDENT_DICT = {
    1: {'name': 'Old', 'age': 38, 'gender': '中'},
    2: {'name': 'Boy', 'age': 73, 'gender': '男'},
    3: {'name': 'EDU', 'age': 84, 'gender': '女'},

    一. 字典传递至前端

    后端:

    @app.route("/student")
def index():
    return render_template("student.html", student=STUDENT)

    前端:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
Welcome to Old Boy EDU
<div>{{ student }}</div>
<table border="1px">
    <tr>
        <td>{{ student.name }}</td>
        <td>{{ student["age"] }}</td>
        <td>{{ student.get("gender") }}</td>
    </tr>
</table>
</body>
</html>

    结果:

    二. 列表传入前端Jinja2 模板的操作:

    后端:

    @app.route("/student_list")
def student_list():
    return render_template("student_list.html", student=STUDENT_LIST)

    前端:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
Welcome to Old Boy EDU
<div>{{ student }}</div>
<table border="1xp">
    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ foo.name }}</td>
            <td>{{ foo.get("age") }}</td>
            <td>{{ foo["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

    结果:

    三. 大字典传入前端 Jinja2 模板

    后端:

    @app.route("/student_dict")
def student_dict():
    return render_template("student_dict.html", student=STUDENT_DICT)

    前端:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
Welcome to Old Boy EDU
<table>
    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ student.get(foo).name }}</td>
            <td>{{ student[foo].get("age") }}</td>
            <td>{{ student[foo]["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

    在遍历字典的时候,foo 其实是相当于拿出了字典中的Key

    结果:

    四. 传递多个参数到前段

    后端:

    @app.route("/allstudent")
def all_student():
    return render_template("all_student.html", student=STUDENT ,
                           student_list = STUDENT_LIST,
                           student_dict= STUDENT_DICT)

    前端:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
<div> _____________________________________</div>
Welcome to Old Boy EDU : student
<div>{{ student }}</div>
<table border="1px">
    <tr>
        <td>{{ student.name }}</td>
        <td>{{ student["age"] }}</td>
        <td>{{ student.get("gender") }}</td>
    </tr>
</table>
<div> _____________________________________</div>
Welcome to Old Boy EDU : student_list
<div>{{ student_list }}</div>
<table border="1xp">
    {% for foo in student_list %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ foo.name }}</td>
            <td>{{ foo.get("age") }}</td>
            <td>{{ foo["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
<div> _____________________________________</div>
Welcome to Old Boy EDU : student_dict
<div>{{ student_dict }}</div>
<table border="1xp">
    {% for foo in student_dict %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ student_dict.get(foo).name }}</td>
            <td>{{ student_dict[foo].get("age") }}</td>
            <td>{{ student_dict[foo]["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

    结果:

    五.利用 **{}字典的方式传递参数

    @app.route("/allstudent")
def all_student():
    return render_template("all_student.html", **{"student":STUDENT ,
                           "student_list" : STUDENT_LIST,
                           "student_dict": STUDENT_DICT})

    六. jinja2的高阶用法

    safe

    第一种方式:

    后端:

    from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route("/")
def index():
    tag = "<input type='text' name='user' value='DragonFire'>"
    return render_template("index.html",tag=tag)
app.run("0.0.0.0",5000)

    前端:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag | safe}}  <!--  加上个   管道符,然后 safe  -->
</body>
</html>

    第二种可以从后端入手:

    from flask import Flask
from flask import render_template
from flask import Markup  # 导入 flask 中的 Markup 模块 
app = Flask(__name__) 
@app.route("/")
def index():
    tag = "<input type='text' name='user' value='DragonFire'>"
    markup_tag = Markup(tag)  # Markup帮助咱们在HTML的标签上做了一层封装,让Jinja2模板语言知道这是一个安全的HTML标签
    print(markup_tag,
          type(markup_tag))  # <input type='text' name='user' value='DragonFire'> <class 'markupsafe.Markup'>
    return render_template("index.html", tag=markup_tag) 

app.run("0.0.0.0", 5000, debug=True)

    在jinja2模板中执行Python函数

    1. 后端函数传到前段

    后端代码:

    from flask import Flask
from flask import render_template
from flask import Markup  # 导入 flask 中的 Markup 模块
app = Flask(__name__)

#定义一个函数,把它传递给前端
def a_b_sum(a,b):
    return a+b
@app.route("/")
def index():
    return render_template("index.html", tag=a_b_sum)
app.run("0.0.0.0", 5000, debug=True)

    前段代码:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag }}
    <br>
    {{ tag(99,1) }}
</body>
</html>

    1. 定义全局函数,无需后端传递给前端,Jinja2直接就可以执行的函数

    后端代码:

    from flask import Flask
from flask import render_template
from flask import Markup  # 导入 flask 中的 Markup 模块
app = Flask(__name__)
@app.template_global()  # 定义全局模板函数
def a_b_sum(a, b):
    return a + b
@app.template_filter()  # 定义全局模板函数
def a_b_c_sum(a, b, c):
    return a + b + c
@app.route("/")
def index():
    return render_template("index.html", tag="")
app.run("0.0.0.0", 5000, debug=True)

    前段代码:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ a_b_sum(99,1) }}
    <br>
    {{ 1 | a_b_c_sum(197,2) }}
</body>
</html>

    jinja模板复用 block

    1.提供一个模板index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Welcome OldboyEDU</h1>
    <h2>下面的内容是不一样的</h2>
    {% block content %}

    {% endblock %}
    <h2>上面的内容是不一样的,但是下面的内容是一样的</h2>
    <h1>OldboyEDU is Good</h1>
</body>
</html>

    2.login.html使用index.html模板

    {% extends "index.html" %}

{% block content %}
    <form>
        用户名:<input type="text" name="user">
        密码:<input type="text" name="pwd">
    </form>
{% endblock %}

    Jinja2模板语言的模块引用 include

    login.html 文件中的内容:

    <form>
    用户名:<input type="text" name="user">
    密码:<input type="text" name="pwd">
</form>

    index.html 文件中的内容

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Welcome OldboyEDU</h1>
    <h2>下面的内容是不一样的</h2>
    {% include "login.html" %}
    <h2>上面的内容是不一样的,但是下面的内容是一样的</h2>
</body>
</html>

    后端代码:

    from flask import Flask
from flask import render_template

app = Flask(__name__)
@app.route("/")
def index():
    return render_template("index.html")

app.run("0.0.0.0", 5000, debug=True)

    这就是将 login.html 当成一个模块,加载到 index.html 页面中

    Jinja2模板语言中的宏定义

    前端代码:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{% macro type_text(name,type) %}
    <input type="{{ type }}" name="{{ name }}" value="{{ name }}">
{% endmacro %}

<h2>在下方是使用宏来生成input标签</h2>

{{ type_text("one","text") }}
{{ type_text("two","text") }}

</body>
</html>
  • 相关阅读:
    springboot springcloud zuul 过滤器
    springboot springcloud eureka 熔断器
    javaweb servlet filter
    maven nexus 搭建私服（二）
    springboot springcloud zuul 网关入门
    springboot springcloud 配置中心
    springboot springcloud eureka 入门
    java rabbitmq
    java jvm调优
    maven nexus 搭建私服（一）
  • 原文地址：https://www.cnblogs.com/aitree/p/14367500.html
Copyright © 2011-2022 走看看