flask(三)模板

模板可以理解为一个特殊的html文件,特殊之处就在于这个html文件包含固定内容和动态部分,其动态部分可以借助模板引擎进行传参,类似于django

1.模板引擎传参
app.py

class Girl:
    def __init__(self,name):
        self.name = name
        self.age = 18
        self.gender = '女'
    def __str__(self):
        return self.name

@app.route('/show')
def show():
    name = 'zz'
    age = 18
    hobby = ['c','t1','r1','l']
    dict1 = {'gift':'礼物','gift1':'礼物1','gift2':'礼物2',}
    girl_1 = Girl('zz')
    return render_template("show.html",name = name,age = age,hobby = hobby,gift = dict1,girl = girl_1)

show.html

<body>
<div>展示</div>
{# 变量显示 由传递时的key决定 #}
<p>
    用户:{{ name }} 年龄:{{ age }}
    <br>
    hobby:{{ hobby.0 }} {{ hobby[1] }}
    <br>
    gift: {{ gift.gift }} {{ gift.get('gift1') }}
    <br>
    girl: {{ girl.age }}
</p>

2.if/for语句

<head>
    <meta charset="UTF-8">
    <title>信息显示</title>
    <style>
        .a{
            color: #ff0000;
            font-weight:bold;
        }
    </style>
</head>
<body>
{# 注释 此时只是对后端不可见,直接用浏览器打开可看见 #}
<!-- 注释 直接用浏览器打开也不可看见 -->
{# for #}
<ul>
    {% for ho in hobby %}
        <li>{{ ho }}</li>
    {% endfor %}
</ul>
{# 反向输出for #}
<ul>
    {% for ho in hobby | reverse%}
        <li>{{ ho }}</li>
    {% endfor %}
</ul>
{# if #}
<ul>
    {% for ho in hobby %}
        {% if ho|length >1 %}
            <li class="a">{{ ho }}</li>
        {% else %}
            <li>{{ ho }}</li>
        {% endif %}
    {% endfor %}
</ul>
</body>

3.根据个数动态创建标签

@app.route('/show')
def show():
    users = [
        {'username': 'zz', 'password': '123', 'phone': '135********'},
        {'username': 'zz1', 'password': '1231', 'phone': '135*******1'},
        {'username': 'zz2', 'password': '1232', 'phone': '135*******2'},
        {'username': 'zz3', 'password': '1233', 'phone': '135*******3'},
        {'username': 'zz4', 'password': '1234', 'phone': '135*******4'},
    ]
    return render_template("show.html",users=users)
<table border="1" width="80%" cellspacing="0">
    {% for user in users %}
        <tr>
            <td>{{ loop.index }}</td>
            {# index:从1开始 index0:从0开始 revindex:从length开始 #}
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.phone }}</td>
        </tr>
    {% endfor %}
</table>

将第一个背景设置为灰色

<table border="1" width="80%" cellspacing="0">
    {% for user in users %}
        {% if loop.first %}
        {# 如果为第一个 #}
        <tr style="background-color: darkgrey">
            <td>{{ loop.index }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.phone }}</td>
        </tr>
        {% else %}
        <tr>
            <td>{{ loop.index }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.phone }}</td>
        </tr>
        {% endif %}
    {% endfor %}

<table border="1" width="80%" cellspacing="0">
    {% for user in users %}
        {# 如果为第一个 #}
        <tr {% if loop.first %}style="background-color: darkgrey{% endif %}">
        {# <tr {% if loop.index==3 %}style="background-color: darkgrey{% endif %}"> #}
            <td>{{ loop.index }}</td>
            {# index:从1开始 index0:从0开始 revindex:从length开始#}
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.phone }}</td>
        </tr>
    {% endfor %}
</table>

4.过滤器
本质为函数,{{变量名|过滤器(*args)}}
常见的过滤器:
字符串:
1.safe 禁用转义
2.capitalize 首字母大写
3.lower/upper 全小写/全大写
4.title 一句话中每个单词首字母大写
5.reverse 翻转
6.format 格式化
7.truncate 截断
列表:
1.length 显示长度
2.first/last
3.sum 对于整型的计算
4.sort 排序
app

@app.route('/show')
def show():
    users = [
        {'username': 'zz', 'password': '123', 'phone': '135********'},
        {'username': 'zz1', 'password': '1231', 'phone': '135*******1'},
        {'username': 'zz2', 'password': '1232', 'phone': '135*******2'},
        {'username': 'zz3', 'password': '1233', 'phone': '135*******3'},
        {'username': 'zz4', 'password': '1234', 'phone': '135*******4'},
    ]
    return render_template("show.html",users=users,string1='<h1>hai</h1>',string2 ='hello')
<body>
{# 某些函数在模板语言里不可用,所以要依赖于过滤函数 {{ users.len()}} #}
当前用户共{{ users|length }}人
{#{% for user in users.0.values() %}#}
{% for user in users.0.items() %}
    <p>{{ user }}</p>
{% endfor %}
<br>
{# 过滤器转义 后台传入带标签的字符串 第一句显示<h1>hai</h1>,后一句显示大写加粗的hai#}
{{ string1 }}
{{ string1|safe }}
<br>
{# 首字母大写 #}
{{ string2|capitalize}}
<br>
{# 格式化 #}
{{ 'you say %s,%d'|format(string2,18) }}
<br>
{# HELL...一共为7个字符,后三位为... #}
{{ 'helloworld'|truncate(7,leeway=0)|upper }}
</body>

5.自定义过滤器
1.使用flask中的add_template_filter
2.使用装饰器实现

@app.route('/show')
def show():
    msg='hello world'
    li =[5,8,9,6,4]
    return render_template("show.html",msg=msg,li=li)

# add_template_filter
def replace_hello(value):
    print('---->',value)
    value = value.replace('hello','').strip()
    print('====>',value)
    return value
app.add_template_filter(replace_hello,'replace') # replace为调用的名字

# 装饰器
@app.template_filter('li_re') # 调用的名字
def reverse_list(li):
    temp_li=list(li)
    temp_li.reverse()
    return temp_li
<body>
{{ msg|replace }}
<hr>
{{ li }}
<hr>
{{ li|li_re }}
</body>

6.模板继承
https://blog.csdn.net/weixin_49722641/article/details/109472458

模板挖坑:
{% block 名字 %}
{% endblock %}

子填坑:
{% extends "*.html" %}
{% block 名字 %}
	改的内容
{% endblock %}

若想在子类里改变样式,必须在父模板中预留位置{% block 名字 %} {% endblock %},然后再其内进行填充。

对于静态文件的引用使用url_for先寻找static的url再拼接文件目录<link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">此时路径变为href="/static/css/style.css"

{% include'*/*/*.html'% }表示将星目录下的*.html文件导入到该页面中,适用场景:ABC页面包含相同的部分,但是其他页面不包含,所以不可用模板,用include,定义一个共用部分的文件,其余用到的直接根据路径引用即可

7.宏:macro
可看为jinja2的一个函数,可返回一个HTML字符串。目的:避免代码冗余,使之复用。
将宏写入template的macro中,此次新建html为macro

{# def func(a,b=8): 类似 #}
{# 定义宏 #}
{% macro form(action,value='登录',method="post") %}
    <form action="{{ action }}" method="{{ method }}">
        <input type="text" placeholder="用户名" name="username">
        <br>
        <input type="password" placeholder="密码" name="password">
        <br>
        <input type="submit" value="{{ value }}">
    </form>
{% endmacro %}

{# 本文件内调用宏 #}
{{ form('/') }}

其余文件调用宏

<body>
{# 别的文件调用 #}
{% import 'macro/macro.html' as f %}
{{ f.form('/',value = '注册') }}
</body>

app

@app.route('/show', methods=['post','get'])
def show():
    return render_template("show.html")
@app.route('/', methods=['post','get'])
def index():
    return 'hello'

原文地址:https://blog.csdn.net/weixin_49722641/article/details/114792831

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Jinja2:是Python的Web项目中被广泛应用的模板引擎,是由Python实现的模板语言,Jinja2 的作者也是 Flask 的作者。他的设计思想来源于Django的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言。
Fullcalendar日历使用,包括视图选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整,自定义头部,加入el-popover显示图片、图片预览、添加附件链接等,支持手机显示。
监听QQ消息并不需要我们写代码,因为市面上已经有很多开源QQ机器人框架,在这里我们使用go-cqhttp官方文档:go-cqhttp如果您感兴趣的话,可以阅读一下官方文档,如果不想看,直接看我的文章即可。
【Flask框架】—— 视图和URL总结
python+web+flask轻量级框架的实战小项目。登录功能,后续功能可自行丰富。
有了这个就可以配置可信IP,关键是不需要企业认证,个人信息就可以做。
本专栏是对Flask官方文档中个人博客搭建进行的归纳总结,与官方文档结合事半功倍。 本人经验,学习一门语言或框架时,请首先阅读官方文档。学习完毕后,再看其他相关文章(如本系列文章),才是正确的学习道路。
本专栏是对Flask官方文档中个人博客搭建进行的归纳总结,与官方文档结合事半功倍。基础薄弱的同学请戳Flask官方文档教程 本人经验,学习一门语言或框架时,请首先阅读官方文档。学习完毕后,再看其他相关文章(如本系列文章),才是正确的学习道路。 如果python都完全不熟悉,一定不要着急学习框架,请首先学习python官方文档,一步一个脚印。要不然从入门到放弃是大概率事件。 Python 官方文档教程
快到年末了 相信大家都在忙着处理年末数据 刚好有一个是对超市的商品库存进行分析的学员案例 真的非常简单~
一个简易的问答系统就这样完成了,当然,这个项目还可以进一步完善,比如 将数据存入Elasticsearch,通过它先进行初步的检索,然后再通过这个系统,当然我们也可以用其他的架构实现。如果你对这系统还有其他的疑问,也可以再下面进行留言!!!
#模版继承和页面之间的调用@app.route(&quot;/bl&quot;)def bl(): return render_template(&quot;file_2.html&quot;)主ht
#form表达提交@app.route(&quot;/data&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;]) #methods 让当前路由支持GET 和
#form表达提交@app.route(&quot;/data&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;]) #methods 让当前路由支持GET 和
#session 使用app.secret_key = &quot;dsada12212132dsad1232113&quot;app.config[&#39;PERMANENT_SESSION_LI
#文件上传@app.route(&quot;/file&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;])def file(): if request.meth
#跳转操作:redirect@app.route(&quot;/red&quot;)def red(): return redirect(&quot;/login&quot;)
#session 使用app.secret_key = &quot;dsada12212132dsad1232113&quot;app.config[&#39;PERMANENT_SESSION_LI
@app.route(&quot;/req&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;])def req(): print(request.headers)
#模版继承和页面之间的调用@app.route(&quot;/bl&quot;)def bl(): return render_template(&quot;file_2.html&quot;)主ht
#文件操作:send_file,支持图片 视频 mp3 文本等@app.route(&quot;/img&quot;)def img(): return send_file(&quot;1.jpg&q