【Flask框架】二. Flask框架之Jinja2模板

  • Post author:
  • Post category:其他




二. Flask框架之Jinja2模板



Flask渲染Jinja模板

使用render_template()函数,

如:render_template('about.html',**context)

。**context为关键字参数。

@app.route('/about')
def about():
    context={
        'username':'123'
    }
    return render_template('about.html',**context)



过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{ username }}
{{ username|length }}
<div>
    {{ books|join("、")}}
</div>
</body>
</html>

过滤器官方文档:

https://jinja.palletsprojects.com/en/3.0.x/templates/#list-of-builtin-filters



控制语句



if 语句

{% if kenny.sick %}
	Kenny is sick.
{% elif kenny.dead %}
	You killed Kenny!  You bastard!!!
{% else %}
	Kenny looks okay --- so far
{% endif %}



for 语句

  1. 普通遍历
<ul>
{% for user in users %}
<li>{{ user.username|e }}</li>
{% endfor %}
</ul>
  1. 字典遍历
<dl>
{% for key, value in my_dict.iteritems() %}
	<dt>{{ key|e }}</dt>
	<dd>{{ value|e }}</dd>
{% endfor %}
</dl>



部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        {% if age > 18 %}
            您已成年!
        {% elif age<18 %}
            您未成年!
        {% else %}
            您刚成年!
        {% endif %}
    </div>
    <div>
        {% for book in books %}
            {{ book }}
        {% endfor %}
    </div>
    <div>
        {% for key,value in person.items() %}
            {{ key }}:{{ value }}
        {% endfor %}
    </div>
</body>
</html>



模板继承

Flask中的模板可以继承,通过继承可以把模板中许多重复出现的元素抽取出来,放在父模板中,并且父模板通过

定义block给子模板开一个口

,子模板

根据需要,再实现这个block

,假设现在有一个base.html这个父模板,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="base.css" />
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <div id="body">{% block body %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>
        {% endblock %}
    </div>
</body>
</html>
{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .detail{
            color: red;
        }
    </style>
{% endblock %}
{% block content %}
    <h1>这里是首页</h1>
    <p class="detail">
      首页的内容
    </p>
{% endblock %}  



静态文件的配置

Web应用中会出现大量的静态文件来使得网页更加生动美观。类似于CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源。

在Jinja中加载静态文件非常简单,只需要通过

url_for

全局函数就可以实现,看以下代码:

<link href="{{ url_for('static',filename='about.css') }}">



完整代码

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/control')
def control():
    context={
        'person':{'name':'hh','age':18},
        'books':['红楼梦', '三国演义'],
        'age':18
    }
    return render_template('control.html',**context)

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/about')
def about():
    context={
        'username':'123',
        'books' : ['红楼梦', '三国演义']
    }
    return render_template('about.html',**context)

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



版权声明:本文为qq_44824148原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。