美文网首页
2.8.6Flask --3 Flask的模板操作

2.8.6Flask --3 Flask的模板操作

作者: 寒暄_HX | 来源:发表于2020-03-08 17:03 被阅读0次

    Flask目录：https://www.jianshu.com/p/9b5e30320849

    一个简单的例子：

    two_exam.app.py
---------------
from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')

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


    twp_exam.templates.index.html
-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>欢迎你</h1>
</body>
</html>
    页面

    jinja2

    官方文档
    jinja2是一个Python模板引擎，具体的很多操作和Django的模板操作类似，但是也有自己独特的地方。例如jinja2的宏与沙箱模式。

    变量与语法

    jinja2关于变量与语法的设计和Django的设计大体上差不多。
    实例:

    two_exam.app.py
---------------
from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_user():
    username = '李四'
    dict1 = {
        'age':20,
        'city':'河北'
    }
    list1 = ['广东','上海','北京']
    return render_template('index.html',username='李四',dict1=dict1,list1=list1)

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


    twp_exam.templates.index.html
-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>欢迎你,{{ username }}</h1>
<h1>你的年龄是{{ dict1.age }}</h1>
<h1>你来自{{ dict1['city'] }}</h1>

{% if dict1.age > 18 %}
    <p>{{ username }} 可以去网吧啦</p>
{% endif %}

<h3>list渲染</h3>
{% for i in list1 %}
    <p>{{ i }}</p>
{% endfor %}

