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

最新推荐文章于 2022-12-06 20:52:59 发布

莫余

最新推荐文章于 2022-12-06 20:52:59 发布

阅读量412

点赞数

分类专栏： Flask 文章标签： flask python 后端

本文链接：https://blog.csdn.net/qq_44824148/article/details/122923512

版权

Flask 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

二. Flask框架之Jinja2模板

二. 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 语句

普通遍历

<ul>
{% for user in users %}
<li>{{ user.username|e }}</li>
{% endfor %}
</ul>

字典遍历

<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()