Flask中默认的模板语言是Jinja2

I. Jinja2模板语言中的 for

{% for foo in g %}

{% endfor %}

II. Jinja2模板语言中的 if

{% if g %}

{% elif g %}

{% else %}

{% endif %}

示例 :

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': '女'},

}

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>

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 给我们的方案是

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

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

结果:

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

<HR>

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>

<HR>

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>

结果:

这里可以看出来,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 : 

后端代码:

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

</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='DragonFire'> <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>

    <h1>OldboyEDU is Good</h1>

</body>

</html>

index.html

login.html 文件中的内容

{% extends "index.html" %}

{% block content %}

    <form>

        用户名:<input type="text" name="user">

        密码:<input type="text" name="pwd">

    </form>

{% endblock %}

login.html

home.html 文件中的内容

{% extends "index.html" %}

{% block content %}

    <h1>欢迎来到老男孩教育</h1>

{% endblock %}

home.html

后端代码:

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

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>

    <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中的模板语法jinjia2的更多相关文章

  1. 初识Flask框架，以及Flask中的模板语言jinjia2和Flask内置的Session

    一.web框架的对比 首先我们先来看下比较火的web框架 1.Django: 优点:大而全,所有组件都是组织内部开发高度定制化,教科书级别的框架 缺点:大到浪费资源,请求的时候需要的资源较高 2.Fl ...

  2. flask 中的模板语法 jinja2及render_template的深度用法

    是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符 ...

  3. Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法

    是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符 ...

  4. 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法

    是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符 ...

  5. 3，Flask 中的模板语言 Jinja2 及 render_template 的深度用法

    Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符串,用于传递到前端 S ...

  6. Flask 中的模板语言 Jinja2 及 render_template 的深度用法

    是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符 ...

  7. 总结下flask中的宏、Jinjia2语法

    这几天学的东西比较多,时间又有点不够用,趁着快吃饭了,赶紧总结总结. 00x1 宏: 如果学过C语言的童鞋,可能知道宏在C语言里面是一个定义一个固定参数的变量.在flask里面,宏是相当于一个函数的作 ...

  8. Flask中的模板语言jinja2

    jinja2介绍 jinja2是Flask作者开发的一个模板系统,起初是仿django模板的一个模板引擎,为Flask提供模板支持,由于其灵活,快速和安全等优点被广泛使用. jinja2的优点 jin ...

  9. Flask中的Templates

    1.什么是模板 模板 , 在Flask 中就是允许响应给用户看的网页 在模板中,允许包含"占位变量"来表示动态的内容 模板最终也会被解析成字符串再响应给客户端,这一过程通常称为&q ...

随机推荐

  1. 查找python项目依赖并生成requirements.txt

    1.如果使用virtualenv环境,直接使用 pip freeze > requirements.txt ➜  ~ .virtualenvs/xxx/bin/pip freeze > r ...

  2. Xshell 初次应用

    以前就想安装Xshell,今天终于弄好了,可以在windows下对Linux服务端进行管理. 关于SSH和Xshell的介绍见参考,Linux上安装的是ssh服务端,所以咱们如果希望通过远程访问的方式 ...

  3. 2016.11.29 activiti实战--第19章--统一身份管理（含自定义用户与数组的实现）

    学习资料:<Activiti实战> 第十九章 统一身份管理 本章讲解如何统一业务系统与activiti的用户管理系统. 第5章的时候已经讲解过activiti的用户与组.一般来说业务系统都 ...

  4. HDU 1017 A Mathematical Curiosity (枚举水题)

    Problem Description Given two integers n and m, count the number of pairs of integers (a,b) such tha ...

  5. TCP/IP详解 卷一（第六章 ICMP：Internet控制报文协议）

    ICMP是(Internet Control Message Protocol)Internet控制报文协议. 用于在IP主机.路由器之间传递控制消息.控制消息是指网络通不通.主机是否可达.路由是否可 ...

  6. eclipse高速查找一个变量、方法或者类被引用的地方

    近期不停debug,拿到一个变量之后总是要先概览一下才好下手,之前一直用Ctrl+F来做,太麻烦. 今天查了下eclipse使用,发现有快捷键,用法: 先双击要查看的变量.方法或者类,使之被选中,然后 ...

  7. 将VS2010里的红色波浪线去掉

    有时候,程序编译没错,却出现了一堆的红色波浪形,看着就烦. 解决方案:在VAssistX菜单栏->Visual Assist X Options->展开Advanced->Under ...

  8. （九）jQuery中的动画(载)

    原文链接:http://blog.csdn.net/zfy865628361/article/details/50358367 首先,用jQuery做动画效果要求在标准模式下,否则可能会引起动画抖动. ...

  9. 关于PM的认识

    1 我眼中的PM 1.1 人云“一个管理,半个专家”,我说“一个管理,两个专家” 如今,我发现我们不得不面对这样一个现实——角色兼职.我习惯上把项目分为三类:性命攸关的项目(涉及到人身安全的项目,如铁 ...

  10. Javascript模式(二) 发布者/订阅者模式

    var publisher = { // 订阅者数组 subscribers : { "any" : [] }, // 增加订阅者 on : function(type, fn, ...