Flask 模板语言

最新推荐文章于 2023-07-20 11:18:54 发布

山与路

最新推荐文章于 2023-07-20 11:18:54 发布

阅读量3.1k

点赞数

分类专栏： Flask 文章标签： python

本文链接：https://blog.csdn.net/a1309525802/article/details/107929433

版权

Flask 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Flask 模板语言

jinja2基本用法
过滤器
图片加载
继承

jinja2基本用法

#导入flask模块
from flask import Flask
# 加载html用的模块
from flask import render_template
# Flask初始化
app=Flask(__name__)
@app.route('/index1')
def index():
    name="张三"
    age=18
    hobbys=["篮球","rap","唱歌","跳舞"]
    print(locals()) #{'name': '张三', 'age': 18, 'hobbys': ['篮球', 'rap', '唱歌', '跳舞'], 'address': {'广东省': '广州', '北京': '北京', '上海': '上海'}}
    return render_template("index.html",**locals())
if __name__ == '__main__':
    # host表示域名,默认为localhost(127.0.0.1)
    # port表示端口 默认为5000
    # debug表示调试 默认为False True可自动热启动
    app.run(host="127.0.0.1",port="2022",debug=True)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
{#{{ 变量 }}#}
<p>我的名字是{{ name }}</p>
<p>我的年龄是{{ age }}岁</p>
<p>我的爱好:
    {#{% python基本语法 %}#}
    {% for hobby in hobbys %}
        {#    loop.index  下标#}
        {{ hobby }}--->{{ loop.index }}
    {% endfor %}
</p>
<p>地址:
    {% for key,value in address.items() %}
        {{ key }} ---->{{ value }}
    {% endfor %}
</p>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200811100357606.png

过滤器

def myadd(x):
    return x+10
def myadd2(x,y):
    return x+y
app.add_template_filter(myadd,'myadd')
app.add_template_filter(myadd2,'myadd2')
@app.route('/index2')
def index2():
    name = "张三"
    age = 18
    hobbys = ["篮球", "rap", "唱歌", "跳舞"]
    js='<a href="#">点我</a>'
    num=12
    return render_template("index2.html",**locals())

templates/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<p>
<p>我的名字是{{ name }}</p>
<p>我的年龄是{{ age }}岁</p>
<p>我的爱好:
    {% for hobby in hobbys %}
        {{ hobby }}
    {% endfor %}
</p>
<h1>统计长度</h1>
<p>名字的长度:{{ name|length }}</p>
<p>爱好的长度:{{ hobbys|length }}</p>
<h1>执行js</h1>
{{ js }}
{{ js|safe }}
<h1>自定义的过滤器</h1>
<p>{{ num|myadd }}</p>
<p>{{ num|myadd2(10) }}</p>
</body>
</html>

在这里插入图片描述

图片加载

templates/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<p>
<p>我的名字是{{ name }}</p>
<p>我的年龄是{{ age }}岁</p>
<p>我的爱好:
    {% for hobby in hobbys %}
        {{ hobby }}
    {% endfor %}
</p>
<h1>统计长度</h1>
<p>名字的长度:{{ name|length }}</p>
<p>爱好的长度:{{ hobbys|length }}</p>
<h1>执行js</h1>
{{ js }}
{{ js|safe }}
<h1>自定义的过滤器</h1>
<p>{{ num|myadd }}</p>
<p>{{ num|myadd2(10) }}</p>
{#新加代码#}
<img src="static/img/xiaocaiqi.jpg">
</body>
</html>

在这里插入图片描述

继承

app.py

....
#新加代码
@app.route('/news')
def news():
    return render_template("news.html")
....

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div style="height: 100px;background-color: bisque">
        头部
    </div>
    <div style="height: 1000px;background-color: aliceblue">
        <div style="height: 1000px;width: 20%;float: left;background-color: beige">
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
                <li><a href="#">链接4</a></li>
            </ul>
        </div>
        <div style="height: 1000px;width: 80%;float: left">
            {% block right %}{% endblock %}
        </div>
    </div>
{#    {% include "footer.html" %}#}
</body>
</html>

templates/news.html

{% extends "base.html" %}
{% block title %}用户管理{% endblock %}
{% block right %}
    用户管理详情...
{% endblock %}

在这里插入图片描述

山与路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录