Flask框架從入門到精通之模板初識（五）

〆 小源。發表於2019-04-19
Flask框架

知識點：
1、模板
2、變數
3、標籤
4、註釋
5、過濾器
6、自定義過濾器

一、概況

我們目前在檢視函式函式中返回的都一段普通的字串，一張網頁需要用到html、css、js等標籤，才能展現的更漂亮。所以目前我們們只返回字串還達不到，那麼我們就需要模板。模板其實就已經寫好的html、css、js，你只需要往裡面填充要展示的內容即可。

二、模板

在我們專案的目錄下新建一個名為templates的資料夾，並在此資料夾新建一個名為index.html的html檔案。內容如下：

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

<h1>我們是模板-Hello</h1>

</body>
</html>
複製程式碼

模板我們已經寫好，在檢視需要引用render_template函式來使用。

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route('/')  # 代表首頁
def index():  # 檢視函式

    return render_template('index.html')  # 載入並渲染模板


if __name__ == '__main__':
    # 0.0.0.0代表任何能代表這臺機器的地址都可以訪問
    app.run(host='0.0.0.0', port=5000)  # 執行程式
複製程式碼

我們在瀏覽器訪問試一下：

在這裡插入圖片描述

三、變數

現在模板的內容是寫死的，這肯定滿足不了我們們，我們希望把後臺返回的內容渲染在到模板上。Flass使用 Jinja2這個模板引擎來渲染模板。 我們先把pycharm裡的模板語言改成Jinja2

在這裡插入圖片描述
我們在後臺模擬一些資料，返回給模板渲染，render_template函式第二個引數就是我們要返回的內容。

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route('/')  # 代表首頁
def index():  # 檢視函式

    ctx = {
        "name": '老王',
        "age": 12,
        "hobby": ["下棋", '電影'],
        "test": {"a": 1, "b": 2}
    }

    return render_template('index.html', **ctx)  # 載入並渲染模板
    # 下面這種也可以
    # return render_template('index.html', name='laowang', age=12, hobby=["下棋", '電影'], test={"a": 1, "b": 2})  # 載入並渲染模板


if __name__ == '__main__':
    # 0.0.0.0代表任何能代表這臺機器的地址都可以訪問
    app.run(host='0.0.0.0', port=5000)  # 執行程式


複製程式碼

在模板中用模板語言解析出我們的資料,解析變數我們{{}}，這種語法我們叫變數程式碼塊：

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

<h1>我們是模板-Hello</h1>

名字: <span>{{ name }}</span> <br>
年齡: <span>{{ age }}</span> <br>
取列表第一個: <span>{{ hobby[0] }}</span><br>
取字典a對應的值：<span>{{ test.a }}</span><br>


</body>
</html>
複製程式碼

我們在瀏覽器訪問試一下：

在這裡插入圖片描述
模版中的變數程式碼塊可以是任意 Python 型別或者物件，只要它能夠被 Python 的 str() 方法轉換為一個字串就可以。

四、標籤

用 {%%} 定義的控制語句的程式碼塊，可以實現一些語言層次的功能，比如迴圈或者if語句。比如我們要上面的所有的愛好變數出來，模板中可以增加如下程式碼：

愛好:
<ul>
    {% for h in hobby %}
        <li>{{ h }}</li>
    {% endfor %}

</ul>
複製程式碼

我們在瀏覽器訪問試一下：

在這裡插入圖片描述
當然我們也可以使用if語句,我們把每行改成不同的顏色：

愛好:
<ul>
    {% for h in hobby %}
        {% if loop.index == 1 %}
            <li style="background-color: red">{{ h }}</li>
        {% else %}
            <li style="background-color: chartreuse">{{ h }}</li>
        {% endif %}
    {% endfor %}

</ul>
複製程式碼

其中的loop.index表示遍歷的索引，預設從1開始。 我們在瀏覽器訪問試一下：

