Flask テンプレート Jinjia2 文法と Web ページ
Django のテンプレート言語は render_tempalte であり、Flask のテンプレート言語は jinja2 です。Jinja2 には render_tempalte が含まれています。Jinja2 は、Django テンプレートをモデルにした最新のデザイナーフレンドリーな Python テンプレート言語です。Python でテンプレートとは何ですか? これは、変数のようなタグを静的 HTML に追加するもので、HTML をレンダリングするときにエンジンが動的に変数にコンテンツを埋め込んで最終的な HTML を生成します。テンプレートエンジンとは何ですか? 実際、これは Python に似たマークアップ言語を解析できるインタープリターです。
Jinja2 の構文は Python の構文とほぼ同じであり、後でいくつかの一般的な使用法に遭遇します。テンプレートでは、Jinja2 ステートメントと変数をマークする特定の区切り文字を追加する必要があります。一般的に使用される 3 つの区切り文字は、次の 3 つです:
{ { … }} は、変数をマークするために使用されます。
{% ... %} は、if ステートメント、for ステートメントなどのステートメントをマークするために使用されます。
{# … #} はコメントを記述するために使用されます。
テンプレートで使用される変数は、レンダリング中に渡す必要があります。これについては後ほど説明します。
ウェブページ
HTML5 Webコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{
{ name }}'s Watchlist</title>
</head>
<body>
<h1 align="center">Flask 模版Jinjia2语法</h1>
<p>
Django 的模板语言是 render_tempalte,Flask 的模板语言呢是jinja2,jinja2包含 render_tempalte.<br>
Jinja2 是一个现代的，设计者友好的，仿照 Django 模板的 Python 模板语言。在Python中，<br>
什么是模版？就是在一个静态HTML加入一些类似变量的标签，然后引擎在渲染这个HTML时候会动态的把变量填入内容，<br>
生成一个最终的HTML。 什么是模版引擎？其实就是一种能解析类似Python语言的标记语言的解释器。<br>
inja2 的语法和 Python 大致相同，你在后面会陆续接触到一些常见的用法。<br>
在模板里，你需要添加特定的定界符将 Jinja2 语句和变量标记出来，下面是三种常用的定界符：<br>
}} 用来标记变量。<br>
%%} 用来标记语句，比如 if 语句，for 语句等。<br>
#} 用来写注释。<br>
模板中使用的变量需要在渲染的时候传递进去，具体我们后面会了解。<br>
</p>
<hr> <hr>
{% if openif %} {# if 语句 ，注释#}
<h1>一、变量获取</h1>
<div>
<h3>变量：{
{ openif }}</h3>
<h3>列表变量：{
{mylist[0]}}</h3>
<h3>字典变量：{
{mydict["type"]}}</h3>
<h3>函数变量：{
{myfunc()}}</h3>
<h3>类变量：{
{myclass.name}}</h3>
<h3>类方法变量：{
{myclass.func()}}</h3>
</div>
{% endif %}
<hr>
<br>
<hr>
<h1>二、详细历遍</h1>
<h2>1、列表{
{ name }}'s Watchlist</h2>
{# 使用 length 过滤器获取 movies 变量的长度 #}
<p>{
{ thelist|length }} Titles</p>
<ul>
{% for movie in thelist %} {# 迭代 movies 变量 #}
<li>{
{ movie.title }} - {
{ movie.year }}</li> {# 等同于 movie['title'] #}
{% endfor %} {# 使用 endfor 标签结束 for 语句 #}
</ul>
<ul>
{% for value in simlist %}
<li>{
{ value }}</li>
{% endfor %}
</ul>
<hr>
<br>
<h2>2、字典</h2>
<div>{
{ thedict }}</div>
<table border="1px" width="400">
<tr>
<td>{
{ thedict.name }}</td>
<td>{
{ thedict["age"] }}</td>
<td>{
{ thedict.get("gender") }}</td>
</tr>
</table>
<br>
<table border="1px" width="400">
{% for key,value in dict2dict.items() %}
<tr>
<td>{
{ key }}</td>
<td>{
{ value}}</td>
<td>{
{ value.name }}</td>
<td>{
{ value.get("age") }}</td>
<td>{
{ value["gender"] }}</td>
</tr>
{% endfor %}
</table>
<br>
<table border="1px" width="400">
{% for foo in dict2dict %} {#在遍历字典的时候,foo 其实是相当于拿出了字典中的Key#}
<tr>
<td>{
{ foo }}</td>
<td>{
{ dict2dict.get(foo).name }}</td>
<td>{
{ dict2dict[foo].get("age") }}</td>
<td>{
{ dict2dict[foo]["gender"] }}</td>
</tr>
{% endfor %}
</table>
<hr>
<br>
<h2>3、函数</h2>
局部函数
<ul>
<li> {
{ funsum }} </li>
<li> {
{ funsum(99,1) }} </li>
</ul>
全局函数
<ul>
<li> {
{ globalsum(100,99) }} </li>
<li> {
{ 1|globalsum2(100,200) }} </li>
</ul>
模版函数
{% macro type_text(name,type) %}
<input type="{
{ type }}" name="{
{ name }}" value="{
{ name }}">
{% endmacro %}
<p>在下方是使用宏来生成input标签</p>
{
{ type_text("one","text") }}
{
{ type_text("two","text") }}
<hr>
<br>
<h2>4、类</h2>
<table border="1px" width="600">
<tr>
<td>{
{ book.name }}</td>
<td>{
{ book.author }}</td>
<td>{
{ book.data }}</td>
<td>{
{ book.version }}</td>
</tr>
<tr>
<td> {
{ book.sell('开端',100) }}</td>
</tr>
</table>
</body>
<br>
<footer>
<p>
参考：https://blog.csdn.net/weixin_44986037?type=blog<br>
https://www.cnblogs.com/konghui/p/10555062.html <br>
https://www.cnblogs.com/dachenzi/p/8242713.html
</p>
<small>© 2023 <a href="https://blog.csdn.net/weixin_44986037?type=blog">深度学习吧Mycat</a></small>
</footer>
<br> <br> <br> <br>
</html>
Flask バックエンド コード
from flask import Flask, render_template
app = Flask(__name__)
class Book:
def __init__(self,name,author,data,version):
self.name = name
self.author = author
self.data = data
self.version = version
def sell(self,bookName,price):
print("%s的销售价格为%d" %(bookName,price))
return bookName+"的销售价格为"+str(price)
book=Book('开端','zhaojinmai','未来已来赶紧提桶','version1')
class MyClass:
name='this my name'
def func(self):
return "func"
def ord_func():
return "Ordinary function"
#定义一个函数,把它传递给前端
def funsum(a,b):
return a+b
@app.template_global() # 定义全局模板函数
def globalsum(a, b):
return a + b
@app.template_filter() # 定义全局模板函数
def globalsum2(a, b, c):
return a + b + c
@app.route("/")
def index():
#----------- 一、变量 --------------------
# 1.变量
openif="on" #测试if语句
# 2.字典
mydict = {
}
mydict["type"]= "dict"
# 3.列表
mylist = []
mylist.append("list")
# 4。类
myclass = MyClass()
#------------ 二、历遍 ---------------------
#1、变量
name = 'Jin Mai'
# 2、列表(字典)
thelist=[
{
'title': 'My Neighbor Totoro', 'year': '1988'},
{
'title': 'Dead Poets Society', 'year': '1989'},
{
'title': 'A Perfect World', 'year': '1993'},]
simlist=['1.line','2.line','3.line']
#3、字典
thedict={
'name': 'Old', 'age': 38, 'gender': '中'}
dict2dict={
1: {
'name': 'Old', 'age': 38, 'gender': '中'},
2: {
'name': 'Boy', 'age': 73, 'gender': '男'},
3: {
'name': 'EDU', 'age': 84, 'gender': '女'},}
return render_template("test.html",
mydict=mydict, mylist=mylist,myclass=myclass,
myfunc = ord_func,openif=openif,name=name,
thelist=thelist,simlist=simlist,thedict=thedict,
dict2dict=dict2dict,funsum=funsum,book=book
)
if __name__ == '__main__':
app.run(debug=True)
参考：
https://www.cnblogs.com/konghui/p/10555062.html
https://www.cnblogs.com/dachenzi/p/8242713.html
https://tutorial.helloflask.com/template/