{#这里是和django的第一点不同，items需要加括号#}
{% for k,v in dict1.items() %}
    <p>{{ k }}--{{ v }}</p>
{% endfor %}
</body>
</html>
    页面截图

    关于for循环还有一个要说的地方就是他对class样式的控制。

    ...
    <style>
        .a{
            color:red;
        }
        .b{
            color: green;
        }
        .c{
            color: aqua;
        }

    </style>
...
<h2>对class的操作</h2>
{% for i  in list1 %}
    <p class="{{ loop.cycle('a','b','c') }}">{{ i }}</p>
{% endfor %}
...
    页面截图

    for循环的扩展

    for循环内的变量

    如何在html中使用break和continue。在app.py中添加。

    #为jinja2添加break/continue扩展
app.jinja_env.add_extension('jinja2.ext.loopcontrols')

    上面我们简单说来一下从后端传到前端的值怎么使用，接着我们来说说怎么在前端定义变量与代码块。

    <h2>变量与代码块</h2>

{% with %}
    {% set value = 30 %}
    <p>{{ value }}</p>  {#这个value只在这个with块内有用#}
{% endwith %}
    页面截图

    过滤器

    过滤器用来对我们要展示的内容进行进一步的处理。
    有两种方式，方式一是使用管道符，方式二是使用标签。

    @app.route('/use_filter')
def use_filter():
    hello = 'hello,lucy'
    return render_template('glq.html',hello=hello)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
    <h3>不使用过滤器</h3>
    {{ hello }}
    <h3>使用管道符过滤器</h3>
    {{ hello | upper }}
    <h3>使用标签过滤器</h3>
    {% filter upper %}
        {{ hello }}
    {% endfilter %}
</body>
</html>
    页面截图

    内置过滤器

    就举几个常用的，具体参考文档。

    @app.route('/use_filter')
def use_filter():
    hello = 'hello,lucy'
    a = -1
    var = None
    html_str = '<h4>测试文本</h4>'
    return render_template('glq.html',hello=hello,a=a,var=var,html_str=html_str)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
    <h3>不使用过滤器</h3>
    {{ hello }}
    <h3>使用管道符过滤器</h3>
    {{ hello | upper }}
    <h3>使用标签过滤器</h3>
    {% filter upper %}
        {{ hello }}
    {% endfilter %}
    <h3>常用过滤器</h3>
    <h4>绝对值</h4>
    <p>{{ a }}</p>
    <p>{{ a|abs }}</p>
    <h4>默认值</h4>
    <h6>默认值是指给没有定义的变量赋的值，如果在后端已经赋值，哪怕是None也不行</h6>
    <p>{{ var | default("没有这个值") }}</p>
    <p>{{ var2 |default("没有这个值") }}</p>
    <h6>当然我们可以用default的另一个参数</h6>
    <p>{{ var | default("没有这个值",True) }}</p>
    <h6>同时也可以将 default 简写成 d </h6>
    <p>{{ var | d("没有这个值",True) }}</p>
    <h4>转义字符</h4>
    {% autoescape off %}
        <p>{{ html_str }}</p>
        {{ html_str | escape }}
        <h6>可以简写成 e</h6>
        {{ html_str | e }}
    {% endautoescape %}
</body>
</html>
    页面截图

    自定义过滤器

    jinja2的自定义过滤器和jango的差不多。

    #自定义过滤器
#装饰器
@app.template_filter("phone_foramt")
def phone_format(phone):
    return phone[:3]+'*'*8

#函数
def shibei(a):
    return a*10
app.jinja_env.filters['shibei']=shibei

        <h1>自定义过滤器</h1>
    <p>{{  phone | phone_foramt }}</p>
    <p>{{  a | shibei }}</p>
    页面截图

    模板的宏

    宏，一般叫宏的东西都感觉好高级，其实他就是一个用来进行批量处理的称谓。也可以把jinja2的宏理解成是函数。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
</head>
<body>

{% macro input(type_name,name,value="") %}
    <input  type="{{ type_name }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}
{{ input('text','username','admin') }}

<h3>number输入</h3>
{{ input ('number','age') }}
</body>
</html>

    宏就没有py文件多少事情了，就不展示py内容。


    页面截图

    同样，他既然是个函数了，那么肯定就能从外部文件导入呀。

    from.html
---------
{% macro input(type_name,name,value="") %}
    <input  type="{{ type_name }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

hong.html
----------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏</title>
</head>
<body>
{% from 'from.html' import input %}
{#这里也可以写成   {% import 'from.html' as fr %}#}
{{ input('text','username','admin') }}

<h3>number输入</h3>
{{ input ('number','age') }}
</body>
</html>
    页面截图

    模板的继承

    继承大致上与jango的类似，都是用来减少前端代码的重复率，提高开发速率。
    所以这里

    {% extends 母版与继承 %}

    消息闪现

    一个好的应用和用户界面都需要良好的反馈。如果用户得不到足够的反馈，那么应用最终会被用户唾弃。

    Flask 的闪现系统提供了一个良好的反馈方式。

    from flask import Flask,render_template,flash,redirect
app = Flask(__name__)

#给消息闪现加上key值
app.secret_key='xxsx-key'

#消息闪现
@app.route('/xxsx')
def xxsx():
    flash('欢迎回来')
    return redirect('/m')

@app.route('/m')
def m():
    return render_template('xxsx.html')

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息闪现</title>
</head>
<body>
<h1>用户中心</h1>
{% for msg in get_flashed_messages() %}
    <p>{{ msg }}</p>
{% endfor %}
</body>
</html>
    页面跳转

    页面时发生了跳转 但是本来我们传输给xxsx的 欢迎回来 却显示在 m页面中。


    页面截图

    不过在刷新一下，闪现的消息就消失了，他只会存在一次。

    分类消息闪现

    除了普通的消息闪现，我们也可以一次传输多个消息，这就用到了flash的第二个参数与get_flashed_messages的第二个参数。

    from flask import Flask,render_template,flash,redirect
app = Flask(__name__)

#给消息闪现加上key值
app.secret_key='xxsx-key'

#消息闪现
@app.route('/xxsx')
def xxsx():
    flash('欢迎回来','success')
    flash('警告你一下','error')
    return redirect('/m')

@app.route('/m')
def m():
    return render_template('xxsx.html')

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息闪现</title>
</head>
<body>
<h1>用户中心</h1>
{% for msg in get_flashed_messages(with_categories=true) %}
    <p class="{{ cat }}">{{ msg }}</p>
{% endfor %}
</body>
</html>
    页面截图

    这样就可以用来传输多种消息。同时可以来适配class。

    过滤消息闪现

    在某些时候，我们希望有些消息不传输过去，这就有了屏蔽消息闪现。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息闪现</title>
</head>
<body>
<h1>用户中心</h1>
{% for cat,msg in get_flashed_messages(with_categories=true,category_filter=['error']) %}
    <p class="{{ cat }}">{{ msg }}</p>
{% endfor %}
</body>
</html>
    页面截图

    除了 error 其他的消息都被我们屏蔽了。

    相关文章

      网友评论

          本文标题：2.8.6Flask --3 Flask的模板操作

          本文链接：https://www.haomeiwen.com/subject/iqtwrhtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2.8.6Flask --3 Flask的模板操作|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！