品牌网站建设搜搜磐石网络,ui设计网站模板,百色优惠welcome,如何使用wordpress建站https://www.cnblogs.com/DragonFire/p/9259999.html 是时候开始写个前端了,Flask中默认的模板语言是Jinja2
现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下
首先我们要在后端定义几个字符串,用于传递到前端 STUDENT {name: Old, age:…https://www.cnblogs.com/DragonFire/p/9259999.html 是时候开始写个前端了,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, studentSTUDENT)
前端: !DOCTYPE html
html langen
headmeta charsetUTF-8titleOld Boy EDU/title
/head
body
Welcome to Old Boy EDU
div{{ student }}/div
table border1pxtrtd{{ student.name }}/tdtd{{ student[age] }}/tdtd{{ 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, studentSTUDENT_LIST)
前端: !DOCTYPE html
html langen
headmeta charsetUTF-8titleOld Boy EDU/title
/head
body
Welcome to Old Boy EDU
div{{ student }}/div
table border1xp{% for foo in student %}trtd{{ foo }}/tdtd{{ foo.name }}/tdtd{{ foo.get(age) }}/tdtd{{ foo[gender] }}/td/tr{% endfor %}
/table
/body
/html 结果: 这里我们可以看出如果是需要循环遍历的话,Jinja2 给我们的方案是 {% for foo in student %}trtd{{ foo }}/td/tr{% endfor %}
上述代码中的 foo 就是列表中的每一个字典,再使用各种取值方式取出值即可 3.STUDENT_DICT 大字典传入前端 Jinja2 模板
后端:
app.route(/student_dict)
def student_dict():return render_template(student_dict.html, studentSTUDENT_DICT)
前端: !DOCTYPE html
html langen
headmeta charsetUTF-8titleOld Boy EDU/title
/head
body
Welcome to Old Boy EDU
table{% for foo in student %}trtd{{ foo }}/tdtd{{ student.get(foo).name }}/tdtd{{ student[foo].get(age) }}/tdtd{{ 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, studentSTUDENT ,student_list STUDENT_LIST,student_dict STUDENT_DICT)
前端: !DOCTYPE html
html langen
headmeta charsetUTF-8titleOld Boy EDU/title
/head
body
div _____________________________________/div
Welcome to Old Boy EDU : student
div{{ student }}/div
table border1pxtrtd{{ student.name }}/tdtd{{ student[age] }}/tdtd{{ student.get(gender) }}/td/tr
/table
div _____________________________________/div
Welcome to Old Boy EDU : student_list
div{{ student_list }}/div
table border1xp{% for foo in student_list %}trtd{{ foo }}/tdtd{{ foo.name }}/tdtd{{ foo.get(age) }}/tdtd{{ foo[gender] }}/td/tr{% endfor %}
/table
div _____________________________________/div
Welcome to Old Boy EDU : student_dict
div{{ student_dict }}/div
table border1xp{% for foo in student_dict %}trtd{{ foo }}/tdtd{{ student_dict.get(foo).name }}/tdtd{{ student_dict[foo].get(age) }}/tdtd{{ 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_templateapp Flask(__name__)app.route(/)
def index():tag input typetext nameuser valueDragonFirereturn render_template(index.html,tagtag)app.run(0.0.0.0,5000) 前端代码: 前端代码
如果我们直接运行代码直接访问,你会在页面看到什么呢? 似乎和我们想要结果不太一样,有两种解决方案,
第一种,从前端入手
前端代码: 前端代码
还有一种方式是从后端入手
后端代码: from flask import Flask
from flask import render_template
from flask import Markup # 导入 flask 中的 Markup 模块app Flask(__name__)app.route(/)
def index():tag input typetext nameuser valueDragonFiremarkup_tag Markup(tag) # Markup帮助咱们在HTML的标签上做了一层封装,让Jinja2模板语言知道这是一个安全的HTML标签print(markup_tag,type(markup_tag)) # input typetext nameuser valueDragonFire class markupsafe.Markupreturn render_template(index.html, tagmarkup_tag)app.run(0.0.0.0, 5000, debugTrue) 两种得到的效果是一样 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 abapp.route(/)
def index():return render_template(index.html, taga_b_sum)app.run(0.0.0.0, 5000, debugTrue) 前端代码: !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/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 bapp.template_filter() # 定义全局模板函数
def a_b_c_sum(a, b, c):return a b capp.route(/)
def index():return render_template(index.html, tag)app.run(0.0.0.0, 5000, debugTrue) 前端代码: !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/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 文件中的内容 index.html
login.html 文件中的内容 login.html
home.html 文件中的内容 home.html
后端代码: from flask import Flask
from flask import render_templateapp 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, debugTrue) 然后我们可以看到什么呢? 大概是这样一个效果
在这两个页面中,只有 block 中的内容发生了变化,其他的位置完全一样 6.4 Jinja2模板语言的模块引用 include
login.html 文件中的内容:
form用户名:input typetext nameuser密码:input typetext namepwd
/form
index.html 文件中的内容 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1Welcome OldboyEDU/h1h2下面的内容是不一样的/h2{% include login.html %}h2上面的内容是不一样的,但是下面的内容是一样的/h2h1OldboyEDU is Good/h1
/body
/html 后端代码: from flask import Flask
from flask import render_templateapp Flask(__name__)app.route(/)
def index():return render_template(index.html)app.run(0.0.0.0, 5000, debugTrue) 看到的结果 这就是将 login.html 当成一个模块,加载到 index.html 页面中 6.5 Jinja2模板语言中的宏定义
前端代码: !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1Welcome 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 宏定义一般情况下很少应用到,但是要知道有这么个概念 第四篇,完结
