python中的flask框架Jinja?模板入門教程

更新時間：2022年04月11日 14:58:22 作者：beautifulzzzz

這篇文章主要介紹了?python中的flask框架Jinja?模板入門,Jinja?模板其實是?html?文件，一般情況下放在?Flask?工程的?/templates?目錄下，對python?flask?Jinja?模板相關(guān)知識感興趣的朋友一起看看吧

1、快速體驗

跑下面的各種 demo 之前，確保你已經(jīng)安裝了 Jinja (pip install jinja2)

>>> from jinja2 import Template
>>> t = Template("Hello {{ something }}!")
>>> t.render(something="World")
u'Hello World!'

>>> t = Template("My favorite numbers: {% for n in range(1,10) %}{{n}} " "{% endfor %}")
>>> t.render()
u'My favorite numbers: 1 2 3 4 5 6 7 8 9 '

這個 demo 展示了模板中的變量（表達式）是如何最終被替換和渲染的。

2、Flask 最小 DEMO

整個的參考代碼可以在這里獲得：HERE

不過博主建議按照下面步驟一步步來：

1）安裝 flask

?  pip install flask

2）創(chuàng)建工程目錄結(jié)構(gòu)：

?  mkdir flask_example
?  cd flask_example 
?  mkdir templates
?  cd ..
?  touch run.py
?  touch requirements.txt

3）編寫 run.py

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def template_test():
    return render_template('template.html', my_string="Wheeeee!", my_list=[0,1,2,3,4,5])
if __name__ == '__main__':
    app.run(debug=True)

這里，我們創(chuàng)建了一個 / 路由，當我們訪問服務(wù)器根路由時，會通過 render_template 將 template.html 渲染，其中 my_string 和 my_list 就是準備傳給模板的實際的值。

4）編寫 template.html 模板

在 templates 目錄下，創(chuàng)建一個 template.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Flask Template Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link  rel="stylesheet" media="screen">
    <style type="text/css">
      .container {
        max-width: 500px;
        padding-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>My string: {{my_string}}</p>
      <p>Value from the list: {{my_list[3]}}</p>
      <p>Loop through the list:</p>
      <ul>
        {% for n in my_list %}
        <li>{{n}}</li>
        {% endfor %}
      </ul>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

5）運行觀察效果

?  python run.py

效果如下：

可以看到，將模板中的 my_string、my_list[3] 替換掉了，并且用 for 循環(huán)語句，生成了一個 list。

3、模板繼承

模板通常利用繼承，繼承包括定義所有后續(xù)子模板基本結(jié)構(gòu)的單個基礎(chǔ)模板。您可以使用標記 {% extends %} 和 {% block %} 來實現(xiàn)繼承。

這樣做的用例很簡單：隨著應(yīng)用程序的增長，以及您繼續(xù)添加新模板，您將需要保持公共代碼（如HTML導(dǎo)航欄、Javascript庫、CSS樣式表等）同步，這可能需要大量工作。使用繼承，我們可以將這些公共部分移動到父/基模板，這樣我們就可以創(chuàng)建或編輯這樣的代碼一次，所有子模板都將繼承該代碼。

注意：您應(yīng)該總是盡可能多地向基本模板添加重復(fù)代碼，以節(jié)省將來的時間，這將遠遠超過初始時間投資。

讓我們給我們的 DEMO 增加模板：

1）創(chuàng)建基礎(chǔ)模板（保存為 layout.html）

<!DOCTYPE html>
<html>
  <head>
    <title>Flask Template Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link  rel="stylesheet" media="screen">
    <style type="text/css">
      .container {
        max-width: 500px;
        padding-top: 100px;
      }
      h2 {color: red;}
    </style>
  </head>
  <body>
    <div class="container">
      <h2>This is part of my base template</h2>
      <br>
      {% block content %}{% endblock %}
      <br>
      <h2>This is part of my base template</h2>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

你注意到 {%block%} 標記了嗎？這定義了子模板可以填充的塊或區(qū)域。此外，也可實現(xiàn)覆蓋的作用。

2）用模板更新 template.html：

{% extends "layout.html" %}
{% block content %}
  <h3> This is the start of my child template</h3>
  <br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
    {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %}
  </ul>
  <h3> This is the end of my child template</h3>
{% endblock %}

這樣 layout.html 模板中的 content 塊就會被 template.html 中的新定義給替換掉，最終效果如下：

那么，我們就可以通過修改 layout.html 給其添加通用導(dǎo)航欄了：（將下列代碼插入到 layout.html 的 <body> 標簽之后）

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Jinja!</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

現(xiàn)在，從基礎(chǔ)擴展的每個子模板都將具有相同的導(dǎo)航欄。借用Java哲學(xué)的一句話："Write once, use anywhere."

4、Super Blocks

如果需要從基礎(chǔ)模板渲染塊，使用 super block：

{{ super() }}

給基礎(chǔ)模板增加一個頁腳：

<body>
<div class="container">
 ...
  <h2>This is part of my base template</h2>
  <br>
  <div class="footer">
    {% block footer %}
      Watch! This will be added to my base and child templates using the super powerful super block!
      <br>
      <br>
      <br>
    {% endblock %}
  </div>
</div>
...

此時，我們可以給 template.html 增加 super block，從而實現(xiàn)子模板復(fù)用父模板中的塊：

{% extends "layout.html" %}
{% block content %}
  <h3> This is the start of my child template</h3>
  <br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
    {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %}
  </ul>
  <h3> This is the end of my child template</h3>
  {% block footer %}
  {{super()}}
  {% endblock %}
{% endblock %}

效果如下：

super block 用于模塊共享父模塊的 block，當然還有一些高級玩法，比如下面的例子：

父模板：

{% block heading %}
  <h1>{% block page %}{% endblock %} - Flask Super Example</h1>
{% endblock %}

子模板：

{% block page %}Home{% endblock %}
{% block heading %}
  {{ super() }}
{% endblock %}

這樣當訪問子模塊時，會拼接一個 <h1>Home - Flask Super Example</h1> 字段。發(fā)現(xiàn)沒，我們通過這樣的方法，實現(xiàn)了標題的繼承（有一定的繼承，也有一定的子模塊自己的信息）。

回歸正軌，對于更新標題，我們這里這樣設(shè)計（修改 template.html 中的兩行代碼）

{% block title %}{{title}}{% endblock %}
...
{% block page %}{{title}}{% endblock %}

這樣我們可以通過 python 進來直接修改標題了（修改 run.py）:

@app.route("/")
def template_test():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="Home")

