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'

{% if/for %} {% endif/for %}
{% block/macro%} {% endblock/macro %}
{% include/import %}
{% extends’’ %}

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值