Flask学习笔记（三)-jinja2 模板入门

一、表达式

jinja2是一个被广泛使用的模板引擎，其设计思想源自于django模板引擎，jinja2扩展了语法，增加了强大的功能，被flask选为内置的模板语言

示例的目录结构如下

./
├── app.py
└── templates
    └── name1.html

　html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>欢迎你 {{ name }} </p>
</body>
</html>

flask请求：　

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/name/<string:name>',methods=['GET'])
def name(name):
    return render_template("name1.html", name=name)

if __name__ == '__main__':
    app.run(debug=True)

启动服务，在浏览器里输入 http://127.0.0.1:5000/name/小风测试

二、flask模板---if语句

示例：

if.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% if name=='管理员' %}
    <p>原来你是管理员啊</p>
    {% else %}
    <p>欢迎你 {{ name }}</p>
    {% endif %}
</body>
</html>

flask请求：

from flask import Flask, render_template
app = Flask(__name__)


@app.route('/if/<string:name>',methods=['GET'])
def test_if(name):
    return render_template('if.html',name=name)


if __name__ == '__main__':
    app.run(debug=True)

启动服务后，在浏览器里输入 http://127.0.0.1:5000/if/小明

页面里会显示

欢迎你 小明

但如果你在浏览器里输入 http://127.0.0.1:5000/if/管理员

页面里则会显示

原来你是管理员啊

两个条件分支无法满足业务需求，你也可以使用 {% elif %} 增加逻辑判断　　

三、flask模板---for 语句

语法

jinja2 模板中，使用 {% 语句 %} 包围的语法块称为语句，jinja2 支持类似于 Python 的 for 循环语句，语法如下：

示例：

for.html文件　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Members</h1>
    <ul>
    {% for user in users %}
      <li>{{ user }}</li>
    {% endfor %}
    </ul>
</body>
</html>

flask请求：

from flask import Flask, render_template
app = Flask(__name__)
users = ['张三', '王五', '刘麻子']

@app.route('/users/3')
def for_test():
    return render_template('for.html', users=users)

if __name__ == '__main__':
    app.run(debug=True)

启动服务后，在浏览器里输入 http://127.0.0.1:5000/users/3

四、flask模板---模板继承（extends）

对于模板内容重复的问题，Jinja2 提供了模板继承的支持。我们可以定义一个父模板，一般会称之为基模板（base template）。基模板中包含完整的 HTML 结构和导航栏、页首、页脚都通用部分。在子模板里，我们可以使用 extends 标签来声明继承自某个基模板。基模板中需要在实际的子模板中追加或重写的部分则可以定义成块（block）。块使用block 标签创建， {% block 块名称 %} 作为开始标记，{% endblock %} 或 {% endblock 块名称 %} 作为结束标记

示例的目录结构如下

./
├── app.py
└── templates
    └── base.html
    └── news.html

base.html代码如下：　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--预留插入标题位置-->
    <title>
        {% block title %}
        {% endblock %}
    </title>
</head>
<body>
    <!--导航，内容固定-->
    <ul>
        <li>
            <a href="#">首页</a>
            <a href="#">新闻中心</a>
            <a href="#">产品中心</a>
            <a href="#">联系我们</a>
        </li>
    </ul>
    <!--预留插入网页内容部分-->
    {% block content %}
    {% endblock %}
</body>
</html>

news.html继承base.html自动生成固定部分，我们仅仅需要在news.html中完善预留插入位置的内容。

{% extends 'base.html' %}
<!--插入到block title位置-->
{% block title %}
新闻中心
{% endblock %}
<!--插入到block content-->
{% block content %}
<h1>新闻中心</h1>
<p>
    这里是新闻中心页面
</p>
{% endblock %}

flask请求（app.py）：　　

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/news')
def news():
    return render_template('news.html')
if __name__ == '__main__':
    app.run(debug=True)

启动服务后，在浏览器里输入http://127.0.0.1:5000/news　

效果如下：

五、flask模板---包含（include）

其语法格式为：

