第四篇flask中模板语言 jinja2

Flask中默认的模板语言是Jinja2

首先我们要在后端定义几个字符串,用于传递到前端

STUDENT = {'name': 'Old', 'age': , 'gender': '中'},
 
STUDENT_LIST = [
    {'name': 'gangdan', 'age': , 'gender': '中'},
    {'name': 'tiechui', 'age': , 'gender': '男'},
    {'name': 'xiaoming', 'age': , 'gender': '女'}
]
 
STUDENT_DICT = {
    : {'name': 'gangdan', 'age': , 'gender': '中'},
    : {'name': 'tiechui', 'age': , 'gender': '男'},
    : {'name': 'xiaoming', 'age': , 'gender': '女'},
}

但是前提我们要知道Jinja2模板中的流程控制:

I. Jinja2模板语言中的 for

{% for foo in g %}
 
{% endfor %}

II. Jinja2模板语言中的 if

{% if g %}
 
{% elif g %}
 
{% else %}
 
{% endif %}

接下来,我们对这几种情况分别进行传递,并在前端显示成表格

1. 使用STUDENT字典传递至前端

后端:

@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 模板语言中的取值操作, 与Python中的Dict操作极为相似,并且多了一个student.name的对象操作

2. STUDENT_LIST 列表传入前端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>
<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 给我们的方案是

    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
        </tr>
    {% endfor %}

上述代码中的 foo 就是列表中的每一个字典,再使用各种取值方式取出值即可

3.STUDENT_DICT 大字典传入前端 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>
<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

4.结合所有的字符串儿全部专递前端Jinja2 模板

后端:

@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  : 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 : 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  : 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>

这里可以看出来,render_template中可以传递多个关键字

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

前端不变(标题4的前端代码)

后端:

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

6. Jinja2 的高阶用法

Jinja2 模板语言为我们提供了很多功能接下来看一下它有什么高级的用法

6.1. safe : 此时你与HTML只差一个 safe

后端代码:

from flask import Flask
from flask import render_template
 
app = Flask(__name__)
 
@app.route("/")
def index():
    tag = "<input type='text' name='user' value='username'>"
    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 }}
</body>
</html>

如果我们直接运行代码直接访问,你会在页面看到：就是字符创类型的标签

似乎和我们想要结果不太一样,有两种解决方案,

第一种,从前端入手

前端代码:

<!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='username'> <class 'markupsafe.Markup'>
    return render_template("index.html", tag=markup_tag)
 
app.run("0.0.0.0", 5000, debug=True)

两种得到的效果是一样

6.2 在Jinja2中执行Python函数(模板中执行函数)

首先在文件中定义一个函数

后端代码:

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>

看到结果就是,函数加()执行得到结果

还可以定义全局函数,无需后端传递给前端,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>

两个函数的调用方式不太一样

尤其是@app.template_filter() 它的调用方式比较特别,这是两个Flask中的特殊装饰器

6.3 Jinja2模板复用 block

如果我们前端页面有大量重复页面,没必要每次都写,可以使用模板复用的方式复用模板

前端代码:

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>
 
</body>
</html>

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

home.html 文件中的内容

{% extends "index.html" %}
{% block content %}
    <h1>登陆成功</h1>
{% endblock %}

后端代码:

from flask import Flask
from flask import render_template
 
app = Flask(__name__)
 
@app.route("/login")
def login():
    return render_template("login.html")
 
@app.route("/home")
def home():
    return render_template("home.html")
 
app.run("0.0.0.0", 5000, debug=True)

然后我们可以看到什么呢?

在这两个页面中,只有 block 中的内容发生了变化,其他的位置完全一样

6.4 Jinja2模板语言的模块引用 include

<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>
    <h1>OldboyEDU is Good</h1>
</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 页面中

6.5 Jinja2模板语言中的宏定义

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<h1>Welcome OldboyEDU</h1>
 
