flask模板應用-消息閃現（flash()） --

本文轉載自查看原文 2019-03-03 22:27 1343 Flask

消息閃現

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()返回的消息列表。

1 <main>
2     {% for message in get_flashed_messages() %}
3         <div class="alert">{{ message }}</div>
4     {% endfor %}
5     {% block content %}{% endblock %}
6 </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

 1 {% extends 'base.html' %}
 2 {% from 'macro.html' import qux %}
 3 
 4 {% block content %}
 5 {% set name='baz' %}
 6 <h1>Template</h1>
 7 <ul>
 8     <li><a href="{{ url_for('watchlist') }}">Watchlist</a></li>
 9     <li><a href="{{ url_for('hello') }}">xiaxiaoxu</a></li>
10     <li>Filter: {{ foo|musical }}</li>
11     <li>Global: {{ bar() }}</li>
12     <li>Test: {% if name is baz %}I am baz.{% endif %}</li>
13     <li>Macro: {{ qux(amount=1) }}</li>
14     <li><a href="{{ url_for('just_flash') }}">Flash something</a></li>
15 </ul>
16 {% endblock %}

watchlist鏈接對應的模板watchlist.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>{{ user.username }}'s Watchlist</title>
 6     <styles>
 7         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename= 'style.css' ) }}">
 8     </styles>
 9 </head>
10 <body>
11 <a href = "{{ url_for('index') }}">&larr; Return</a>
12 <h2><img src="{{ url_for('static', filename='qq.jpg') }}" width="50">{{ user.username }}</h2>
13 {% if user.bio %}
14     <i>{{ user.bio }}</i>
15 {% else %}
16     <i>This user has not provided a bio.</i>
17 {% endif %}
18 {# 下面是電影清單（這是注釋） #}
19 <h5>{{ user.username }}'s Watchlist ({{ movies|length }}):</h5>
20 <ul>
21     {% for movie in movies %}
22         <li>{{ movie.name }} - {{ movie.year }}</li>
23     {% endfor %}
24 </ul>
25 </body>
26 </html>

宏文件，macro.html

宏qux在index.html中用到

 1 % macro qux(amount=1) %}
 2     {% if amount == 1 %}
 3         I am qux.
 4     {% elif amount > 1 %}
 5         We are quxs.
 6     {% endif %}
 7 {% endmacro %}
 8 
 9 {% macro static_file(type, filename_or_url, local=True) %}
10     {% if local %}
11         {% set filename_or_url = url_for('static', filename=filename_or_url) %}
12     {% endif %}
13 {% if type == 'CSS' %}
14     <link rel="stylesheet" href="{{ filename_or_url }}" type="text/css">
15 {% elif type == 'js' %}
16     <scirpt type ="text/javascript" src="{{ filename_or_url }}"></scirpt>
17 {% elif type == 'icon' %}
18     <link rel="icon" href="{{ filename_or_url }}">
19 {% endif %}
20 {% endmacro %}

樣式CSS文件

 1 body {
 2     margin: auto;
 3     width: 750px;
 4 }
 5 
 6 nav ul {
 7     list-style-type: none;
 8     margin: 0;
 9     padding: 0;
10     overflow: hidden;
11     background-color: #333;
12 }
13 
14 nav li {
15     float: left;
16 }
17 
18 nav li a {
19     display: block;
20     color: white;
21     text-align: center;
22     padding: 14px 16px;
23     text-decoration: none;
24 }
25 
26 nav li a:hover {
27     background-color: #111;
28 }
29 
30 main {
31     padding: 10px 20px;
32 }
33 
34 footer {
35     font-size: 13px;
36     color: #888;
37     border-top: 1px solid #eee;
38     margin-top: 25px;
39     text-align: center;
40     padding: 10px;
41 
42 }
43 
44 .alert {
45   position: relative;
46   padding: 0.75rem 1.25rem;
47   margin-bottom: 1rem;
48   border: 1px solid transparent;
49   border-radius: 0.25rem;
50   color: #004085;
51   background-color: #cce5ff;
52   border-color: #b8daff;
53 }

網頁整體鏈接情況

flash消息

watchlist：return鏈接是返回到主頁

xiaxiaoxu鏈接：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Flask的消息message機制flash Flask中的flash Flask模板 flask模板應用-自定義錯誤頁面 -- flask模板應用-javaScript和CSS中jinja2 -- Flash開發Android應用第二篇 Flask基礎篇之（閃現，藍圖，請求擴展，中間件） python flask 模板渲染 Flask系列（二）模板 templates 03.flask模板