flask系列三之Jinja2模板

時間 2019-11-17

標籤 flask 系列 jinja2 jinja 模板欄目 Python 简体版

原文原文鏈接

一、如何渲染模板

模板在‘templates’文件夾下（htnl頁面）
從flask中導入render_template函數---渲染html模板
在視圖函數中，使用render_template 函數渲染模板。注意：只須要填寫模板的名字，不須要填寫templates這個文件夾的路徑，若在templates下面創建文件夾，則須要填寫路徑名稱。

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

二、模板傳參

（1）若是隻有一個或者少許參數，直接在render_template函數中添加關鍵字參數就能夠了。css

（2）若是有多個參數的時候，那麼能夠先把全部的參數放在字典中，而後在render_template中，使用兩個星號，把字典轉換成關鍵參數傳遞進去，這樣的代碼更方便管理和使用。html

（1）變量語法

在HTML文件中前端

{{ params }}

（2）較少的參數（直接傳參數）

<p>你好：{{ username }}</p>

selfprojectName.py中：

@app.route('/')
def index():
    return render_template('index.html',username='你好') # 模板文件中只有一個變量，直接把參數傳進去

（3）不少的參數（特殊的方法傳參）

（1）若是隻有一個或者少許參數，直接在render_template函數中添加關鍵字參數就能夠了。python

（2）若是有多個參數的時候，那麼能夠先把全部的參數放在字典中，而後在render_template中，使用兩個星號，把字典轉換成關鍵參數傳遞進去，這樣的代碼更方便管理和使用。web

index.html中：flask

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <p>這是一個模板文件</p>
    <p>用戶名：{{ username }}</p>
    <p>年齡：{{ age }}</p>
    <p>性別：{{ gender }}</p>
</body>
</html>

selfprojectName.py中：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    context = {
        'username' : '站長',
        'age' : '18',
        'gender' : '男'
    }
    return render_template('index.html' , **context) # 定義一個字典，雙星號把字典轉換成關鍵參數傳遞進去

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

（4）模板中訪問模型（類）中的屬性和訪問字典中的元素

訪問模型中的屬性或者是字典，能夠經過的形式，或者是使用{{params.property}}{{params['age']}}

index.html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <p>這是一個模板文件</p>
    <p>用戶名：{{ username }}</p>
    <p>年齡：{{ age }}</p>
    <p>性別：{{ gender }}</p>
    <hr>
    <p>訪問模型（類）</p>
    <p>用戶名：{{ person['name'] }}</p>
    <p>年齡：{{ person.age }}</p>

    <hr>
    <p>訪問字典</p>
    <p>百度：{{ websites.baidu }}</p>
    <p>谷歌：{{ websites.google }}</p>
</body>
</html>

selfprojectName.py中：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 定義一個類
    class Person(object):
        name = '老頭'
        age = 22

    p = Person() # 實例化對象

    context = {
        'username' : '站長',
        'age' : '18',
        'gender' : '男',
        'person' : p,  # 把模型對象做爲參數傳進去
        # 將一個字典嵌套傳參數進去
        'websites' : {
            'baidu' : 'www.baidu.com',
            'google' : 'www.google.com'
        }
    }
    return render_template('index.html' , **context) # 定義一個字典，雙星號把字典轉換成關鍵參數傳遞進去

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

三、過濾器

過濾器簡單理解：後端

例如：過濾器的做用就是，若是有頭像就顯示頭像，沒有頭像就顯示默認的頭像（無頭像）app

過濾器的做用對象是變量函數

（1）語法

{{ avatar|default('xxx') }}

（2）default過濾器

實例一（沒有過濾器）： google

selfprojectName.py中：

#encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', avatar='http://avatar.csdn.net/9/0/4/3_ly123963.jpg')

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <p>過濾器模板文件</p>

    <img src="{{ avatar }}">
</body>
</html>

實例二（加上過濾器）：

selfprojectName.py中：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html') # 後端不上傳圖片，前端將加載默認的圖片

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

前端加上過濾器以後。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <p>過濾器模板文件</p>

    <img src="{{ avatar | default('http://noavatar.csdn.net/B/3/F/3_lighting_miaoxingren.jpg') }}">
</body>
</html>

（3）length過濾器

 length過濾器主要用於求列表或者字符串或者字典或者元組的長度。好比統計一篇文章評論的總數，通常都是使用過濾器完成的。 
實例：

selfprojectName.py中：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 定義一個評論列表
    comments = [
        {
            'user' : '站長',
            'content' : u'xxxxxxxxxxxx'
        },
        {
            'user' : '你猜',
            'content' : u'yxyxyxyxyxy'
        },
        {
            'user' : '船長傑克',
            'content' : u'tttttttmtmtmtmtd'
        }
    ]
    return render_template('index.html',comments=comments)

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

index.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <p>過濾器模板文件</p>
    <hr>
    <p>評論數：（{{ comments|length }}）</p>
    <ul>
        {% for comment in comments %}
            <li>
                <a href="#">{{ comment.user }}</a>
                <p href="#">{{ comment.content }}</p>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