{% 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>

宏定义一般情况下很少应用到,但是要知道有这么个概念

第四篇flask中模板语言 jinja2的更多相关文章

Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法
是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下首先我们要在后端定义几个字符 ...
第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法
是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下首先我们要在后端定义几个字符 ...
第四篇Django之模板语言
Django之模板语言一模板的执行模板的创建过程,对于模板,其实就是读取模板(其中嵌套着模板的标签),然后将Model中获取的数据插入到模板中,最后将信息返回给用户 def current_da ...
python 全栈开发，Day119(Flask初识,Render Redirect HttpResponse,request,模板语言 Jinja2,用户登录例子,内置Session)
一.Flask初识首先,要看你学没学过Django 如果学过Django 的同学,请从头看到尾,如果没有学过Django的同学,并且不想学习Django的同学,轻饶过第一部分三大主流Web框架对比 ...
Flask - 模板语言jinja2 和render_template高级用法
目录 Flask - 模板语言jinja2 和render_template高级用法一. 字典传递至前端二. 列表传入前端Jinja2 模板的操作: 三. 大字典传入前端 Jinja2 模板四. ...
第二篇 Flask 中的 Render Redirect HttpResponse
第二篇 Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返 ...
第九篇 Flask 中的蓝图(BluePrint)
第九篇 Flask 中的蓝图(BluePrint) 蓝图,听起来就是一个很宏伟的东西在Flask中的蓝图 blueprint 也是非常宏伟的它的作用就是将功能与主服务分开怎么理解呢? ...
第三篇 Flask 中的 request
第三篇 Flask 中的 request 每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的为了了解Flask的request中都有什么东西,首先我们要写一个前 ...
flask 第四篇模板语言jinja2
是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下首先我们要在后端定义几个字符 ...

随机推荐

Ubuntu最常见的包问题
工作环境换成Ubuntu18.04小记:https://www.cnblogs.com/dunitian/p/9773214.html Ubuntu不得不说的就是这个apt出问题的处理 :(换源就不说 ...
php+mysql+nginx+liunx 服务搭建
安装php7相应的yum源 CentOS 7.x: # rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7 ...
Win10激活工具
W10数字许可激活C#版v2.8.0百度网盘下载地址:https://pan.baidu.com/s/1TD0PVxIfB2NTarAuP9NJbQ直接下载地址:FTP://A@OS.X6X8.COM ...
macOS卸载应用不彻底
总觉得macOS卸载应用时直接移到废纸篓卸载不干净.配置文件根据Unix的习惯应该存放在用户目录下,还需要删除这些文件. ~/Library/Application Support/(应用程序名称) ...
Codeforces 1037C Equalize
原题题目大意: 给你两个长度都为\(n\)的的\(01\)串\(a,b\),现在你可以对\(a\)串进行如下两种操作: 1.交换位置\(i\)和位置\(j\),代价为\(|i-j|\) 2.反转位置 ...
Python读写文件的几种方式
一.pandas pandas模块是数据分析的大杀器,它使得对于文件相关的操作变得简单. 看一下它的简单使用 import pandas as pd # 读取 df = pd.read_csv('al ...
Hbase CMS GC 调优。
export HBASE_OPTS="-XX:+UseConcMarkSweepGC" export HBASE_LOG_DIR=/app/hbase/logexport HBAS ...
金融量化分析【day111】：Matplotib-绘制K线图
一.绘制k线图 1.使用金融包出错解决 1.错误代码 ImportError: No module named finance 2.解决办法 https://github.com/matplotlib ...
LFYZ-OJ ID: 1010 天使的起誓
思路理解题目后,会发现是一个高精度除低精度求余问题,非常简单. 容易出错的地方是:求余结果为0的时候,此时,天使所在的盘子号码其实就是n,如果直接返回余数,得到的结果则是0. 被除数的范围是2-10 ...
Mysql漏洞修复方法思路及注意事项
[系统环境] 系统环境:Red Hat Enterprise Linux Server release 5.4 (Tikanga) + 5.7.16 MySQL Community Server ...

第四篇flask中模板语言 jinja2

第四篇flask中模板语言 jinja2的更多相关文章

随机推荐

热门专题