在這裡插入圖片描述

五、註釋

使用 {# #} 進行註釋，註釋的內容不會在html中被渲染出來。

{# {{ name }} #}

複製程式碼

五、過濾器

過濾器顧名思義就是一邊進入原始資料，一邊出你想要的資料。其本質就是一個函式，比如我們取列表的長度、格式化時間等操作，寫法跟linux裡面的管道一樣。 我們在模板中加入一些過濾器試試：


長度過濾器：
{{ name|length }}<br>

預設過濾器,當後臺沒有返回sex的時候會執行:
{{ sex|default('男') }}<br>

反轉過濾器:
{{ name|reverse }}<br>
複製程式碼

我們在瀏覽器訪問試一下：

在這裡插入圖片描述
過濾器支撐鏈式呼叫：

{{ "hello world" | reverse | upper }}
複製程式碼

語句塊操作:

{% filter upper %}
    'abc'
{% endfilter %}
複製程式碼

常用過濾器：

禁用轉義：{{ '<em>hello</em>' | safe }}
刪除標籤：{{ '<em>hello</em>' | striptags }}
首字母大寫：{{ 'hello' | capitalize }}
所有值小寫：{{ 'HELLO' | lower }}
首字母大寫：{{ 'hello world' | title }}
字串反轉：{{ 'hello' | reverse }}
字串截斷：{{ 'hello world' | truncate(5) }}

獲取列表長度:{{ [1,2,3,4,5,6] | length }}
列表求和:{{ [1,2,3,4,5,6] | sum }}
列表排序:{{ [6,2,3,1,5,4] | sort }}
複製程式碼

六、自定義過濾器

雖然系統給我提供了很多過濾器，但是需求這種東西是永遠滿足不了，所以這個時候就需要我們自定義過濾器。上面也說了過濾器的本質其實就一個函式：

from flask import Flask
from flask import render_template
import time
from datetime import datetime

app = Flask(__name__)


@app.route('/')  # 代表首頁
def index():  # 檢視函式

    ctx = {
        "name": '老王',
        "age": 12,
        "hobby": ["下棋", '電影'],
        "test": {"a": 1, "b": 2},
        "time": datetime.now()  # 返回時間

    }

    return render_template('index.html', **ctx)  # 載入並渲染模板
    # 下面這種也可以
    # return render_template('index.html', name='laowang', age=12, hobby=["下棋", '電影'], test={"a": 1, "b": 2})  # 載入並渲染模板


# 自定義過濾器
def handletime(time):
    return time.strftime('%Y-%m-%d %H:%M')


app.jinja_env.filters['handletime'] = handletime  # 註冊過濾器

if __name__ == '__main__':
    # 0.0.0.0代表任何能代表這臺機器的地址都可以訪問
    app.run(host='0.0.0.0', port=5000)  # 執行程式

複製程式碼

模板中使用過濾器：

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

<h1>我們是模板-Hello</h1>

名字: <span>{{ name }}</span> <br>
年齡: <span>{{ age }}</span> <br>
取列表第一個: <span>{{ hobby[0] }}</span><br>
取字典a對應的值：<span>{{ test.a }}</span><br>

愛好:
<ul>
    {% for h in hobby %}
        {% if loop.index == 1 %}
            <li style="background-color: red">{{ h }}</li>
        {% else %}
            <li style="background-color: chartreuse">{{ h }}</li>
        {% endif %}
    {% endfor %}

</ul>


長度過濾器：
{{ name|length }}<br>

預設過濾器,當後臺沒有返回sex的時候會執行:
{{ sex|default('男') }}<br>

反轉過濾器:
{{ name|reverse }}<br>

自定義過濾器
{{ time|handletime }}


</body>
</html>
複製程式碼

我們在瀏覽器訪問試一下：

在這裡插入圖片描述

歡迎關注我的公眾號：

Flask框架從入門到精通之模板初識（五）

相關文章