flask系列三之Jinja2模板

本文轉載自查看原文 2018-02-27 11:27 1224 Flask

1、如何渲染模板

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

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

2、模板傳參

（1）如果只有一個或者少量參數，直接在render_template函數中添加關鍵字參數就可以了。

（2）如果有多個參數的時候，那么可以先把所有的參數放在字典中，然后在render_template中，使用兩個星號，把字典轉換成關鍵參數傳遞進去，這樣的代碼更方便管理和使用。

（1）變量語法

在HTML文件中

{{ params }}

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

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

selfprojectName.py中：

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

（3）很多的參數（特殊的方法傳參）

（1）如果只有一個或者少量參數，直接在render_template函數中添加關鍵字參數就可以了。

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>
</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)

3、過濾器

過濾器簡單理解：

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

過濾器的作用對象是變量

（1）語法

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

（2）default過濾器

實例一（沒有過濾器）：

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)：計算一個長字符串中單詞的個數。

4、if判斷

（1）語法

{% if xxx %} {% else %} {% endif %}

5、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 %}

6、繼承和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 %}

五、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') }}">

免責聲明！

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

猜您在找 Flask（8）- jinja2 模板入門【Flask】 Jinja2模板語言 Flask筆記：Jinja2模板 Flask 的 template模板與 jinja2語法 Flask入門模板Jinja2語法與函數(四) Jinja2模板基本語法 flask模板應用-javaScript和CSS中jinja2 -- Flask（Jinja2）服務端模板注入漏洞(SSTI) flask jinja2 語法——變量、控制結構及模板繼承 Flask - 模板語言jinja2 和render_template高級用法