flask模板应用-消息闪现（flash()）

消息闪现

flask提供了一个非常有用的flash()函数，它可以用来“闪现”需要提示给用户的消息，比如当用户登录成功后显示“欢迎回来！”。在视图函数调用flash()函数，传入消息内容，flash（）函数把消息存储在session中，我们需要在模板中使用全局函数get_flashed_messages()获取消息并将它显示出来。

通过flash()函数发送的消息会存储在session对象中，所以我们需要为程序设置秘钥。可以通过app.secret_key属性或配置变量SECRET_KEY设置。

你可以在任意视图函数中调用flash()函数发送消息。例如：

just_flash视图中，通过flash()函数发送一条消息，然后重定向到index视图。

@app.route('/flash')

def just_flash():

    flash('I am flash, who is looking for me?')

    return redirect(url_for('watchlist'))

flask提供了get_flashed_message()函数用来在模板里获取消息，因为程序的每一个页面都有可能需要显示消息，我们把获取并显示消息的代码放到基模板中content块的上面，这样就可以在页面主体内容上面显示消息

在base.html模板中加入处理闪现消息的函数：

因为同一个页面可能包含多条要显示的消息，所以这里使用for循环遍历get_flashed_message()返回的消息列表。

 <main>

     {% for message in get_flashed_messages() %}

         <div class="alert">{{ message }}</div>

     {% endfor %}

     {% block content %}{% endblock %}

 </main>

也可以的定义一些CSS规则，放在static/syles.CSS文件中

访问127.0.0.1:5000/打开程序的主页，单击页面上的Flash something链接（指向/flash），页面重载后就会显示一条消息，如图：

当get_flashed_message()函数被调用时，session中存储的所有消息都会被移除。如果这时刷新页面，会发现重载后的页面不再出现这条消息。

jinja2内部使用unicode编码类型，所以需要向模板传递unicode对象或只包含ASCII字符的字符串。在python2中，如果字符串包含中文，需要在字符串前加u前缀，告诉python把该字符串编码成unicode格式，另外还需要在python文件的首行添加编码声明，这会让python使用utf-8来解码字符串。

在html文件中的head标签中添加编码声明:<meta charset=”utf-8”>

例子用到的主体代码和文件：

在网页上先访问路径127.0.0.1:5000，触发index视图，index视图对应的模板index.html，继承自基模板base.html，两个html文件构成网页主体内容，在index.html中有两个链接分别链接到watchlist视图和just_flash视图，触发的just_flash视图时会触发闪现消息。

代码：

from flask import flash

app.secret_key = 'secret string'

@app.route('/flash')

def just_flash():

    flash('I am flash, who is looking for me?')

    return redirect(url_for('index'))

@app.route('/watchlist')

def watchlist():

    return render_template('watchlist.html',user=user,movies = movies)

@app.route('/')

def index():

    return render_template('index.html')

if __name__ == '__main__':

    app.run(debug = True)

基模板:

base.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    {% block head %}

        <title>{% block title %}Template - HelloFlask{% endblock %}</title>

        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">

        {% block styles %}

            <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css' ) }}">

        {% endblock %}

    {% endblock %}

</head>

<body>

<nav>

    <ul><li><a href="{{ url_for('index') }}">Home</a></li></ul>

</nav>

<main>

    {% for message in get_flashed_messages() %}

        <div class="alert">{{ message }}</div>

    {% endfor %}

    {% block content %}{% endblock %}

</main>

<footer>

    {% block footer %}

        <small> &copy; 2019 <a href="https://www.cnblogs.com/xiaxiaoxu/" title="xiaxiaoxu's blog">夏晓旭的博客</a> /

            <a href="https://github.com/xiaxiaoxu/hybridDrivenTestFramework" title="Contact me on GitHub">GitHub</a> /

            <a href="http://helloflask.com" title="A HelloFlask project">Learning from GreyLi's HelloFlask</a>

        </small>

    {% endblock %}

</footer>

{% block scripts %}{% endblock %}

</body>

</html>

index视图对应的模板index.html

 {% extends 'base.html' %}

 {% from 'macro.html' import qux %}

 {% block content %}

 {% set name='baz' %}

 <h1>Template</h1>

 <ul>

     <li><a href="{{ url_for('watchlist') }}">Watchlist</a></li>

     <li><a href="{{ url_for('hello') }}">xiaxiaoxu</a></li>

     <li>Filter: {{ foo|musical }}</li>

     <li>Global: {{ bar() }}</li>

     <li>Test: {% if name is baz %}I am baz.{% endif %}</li>

     <li>Macro: {{ qux(amount=1) }}</li>

     <li><a href="{{ url_for('just_flash') }}">Flash something</a></li>

 </ul>

 {% endblock %}

watchlist链接对应的模板watchlist.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>{{ user.username }}'s Watchlist</title>

     <styles>

         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename= 'style.css' ) }}">

     </styles>

 </head>

 <body>

 <a href = "{{ url_for('index') }}">&larr; Return</a>

 <h2><img src="{{ url_for('static', filename='qq.jpg') }}" width="50">{{ user.username }}</h2>

 {% if user.bio %}

     <i>{{ user.bio }}</i>

 {% else %}

     <i>This user has not provided a bio.</i>

 {% endif %}

 {# 下面是电影清单（这是注释） #}

 <h5>{{ user.username }}'s Watchlist ({{ movies|length }}):</h5>

 <ul>

     {% for movie in movies %}

         <li>{{ movie.name }} - {{ movie.year }}</li>

     {% endfor %}

 </ul>

 </body>

 </html>

宏文件，macro.html

宏qux在index.html中用到

 % macro qux(amount=1) %}

     {% if amount == 1 %}

         I am qux.

     {% elif amount > 1 %}

         We are quxs.

     {% endif %}

 {% endmacro %}

 {% macro static_file(type, filename_or_url, local=True) %}

     {% if local %}

         {% set filename_or_url = url_for('static', filename=filename_or_url) %}

     {% endif %}

 {% if type == 'CSS' %}

     <link rel="stylesheet" href="{{ filename_or_url }}" type="text/css">

 {% elif type == 'js' %}

     <scirpt type ="text/javascript" src="{{ filename_or_url }}"></scirpt>

 {% elif type == 'icon' %}

     <link rel="icon" href="{{ filename_or_url }}">

 {% endif %}

 {% endmacro %}

样式CSS文件

 body {

     margin: auto;

     width: 750px;

 }

 nav ul {

     list-style-type: none;

     margin:;

     padding:;

     overflow: hidden;

     background-color: #333;

 }

 nav li {

     float: left;

 }

 nav li a {

     display: block;

     color: white;

     text-align: center;

     padding: 14px 16px;

     text-decoration: none;

 }

 nav li a:hover {

     background-color: #111;

 }

 main {

     padding: 10px 20px;

 }

 footer {

     font-size: 13px;

     color: #888;

     border-top: 1px solid #eee;

     margin-top: 25px;

     text-align: center;

     padding: 10px;

 }

 .alert {

   position: relative;

   padding: 0.75rem 1.25rem;

   margin-bottom: 1rem;

   border: 1px solid transparent;

   border-radius: 0.25rem;

   color: #004085;

   background-color: #cce5ff;

   border-color: #b8daff;

 }

网页整体链接情况

flash消息

watchlist：return链接是返回到主页

xiaxiaoxu链接：