Flask学习总结笔记（4）-- Jinja2模板引擎之二

最新推荐文章于 2024-05-07 11:33:59 发布
最新推荐文章于 2024-05-07 11:33:59 发布
阅读量1.3w 收藏 27
点赞数 3
分类专栏： Flask 文章标签： Flask Jinja2 模板引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kikaylee/article/details/53540352
版权

Jinja2模板引擎官方文档详细介绍了其中的API函数、沙箱、模板设计文档等，这里主要就一些常用的知识点进行总结。

0x01 模板基础

常见的几种模板语句如下：

{%...%}     #运行Jinja2的语句；
{{…}}       #在页面中打印Jinja2运行的结果
{#...#}     #注释

看下面的例子：

（1）views.py

from flask import render_template

@app.route('/index')
def index():
    return render_template('index1.html',
                           name='kikay',
                           age=20)

（2）templates文件夹下新建模板index1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<p>测试</p>
<p>直接输出姓名：{{name}}</p>
{#这是注释：判断是否存在age#}
{%if age%}
<p>年龄：{{age}}</p>
{%else%}
<p>不存在年龄</p>
{%endif%}
</body>
</html>

输出效果：

如果想输入原始的Jinja2语句，而不是作为特殊字符进行解析，可以包含在{%raw%}…{%%endraw}中：
views.py

@app.route('/raw')
def raw():
    return render_template('raw.html',name='kikay')

raw.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Raw</title>
</head>
<body>
<div>
    <p>姓名:{{name}}</p>
    {%raw%}
    <p>转义姓名：{{name}}</p>
    {%endraw%}
</div>
</body>
</html>

效果如下：

上面的例子都需要调用render_template('*.html',var_key=***)来渲染模板。其中的函数render_template是把Jinja2模板引擎集成到程序中。Jinja2 能识别所有类型的变量,甚至是一些复杂的类型,例如列表、字典和对象。

0x02 控制语句

添加一些控制语句，index2.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
<div>
    {%if author%}
    <h1>Hello,{{author}}</h1>
    {%else%}
    <h1>Nobody</h1>
    {%endif%}
</div>
</body>
</html>

views.py：

@app.route('/index2')
def index2():
    author='kikay'
    return render_template('index2.html',
                           author=author)

输出：

注释掉author:

@app.route('/index2')
def index2():
    author='kikay'
    return render_template('index2.html')
                           #author=author)

效果如下：

当参数不存在时，Jinja2模板在渲染时直接忽略掉。更复杂一些，现在还要输出作者好友的列表。

index3.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Firends</title>
</head>
<body>
<div>
    <h1>作者:{{author.name}}</h1>
    <table>
        <thread>
            <th>姓名</th>
            <th>年龄</th>
        </thread>
        {%for f in author.friends%}
        <tr>
            <td>{{f.name}}</td>
            <td>{{f.age}}</td>
        </tr>
        {%endfor%}
    </table>

</div>
</body>
</html>

views.py:

@app.route('/index3')
def index3():
    author={
        'name':'kikay',
        'age':20,
        'friends':[
            {'name':'Andy','age':60},
            {'name':'Tom','age':29},
            {'name':u'小花','age':18}
        ]
    }
    return render_template('index3.html',
                           author=author)

效果如下：

这里需要指出的是，输出带有中文时，注意编码的问题。类似于Python中函数的定义，Jinja2模板引擎中的macro关键字可以看成是一个函数的定义：

{%macro showinfo(info)%}
这是{{info}}！！！<br />
{%endmacro%}
{%for info in infos%}
{{showinfo(info)}}
{%endfor%}

0x03 模板继承

随着应用的拓展，我们可能在多个页面中使用了相同的HTML代码，并且需要每一个页面都同步，和其他模板引擎一样，Jinja2也支持模板继承。我们在templates下新建一个layout_base.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {%if title%}
    <title>{{title}}</title>
    {%else%}
    <title>No title</title>
    {%endif%}
    <!--一引入js文件-->
    {%block script%}
    <script src="test.js"></script>
    {%endblock%}
</head>
<body>
<div>
    {%block t1%}{%endblock%}
    <p>----------模板分隔符------------</p>
    {%block t2%}{%endblock%}
</div>
</body>
</html>

里面有3个block标签，这是为继承该模板的html模板替换使用的。新建index4.html继承layout_base.html：

{%extends 'layout_base.html'%}
{%block script%}
{{super()}}
<script src="test2.js"></script>
{%endblock%}

{%block t1%}
{%if author%}
<h1>Hello,{{author.name}}</h1>
{%else%}
<h1>Nobody</h1>
{%endif%}
{%endblock%}

{%block t2%}
<table>
    <thread>
        <th>姓名</th>
        <th>年龄</th>
    </thread>
    {%for f in author.friends%}
    <tr>
        <td>{{f.name}}</td>
        <td>{{f.age}}</td>
    </tr>
    {%endfor%}
</table>
{%endblock%}

效果如下：

extends指明该模板是从哪个模板继承而来的。上面例子中的{{super()}}，因为模板中其中包含的内容不是空的，所以需要用{{super()}}来获取原来的内容。如果一个html中包含1个以上的extends标签就会报错，即最多继承于1个模板。

0x04 模板设计

Flask集成了Bootstrap包，可以使用Flask-Bootstrap来渲染模板，首先需要安装（利用pip）:

pip install flask-bootstrap

具体过程参见以前的博客（Flask学习总结笔记（1）– 环境配置）。

在__init__.py中初始化Flask-Bootstrap:

from flask.ext.bootstrap import Bootstrap

修改后的完整__init__.py如下：

#!flask/bin/env python
#coding:utf-8

__author__ = 'kikay'

from flask import Flask
from flask.ext.bootstrap import Bootstrap

#定义app对象
app=Flask(__name__)
#定义Bootstrap对象
bootstrap=Bootstrap(app)

from app import views

完成Flask-Bootstrap初始化后，就可以在程序中使用一个包含全部Bootstrap文件的基模板。这个模板利用Jinja2的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入 Bootstrap 的元素。（官方教程），关于Bootstrap的内容可以参看我的博客（Bootstrap学习总结笔记）。

下面是实现一个导航样式的例子：

bootstrap.html

<!--引入Flask-Bootstrap中的基模板-->
{%extends 'bootstrap/base.html'%}

<!--添加html属性-->
{%block html_attribs%}lang="zh-cn"{%endblock%}

<!--添加metas标签-->
{%block metas%}
    {{super()}}
    <meta charset="UTF-8">
{%endblock%}

<!--添加网页的样式-->
{%block styles%}
    {{super()}}
    <link rel="stylesheet" href="{{url_for('.static',filename='css/block.css')}}">
{%endblock%}

{%block scripts%}
    {{super()}}
    <script src="{{url_for('.static',filename='js/block.js')}}"></script>
{%endblock%}

<!--网页标题-->
{%block title%}Flask-Bootstrap{%endblock%}

<!--网页导航-->
{%block navbar%}
<div class="container">
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">网站标题</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首 页</a></li>
                <li><a href="#">新闻</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        下拉菜单
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li><a href="#">菜单3</a></li>
                    </ul>
                </li>
            </ul>
            <form class="nav navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="密码">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary form-control">提 交</button>
                </div>
            </form>
        </div>
    </nav>
</div>
{%endblock%}

<!--网页正文-->
{%block content%}
<div class="container">
    <div class="page-header">
        {%if author%}
        <h1>Hello,{{author.name}}</h1>
        {%else%}
        <h1>Nobody</h1>
        {%endif%}
    </div>
    <div class="col-center-block">
        <!--展示朋友列表-->
        {%if author.friends%}
        <table class="table table-bordered table-striped table-hover table-condensed">
            <thead class="alert-danger">
                <th>姓名</th>
                <th>年龄</th>
            </thead>
            {%for f in author.friends%}
            <tr class="alert-success">
                <td>{{f.name}}</td>
                <td>{{f.age}}</td>
            </tr>
            {%endfor%}
        </table>
        {%endif%}
    </div>
</div>
<script>
</script>
{%endblock%}

views.py:

@app.route('/bootstrap')
def bootstrap():
    author={
        'name':'kikay',
        'age':20,
        'friends':[
            {'name':'Andy','age':60},
            {'name':'Tom','age':29},
            {'name':u'小花','age':18}
        ]
    }
    return render_template('bootstrap.html',
                           author=author,
                           title='Bootstrap')

效果如下：

看下源代码，可以更好理解这种渲染的效果。

<!--引入Flask-Bootstrap中的基模板-->
<!DOCTYPE html>
<htmllang="zh-cn">
  <head>
    <title>Flask-Bootstrap</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">


    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/block.css">

  </head>
  <body>

<div class="container">
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">网站标题</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首 页</a></li>
                <li><a href="#">新闻</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        下拉菜单
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li><a href="#">菜单3</a></li>
                    </ul>
                </li>
            </ul>
            <form class="nav navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="密码">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary form-control">提 交</button>
                </div>
            </form>
        </div>
    </nav>
</div>


<div class="container">
    <div class="page-header">

        <h1>Hello,kikay</h1>

    </div>
    <div class="col-center-block">
        <!--展示朋友列表-->

        <table class="table table-bordered table-striped table-hover table-condensed">
            <thead class="alert-danger">
                <th>姓名</th>
                <th>年龄</th>
            </thead>

            <tr class="alert-success">
                <td>Andy</td>
                <td>60</td>
            </tr>

            <tr class="alert-success">
                <td>Tom</td>
                <td>29</td>
            </tr>

            <tr class="alert-success">
                <td>小花</td>
                <td>18</td>
            </tr>

        </table>

    </div>
</div>
<script>
</script>




    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/static/js/block.js"></script>

  </body>
</html>

在Flask-Bootstrap中，支持的block样式如下表：

这里不再一一介绍，在实际应用中可以自己体会。另外上面用到了url_for函数做路由的映射，具体使用可以参见我前面的博客（Flask学习总结笔记（2）– Hello world程序）中关于构造Url的内容。这里引入了js和css文件，对应的文件结构如下：

关于Flask-Jinja2模板引擎的使用问题就讲到这里，以后在实际使用过程中，再慢慢总结与领会。

kikay
关注
  • 3
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python模块学习 - jinja2
anhuoqiu1787的博客
01-08 1780
模板 　　要了解jinja2，那么需要先理解模板的概念。模板在Python的web开发中广泛使用，它能够有效的将业务逻辑和页面逻辑分开，使代码可读性增强、并且更加容易理解和维护。 　　模板简单来说就是一个其中包涵占位变量表示动态的部分的文件，模板文件在经过动态赋值后，返回给用户。 --> 可以理解为渲染 　　python中自带一个简单的模板，就是string提供的。 ...
Jinja2 render和generate函数
SAGGITARXM
12-30 1466
jinja2 是一个模仿 Django 模板语言而重新开发的模板引擎，因为 Django 模板引擎限制比较多，因此有人开发出了 jinja2 这个库。所以如果你比较熟悉 Django 模板，那么 jinja2 你也很快就能了解。
Jinja2渲染的两种方式
Good Luck
11-17 691
【代码】Jinja2渲染的两种方式。
Python进阶之-jinja2详解
最新发布
Summer的博客
05-07 1582
Jinja2 是一个强大的 Python 模版引擎，主要用于生成HTML或其他文本文件。这个库非常适合开发动态网站和Web应用的视图层，因为它支持逻辑操作如循环和条件判断，还可以继承和重用模板。Jinja2以其灵活性和性能著称。jinja2是Flask作者开发的一个模板系统，起初是仿django模板的一个模板引擎，为Flask提供模板支持，由于其灵活，快速和安全等优点被广泛使用。
Flask中的jinja2模板介绍与使用
IT之一小佬的博客
08-13 930
Flask中的jinja2模板介绍与使用
[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘0‘)“found in
前端如逆水行舟...
09-01 3368
大概率是向服务器请求的数据还没得到相应，也就是说你定义的数组或者对象根本不存在（由于服务器返回慢造成的），看这个例子...为什么？ 因为vuex不是永久存储的，一旦刷新就空了，想不报错，就一定先将定义的数据初始化，当服务器没有返回的时候根据具体情况初始一个数组或对象。...
Flask框架学习笔记之模板操作实例详解
01-20
Flask默认使用的模板引擎是Jinja2，这是一个功能强大的模板语言，提供了丰富的语法来处理变量、控制流和继承等。 首先，让我们看看基本的模板使用。在示例中，`index` 视图函数返回`render_template`，其中`index....
Flask框架学习笔记之使用Flask实现表单开发详解
09-18
6. 模板渲染：在模板文件（如`form1.html`）中，使用Jinja2模板引擎将表单类的字段转化为HTML元素，并根据错误消息显示提示。 ```html {{ form.username }} {{ form.password }} ``` 总结：通过以上步骤，我们实现...
Flask学习笔记（4）.rar
11-06
在本篇Flask学习笔记（4）中，我们将深入探讨Python的微框架——Flask，它以其轻量级、灵活性和强大的扩展性深受开发者喜爱。Flask是构建Web应用的理想选择，尤其适合初学者和小型项目。以下是笔记的主要内容： 1. ...
FLask学习笔记（2）源码demo2.rar
11-06
Flask还允许我们使用模板引擎 Jinja2 来创建动态HTML页面。在`templates`目录下，可能有对应的HTML模板文件，如`index.html`： ```html <!DOCTYPE html> <title>My Flask App <h1>{{ message }} ``` 在...
Jinja2----------模板渲染、模板访问对象属性
要银河 不要迎合
02-26 697
【代码】Jinja2----------模板渲染、模板访问对象属性。
python flask 数据结构（四） 增，删，改，查，展示数据
kkshuaicc的博客
04-26 853
python flask
python提效利器之jinja2使用讲解
Trb601012的博客
01-30 1404
提升工作效率的利器，如果场景需要根据一个模版，生成不一样的配置文件，如果都通过生成其实欠妥，一方面麻烦，另一方面不方便管理，如果可以用一个模版来统一管理格式，通过模版生成每个需求的配置文件，岂不美哉随之想到jinja2这个库。
Python（Web时代）——jinja2模板
qq_25702235的博客
08-08 3166
Jinja2是Flask框架默认支持的模板引擎，是python的web项目中被广泛应用的一种模板引擎，jinja2的作者与Flask是同一个人。有些时候需要对要在模板中的变量值做一些特殊处理，比如首字母大写，去掉前后空格、字符串拼接等等，这时就可以使用过滤器。当遇到现有的过滤无法满足我们的需求时，这时就需要我们自定义一个过滤器了。通过 | 来使用过滤器，与Linux中的管道类似。非常灵活，提供了控制结构、表达式与继承等。控制结构（逻辑代码） {% %}变量取值 {{ }}
Jinja2 模板用法
tushanpeipei的博客
05-16 1541
1.语法 在jinja2中，存在三种语法： 控制结构 {% %} 变量取值 {{ }} jinja2模板中使用 {{ }} 语法表示一个变量，它是一种特殊的占位符。当利用jinja2进行渲染的时候，它会把这些特殊的占位符进行填充/替换，jinja2支持python中所有的Python数据类型比如列表、字段、对象等。 注释 {# #} 2.过滤器 变量可以通过“过滤器”进行修改，过滤器可以理解为是jinja2里面的内置函数和字符串处理函数。 常用的过滤器有： safe: 渲染时值不转义 cap
Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法...
weixin_30548917的博客
07-05 649
是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符串,用于传递到前端 STUDENT = {'name': 'Old', 'age': 38, 'gender': '中'}, STUDENT_LIST = [ {'name'...
Python 模板引擎 Jinja2 的安装和使用
这家伙很懒，什么都没有留下
12-09 2196
Jinja2 是 Python 中广泛使用的一种模板引擎，它具有灵活的语法、强大的控制结构、方便的 API，以及高效的渲染速度。通过使用 Jinja2，开发者可以轻松地将动态数据与 HTML、XML、CSV 等多种格式的模板进行结合，生成所需的文本输出。通过以上的介绍，我们可以看到 Jinja2 作为 Python 的一个强大的模板引擎，具有许多优秀的特性和功能。它提供了灵活的语法、高效的渲染速度、强大的 API、可扩展性以及安全性等优点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值