5、Macros

在 Jinja 中，我們可以使用宏來抽象常用的代碼段，這些代碼段被反復(fù)使用以避免重復(fù)。例如，通常會在導(dǎo)航欄上突出顯示當前頁面的鏈接（活動鏈接）。否則，我們必須使用 if/elif/else 語句來確定活動鏈接。使用宏，我們可以將這些代碼抽象成一個單獨的文件。

新增一個 macros.html 文件：

{% macro nav_link(endpoint, name) %}
{% if request.endpoint.endswith(endpoint) %}
  <li class="active"><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
{% else %}
  <li><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
{% endif %}
{% endmacro %}

這里，我們使用了 Flask 的 request object（Jinja 的默認一部分），用來檢查請求端點，然后將活動 class 分配給該端點。

使用基礎(chǔ)模板中的nav navbar nav類更新無序列表：

<ul class="nav navbar-nav">
  {{ nav_link('home', 'Home') }}
  {{ nav_link('about', 'About') }}
  {{ nav_link('contact', 'Contact Us') }}
</ul>

此外，請確保在模板頂部添加導(dǎo)入：{% from "macros.html" import nav_link with context %}

最后，讓我們向控制器添加三個新端點：

@app.route("/home")
def home():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="Home")

@app.route("/about")
def about():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="About")

@app.route("/contact")
def contact():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="Contact Us")

刷新頁面。測試頂部的鏈接。當前頁面是否突出顯示？(每次點擊 Home, About, Contact Us，瀏覽器會自動跳轉(zhuǎn)到對應(yīng)的 url，并加載頁面)

6、自定義過濾器

Jinja 使用過濾器修改變量，主要用于格式化目的。

這有個例子；

{{ num | round }}

這將使 num 變量四舍五入。因此，如果我們將參數(shù) num=46.99 傳遞到模板中，那么將輸出47.0。(把大括號中的語句當做 shell，就明白了，豎線是傳遞作用，round是個過濾器，這里是所有的過濾器)

再來個例子：

{{ list|join(', ') }}

可以給 list 數(shù)組中的變量加個逗號。

其實，除了自帶的過濾器，我們也可以自定義：

1）在 run.py 的所有函數(shù)前增加 app = Flask(__name__) 用于創(chuàng)建一個 app
2）增加一個 datetimefilter 函數(shù)，并將其注冊到 app 的過濾器

@app.template_filter() # 聲明，這是個過濾器
def datetimefilter(value, format='%Y/%m/%d %H:%M'):
    """Convert a datetime to a different format."""
    return value.strftime(format)

app.jinja_env.filters['datetimefilter'] = datetimefilter

3）這樣，我們在子模板中插入如下代碼：

<h4>Current date/time: {{ current_time | datetimefilter }}</h4>

4）最后，只要在 python 中將時間傳入模板即可：

current_time = datetime.datetime.now()

5）效果如下：

7、結(jié)論

這樣，就送大家快速入門了 Jinja，源碼：https://github.com/mjhea0/thinkful-mentor/tree/master/python/jinja/flask_example

參考鏈接

[1]. 本文源碼
 [2]. Primer on Jinja Templating（本文翻譯并參考這篇）
[3]. Flask 官方文檔
 [4]. 真正搞明白Python中Django和Flask框架的區(qū)別
 [5]. Flask 主頁
 [6]. 一個 Soft UI Dashboard - Free Jinja Template
[7]. Appseed 這個網(wǎng)站有很多 Flask 模板
 [8]. Nginx 服務(wù)器 SSL 證書安裝部署
 [9]. python django web 開發(fā) —— 15分鐘送到會用（只能送你到這了）

到此這篇關(guān)于python中的flask框架Jinja 模板入門的文章就介紹到這了,更多相關(guān)python flask Jinja 模板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

python中的flask框架Jinja?模板入門教程

目錄

1、快速體驗

2、Flask 最小 DEMO

3、模板繼承

4、Super Blocks

5、Macros

6、自定義過濾器

7、結(jié)論

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

python中的flask框架Jinja?模板入門教程

目錄

1、快速體驗

2、Flask 最小 DEMO

3、模板繼承

4、Super Blocks

5、Macros

6、自定義過濾器

7、結(jié)論

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1、快速體驗

2、Flask 最小 DEMO

7、結(jié)論