关键词:
是时候开始写个前端了,Flask中默认的模板语言是Jinja2
现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下
首先我们要在后端定义几个字符串,用于传递到前端
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‘: ‘女‘,
但是前提我们要知道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> 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> <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>
结果:
这里可以看出来,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=‘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>
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 %
后端代码:
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中的模板语言jinja2及render_template的深度用法(代码片段)
是时候开始写个前端了,Flask中默认的模板语言是Jinja2现在我们来一步一步的学习一下Jinja2捎带手把render_template中留下的疑问解决一下首先我们要在后端定义几个字符串,用于传递到前端STUDENT=‘name‘:‘Old‘,‘age‘:38,‘gender‘:‘... 查看详情
flask中的模板语言jinja2及render_template(代码片段)
...age‘:25,‘gender‘:‘女‘,2.但是前提我们要知道Jinja2模板中的流程控制:(1).Jinja2模板语言中的for%forfooing%%endfor%(2).Jinja2模板语言中的if%ifg%%elifg%%else%%endif%接下来,我们对这几种情况分别进行传递,并在前端显示成表格3.使用STUDENT字典... 查看详情
3,flask中的模板语言jinja2及render_template的深度用法(代码片段)
...‘age‘:84,‘gender‘:‘女‘,但是前提我们要知道Jinja2模板中的流程控制:I.Jinja2模板语言中的for%forfooing%%endfor%II.Jinja2模板语言中的if%ifg%%elifg%%else%%endif%接下来,我们对这几种情况分别进行传递,并在前端显示成表格1.使用STUDENT字典传... 查看详情
flaskjinja2模板语言
Jinja2 Jinja2是PythonWeb编程中的主流模板语言。因为flask是基于Jinja2和Werkzeug发展而来,在安装flask的时候jinja2自动就被装在上面了。 之前提到了很多Jinja2的使用方法啊,下面将补充或者更加详细地说明Jinja2作为模板语言的使... 查看详情
jinja2模板语言(代码片段)
...ja2模板语言;与django模板语言一样,都是和%%1,Jinja2模板中的流程控制:Jinja2模板语言中的for%forfooing%%endfor% Jinja2模板语言中的if%ifg%%elifg%%else%%endif%2,取值方式字典:可以使用点的方式,还可以使用字典的get("xx"),nam 查看详情
flask第二十四篇——模板自定义过滤器(代码片段)
请关注孟船长的公众号:自动化测试实战 大家想了解其他过滤器可以参考这里:http://jinja.pocoo.org/docs/dev/templates/#builtin-filters---------自定义过滤器这里要用到装饰器template_filter(‘过滤器名字‘),代码:flaskDemo.py#coding:utf-8fromf... 查看详情
flask模板语法(代码片段)
...‘,3:‘name‘:‘fy‘,‘age‘:84,‘gender‘:‘女‘,Jinja2模板中的流程控制: I.Jinja2模板语言中的for%forfooing%%endfor% II.Jinja2模板语言中的if%ifg%%elifg%%else%%endif% 1.使用STUDENT字典传递至前端后端:@app.route("/student")defindex()... 查看详情
flask第四篇使用flask的扩展实现简单页面登录功能
fromflaskimportFlask,render_template,request,redirect,sessionapp=Flask(__name__,template_folder=‘templates‘)app.secret_key="sdsfdsgdfgdfgfh"@app.before_requestdefprocess_request():ifrequest.path=="/lo 查看详情
flask基础之jinja2模板-流程控制
和其它编程语言一样,jinja2也有流程控制。一、测试 在jinja2,测试(Test)是根据变量或表达式的值生成布尔结果的一种函数工具,测试关键字is jinja2 isdefined 或 jinja2 isdefined() #需要参数的测试,括... 查看详情
flask基础之jinja2模板-过滤器
...一节主要是介绍了jinja2基本的结构及表现形式,本节介绍模板变量的处理技术:过滤器 一、过滤器 过滤器通过管道符号“|”与变量连接,并且可以通过圆括号传递参数。 variable|default(‘param‘) 解释: ... 查看详情
flask框架下的jinja2模板引擎(代码片段)
...tps://www.cnblogs.com/chichung/p/9775099.html本文主要记录下jinja2的模板继承。 模板继承是什么?在模板中,可能会遇到以下情况:多个模板具有完全相同的顶 查看详情
flask的template模板与jinja2语法(代码片段)
Flask的template模板与jinja2语法Flask使用的是Jinja2模板,所以其语法和Django基本无差别1、模板基本数据的渲染变量..列表%foriteminList%<li>item</li>%endfor%字典%fork,vinDict.items()%<li>kv</li>%endf 查看详情
使用 Flask/Jinja2 将 HTML 传递给模板
】使用Flask/Jinja2将HTML传递给模板【英文标题】:PassingHTMLtotemplateusingFlask/Jinja2【发布时间】:2011-03-1311:46:02【问题描述】:我正在为Flask和SQLAlchemy构建一个管理员,我想使用render_template将不同输入的HTML传递给我的视图。模板框... 查看详情
flask基础之jinja2模板-语法定义(代码片段)
...视图、控制,下面要要介绍的jinja就是视图层的一个渲染模板,类似于jsp,下面来学习 一、jinja2基本语法 jinja2模板可以保存在任何基于文本的文件中,比如XML、HTML、CSV等,所以模板文件可以接受任何文件后缀。 jinja2... 查看详情
flask全栈开发3模板(代码片段)
第四章模板介绍4.1第一节模板简介:在之前的章节中,视图函数只是直接返回文本,而在实际生产环境中其实很少这样用,因为实际的页面大多是带有样式和复杂逻辑的HTML代码,这可以让浏览器渲染出非常漂亮的页面。目前市... 查看详情
django第四篇(代码片段)
模板的继承:你首先继承一个html页面,继承了意味你拥有父模板所有的东西,你只需要在父模板的基础上修改布局即可第一步;在父模板划分多个区域%block给区域起的名字%父模板需要被重写或者重用的代码%endblock%第二步,在子... 查看详情
flask入门教程:jinja2模板用法
Jinja2模板引擎简介模板在前面的示例中,视图函数的主要作用是生成请求的响应,这是最简单的请求。实际上,视图函数有两个作用:处理业务逻辑和返回响应内容。在大型应用中,把业务逻辑和表现内容放... 查看详情
flask中的templates(代码片段)
...符串再响应给客户端,这一过程通常称为"渲染" Flask中的模板是依赖于Jinja2的模板系统 2.模板的设置 默认情况下,Flask会在程序文件夹中的templates的子文件夹中搜索模板 默认情况下,需要手动创建templat 查看详情