{% include '文件夹/模板文件' %}

包含(include)步骤为：

定义一个公共部分文件夹，再在文件夹中创建公共部分的模板；
哪个页面有该公共部分的内容，就通过include语法使用该公共部分的模板。

公共部分文件夹及模板，模板文件代码（header.html）如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部</title>
</head>
<body>
<h1>我被包含过来了</h1>
</body>
</html>

写一个welcome.html,其代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
</head>
<body>
{# 使用公共模板 #}
{% include 'header.html' %}
<div >欢迎学习Flask框架</div>
</body>
</html>

编写app.py视图函数，其代码如下所示：　　

from flask import Flask,render_template
# 实例化app
app = Flask(__name__)
@app.route('/welcome/')
def welcome():
    return render_template('welcome.html')

if __name__ == '__main__':
    app.run(debug=True)

　　运行结果：

六、flask模板---宏（macro）

宏（macro）可以看作为jinja2的一个函数，其返回是一个HTML字符串或者一个模板，为了避免反复地编写同样的模板代码，出现了代码冗余，可以把同样的模板代码写成函数并进行复用。

定义宏（macro）有两种方式：直接在模板中定义宏和把所有用写在一个宏模板文件中。

其语法格式如下：

#定义宏
{% macro 宏名(参数) %}
 代码块
{% endmacro %}

#导入宏
{% import '宏文件' as 别名 %}

#使用宏
{{ 别名.宏名(参数) }}

1）在模板中直接定义宏

首先我们创建一个名为macro.html模板文件，其文件内容如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的定义</title>
</head>
<body>
{# 定义宏 #}
{% macro input(value) %}
    <input type="text" placeholder="{{ value }}" name="username">
{% endmacro %}

{# 调用宏 #}
{{ input('提交01') }}
</body>
</html>

这里我们定义了一个名为input的宏，其作用是创建一个提交按钮，然后通过{{ input('参数') }}调用了宏。

2）直接引用宏文件

创建一个模板文件来使用macro1.html宏文件（引用macro.html模板文件），其内容如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的使用</title>
</head>
<body>
{% import 'macro.html' as f %}
{{   f.input('用户名') }}
</body>
</html>

视图函数代码如下所示：

from flask import Flask,render_template
# 实例化app
app = Flask(__name__)
@app.route('/macro/')
def use_macro():
    return render_template('macro.html')
@app.route('/macro1/')
def use_macro1():
    return render_template('macro1.html')
if __name__ == '__main__':
    app.run(debug=True)

运行结果：

访问：http://127.0.0.1:5000/macro/

访问：http://127.0.0.1:5000/macro1/

七、flask模板---行语句

flask行语句，可以让模板的代码编写更加容易便捷，不然总是用{% ... %} 来标识挺麻烦的，使用行语句首先需要进行设置（app.py进行设置）

app.jinja_env.line_statement_prefix = '#'

先来看一下不使用行语句时如何写一段for循环

{% for i in range(10) %}
    <p>{{ i }}</p>
{% endfor %}

而一旦开启了行语句，你就可以这样写了

# for i in range(10):
    <p>{{ i }}</p>
# endfor

我已经设置了行语句的前缀为# ，在模板里，只要一行代码里去掉前面的空白符后是以# 开头的，就视为行语句。

行语句的代码和我们平时写python代码一样，不用那么麻烦的用{% 和 %} 进行标记了。

若有未闭合的圆括号、花括号或方括号，行语句可以跨越多行:

<ul>
# for href, caption in [('index.html', 'Index'),
                        ('about.html', 'About')]:
    <li><a href="{{ href }}">{{ caption }}</a></li>
# endfor
</ul>

posted @ 2022-09-26 19:02 橘子偏爱橙子阅读(130) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

橘子偏爱橙子

Flask学习笔记（三)-jinja2 模板入门

一、表达式

二、flask模板---if语句

三、flask模板---for 语句

四、flask模板---模板继承（extends）

五、flask模板---包含（include）

六、flask模板---宏（macro）

七、flask模板---行语句

公告