Flask - 模板语言jinja2 和render_template高级用法

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

最新文章

  1. 【HanLP】资料链接汇总
  2. sublime下安装ctags
  3. 转载：移动前端开发之viewport的深入理解
  4. CSS行高——line-height
  5. ubuntu中rar与unrar用法详解
  6. Android popupwindow 弹出的位置问题
  7. [React Native] Complete the Notes view
  8. PHP代码安全学习笔记V1.0
  9. Sequence《优先队列》
  10. C#中格式化数据的输出
  11. SOAP 简单对象访问协议
  12. JS中的变量和输入输出
  13. 【Netty源码学习】DefaultChannelPipeline（三）
  14. Fatal error: cannot initialize AIO sub-system
  15. linux 查看文件夹大小
  16. leetcode62
  17. Codeforces Beta Round #75 (Div. 2 Only)
  18. 【MySQL】 DB 回滚崩溃案例一则
  19. 【推荐】开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
  20. 【5】.net WCF 简单实例

热门文章

  1. Codeforces Round #313 A. Currency System in Geraldion(简单题)
  2. 【转】SDK、JDK、JRE、JVM、JDT、CDT等之间的区别与联系 .
  3. openStack调试
  4. 71.Ext.form.ComboBox 完整属性
  5. 多物体运动框架案例一：多个Div的宽度运动变化
  6. POI上传Excel的小问题处理
  7. 【洛谷4770/UOJ395】[NOI2018]你的名字（后缀数组_线段树合并）
  8. 题解报告：hdu 1213 How Many Tables
  9. Android源码下载方法
  10. 【Leetcode146】LRU Cache