03 flask中使用jinja2模板语言

知识点:

  1. jinja2中列表以及字典的使用,for循环的使用
  2. if条件语句的使用
  3. 过滤器
  4. 模板扩展

列表、字典、for循环的使用

  • app主运行程序文件
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/jinja2')
def jinja2():
    list_name = ['张三', '李四', '王二']
    dict_name ={'name': '村花', 'age': 56, 'sex': '女', '爱好': 'play Computer'}
    return render_template('jinja2.html', list_name=list_name, dict_name=dict_name)  # 闯入两个变量到模板中

if __name__ == '__main__':
    app.run(debug=True)
  • jinja2模板文件

    在项目的模板目录templates中新建jinja2模板文件,命名为jinja2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jinja2演示</title>
</head>
<body>
<ul>
    <h2>for循环的使用,打印列表内容</h2>
    {% for name in list_name %}
        <li>{{ name }}</li>
    {% endfor %}
</ul>
<h2>列表使用方式2</h2>
<p>{{ list_name.0 }}</p>
<p>{{ list_name[1] }}</p>
<p>{{ list_name[2] }}</p>
<h2>字典使用方式一</h2>
{% for k,v in dict_name.items() %}
    <p>字典的键:{{ k }}, 字典的值:{{ v }}</p>
{% endfor %}

<h2>字典使用方式二</h2>
<p>姓名:{{ dict_name.name }}</p>
<p>年龄:{{ dict_name.get('age') }}</p>
<p>性别:{{ dict_name['sex'] }}</p>
</body>
</html>

我们访问网页,查看网页加载的内容如下图所示:
在这里插入图片描述

if条件语句

  • 修改jinja.html模板内容如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jinja2演示</title>
</head>
<body>
{% if list_name|length > 3 %}
    <p>列表长度大于3</p>
{%  elif list_name|length == 3 %}
    <p>列表长度为3</p>
{% else %}
    <p>长度小于3</p>
{% endif %}
</body>
</html>

访问网页,加载内容如下图所示:
在这里插入图片描述

过滤器

  • upper:字母转化为大写
  • last:取可切片内容的最后一个值
  • format:格式化字符串
  • truncate:截取字符长度,必须设置length >=3
  • safe:设置标签不转义
  • default:没有值时显示指定的默认内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jinja2演示</title>
</head>
<body>
<p>打印字典的'爱好'对应的值play Computer都为大写:{{ dict_name.get('爱好') | upper }}</p>
<p>获取列表的最后一个值:{{ list_name | last }}</p>
<p>format过滤器,和python一样:{{ '列表list_name的第一个值是:%s' | format(list_name[0]) }}</p>
<p>截取指定长度的字符串,length必须设置 >=3:{{ dict_name.get('爱好') | truncate(length=4) }}</p>
<p>不转义:{{ '<h1>关掉了转义,页面下显示h1标签的显示样式</h1>' | safe }}</p>
<p>转义:{{ '<h1>不关掉转义,页面显示的是字符串</h1>'}}</p>
<p>如果变量没有值就显示指定的默认值:{{ list_name[5] | default('123') }}</p>
</body>
</html>

网页查看渲染的结果
在这里插入图片描述

模板扩展extends

  • 用于继承的模板内容base.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>
    </head>
    <body>
    <h1>扩展content1内容</h1>
    {% block content1 %}
    
    {% endblock %}
    
    <h1>扩展content2内容</h1>
    {% block content2 %}
    
    {% endblock %}
    </body>
    </html>
    
  • 被继承的模板内容jinja2.html

    {% extends 'base.html' %}
    
    {% block title %}
        这是一个title
    {% endblock %}
    
    {% block content1 %}
        这是content1
    {% endblock %}
    
    {% block content2 %}
        这是content2
    {% endblock %}
    

    访问网页,加载内容如下图所示:
    在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值