（4）一些經常使用的過濾器

abs(value)：返回一個數值的絕對值。示例：-1|abs
default(value,default_value,boolean=false)：若是當前變量沒有值，則會使用參數中的值來代替。示例：name|default(‘xiaotuo’)——若是name不存在，則會使用xiaotuo來替代。boolean=False默認是在只有這個變量爲undefined的時候纔會使用default中的值，若是想使用python的形式判斷是否爲false，則能夠傳遞boolean=true。也可使用or來替換。
escape(value)或e：轉義字符，會將<、>等符號轉義成HTML中的符號。顯例：content|escape或content|e。
first(value)：返回一個序列的第一個元素。示例：names|first
format(value,*arags,**kwargs)：格式化字符串。好比：{{ "%s" - "%s"|format('Hello?',"Foo!") }}將輸出：Helloo? - Foo!
last(value)：返回一個序列的最後一個元素。示例：names|last。
length(value)：返回一個序列或者字典的長度。示例：names|length。
join(value,d=u」)：將一個序列用d這個參數的值拼接成字符串。
safe(value)：若是開啓了全局轉義，那麼safe過濾器會將變量關掉轉義。示例：content_html|safe。
int(value)：將值轉換爲int類型。
float(value)：將值轉換爲float類型。
lower(value)：將字符串轉換爲小寫。
upper(value)：將字符串轉換爲小寫。
replace(value,old,new)：替換將old替換爲new的字符串。
truncate(value,length=255,killwords=False)：截取length長度的字符串。
striptags(value)：刪除字符串中全部的HTML標籤，若是出現多個空格，將替換成一個空格。
trim：截取字符串前面和後面的空白字符。
string(value)：將變量轉換成字符串。
wordcount(s)：計算一個長字符串中單詞的個數。

四、if判斷

（1）語法

{% if xxx %}

{% else %}

{% endif %}

五、for循環遍歷字典

1. 字典的遍歷

selfprojectName.py中：

@app.route('/')
def index():
    # 定義一個字典
    user = {
        'username' : u'站長',
        'age' : 22
    }
    return render_template('index.html',user=user)

index.html中

{% for k,v in user.items() %}
    <p>{{ k }}:{{ v }}</p>
{% endfor %}

語法和python同樣，可使用items()、keys()、values()、iteritems()、iterkeys()、itervalues()

2.列表的遍歷

selfprojectName.py中：

# for遍歷列表
@app.route('/')
def index():
    websites = ['www.baidu.com','www.google.com'] # 定義一個列表
    return render_template('index.html',websites=websites)

index.html中

{% for website in websites %}
    <p>{{ website }}</p>
{% endfor %}

六、繼承和block

（1）做用：能夠把一些公共的代碼放在父模板中，避免寫重複的代碼

1.語法

父模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    {%　block head　%}{% endblock %}
</head>
    <div>
        <h1>其餘照舊</h1>
    </div>

    {% block MainContainer %}{% endblock %}
<body>
</body>
</html>

子模板：

{% extends 'base.html %}

{% block title %}
    名字
{% endblock %}

{% block head %}
    <style>
        不一樣的風格文件
    </style>
    <link rel="stylesheet" href="">
    <script>不一樣的腳本文件</script>
{% endblock %}

{% block MainContainer %}
    <h1>這裏是寫具體內容的地方</h1>
{% endblock %}

selfprojectName.py中：

from flask import Flask,render_template

app = Flask(__name__)

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

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


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

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav-header {
            background: #3a3a3a;
            height: 65px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            list-style: none;
            padding: 0 10px;
            line-height: 65px;
        }
        ul li a{
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="nav-header">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">論壇</a> </li>
        </ul>
    </div>

    {% block MainContainer %}{% endblock %}
</body>
</html>

index.html 中

使用這個模板以後，全部的代碼必須寫到block裏面去！

{% extends 'base.html' %}

{% block MainContainer %}
    <p>這裏是首頁</p>
{% endblock %}

{% extends 'base.html' %}

{% block MainContainer %}
    <p>這裏是註冊頁面</p>
{% endblock %}

5、URL連接和加載靜態文件

通用語法：

url_for('static',filename='路徑')

1.url跳轉

 視圖函數中：

@app.route('/login/)
def login_function():
    return render_template('login.html')

方法一：
html文件裏面

<a href="/login/">點擊我</a>

方法二（推薦）：

html文件裏面

<a href="{{ url_for('login_function') }}">點擊我</a>

2.加載靜態文件

方法一：

html文件裏面

<link rel="stylesheet" href="static/css/index.css">

方法二（推薦）：

html文件裏面

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

加載圖片方法（推薦）：

html文件裏面：

<img src="{{ url_for('static',filename='images/logo.png') }}">

加載Js文件方法（推薦）：

html文件裏面：

<script src="{{ url_for('static',filename='js/index.js') }}">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。