文章
文章文檔更新日誌
「Flask筆記」jinja2範本練習

「Flask筆記」jinja2範本練習

資源介紹參數
資源類別： Python
如遇問題： 聯繫客服/留言反饋
釋放雙眼，帶上耳機，聽聽看~！

“「Flask筆記」jinja2範本練習

目錄 隱藏
1. flask — jinja2範本練習
1.1. 寫出大致框架
1.2. 用set實現星星評分
1.3. 重構代碼，將item-group抽取做為宏
1.4. 使用循環，並且模擬後台傳值
1.5. 重構代碼，將list-group抽取做為宏
1.6. 宏的繼承和導入
1.7. 製作list頁面
1.8. 相關文章：

flask — jinja2範本練習

豆瓣微信小程式

GitHub傳送門
(可以拿這裡的content.py這樣不用自己構造數據了)，有建議和不足的地方拜託師傅們指出！！！

寫出大致框架

from flask import Flask,render_template,url_for

app = Flask(__name__)

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ding</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style:none;
        text-decoration: none;
    }
    .container {
        background: #fff;
    }
    .search-group{
        padding: 34px 20px;
        background: #41be57;
    }
    .search-group .search-input{
        background: #fff;
        display: block;
        width: 100%;
        height: 80px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        outline: none;
        border: 0;
        text-align: center;
        font-size: 30px;
    }
    /* 內容 */
    .item-list-group .item-list-top{
        overflow: hidden;
        padding: 34px;
    }
    .item-list-top .module-title{
        float: left;
        font-size: 30px;
    }
    .item-list-top .more-btn{
        float: right;
        font-size: 30px;
    }
    .list-group{
        overflow: hidden;
        padding: 0 34px;
    }
   .item-group{
        float: left;
        margin-right: 30px;
    }
    .item-group{
        width: 30%;
    }
    .item-group .thumbanail{
        display: block;
        width: 100%;
    }
    .item-group .item-title{
        text-align: center;
        font-size: 30px;
    }
    .item-group .item-rating{
        text-align: center;
        font-size: 30px;
    }
</style>
<body>
    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input" placeholder="搜尋">
        </div>
        <div class="item-list-group">
            <div class="item-list-top">
                <span class="module-title">電影</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="list-group">
                <div class="item-group">
                    <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp" alt="" class="thumbanail">
                    <p class="item-title">死侍2</p>
                    <p class="item-rating">7.4</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

用set實現星星評分

這裡為了鞏固知識點用的set開發的時候可以使用外掛或者雪碧圖之類的

  <div class="item-group">
                    <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp" alt="" class="thumbanail">
                    <p class="item-title">死侍2</p>
                    <p class="item-rating">
                        {% set rating = 7.4 %}  {# 暫時使用設置的值 #}
                        {% set lights = ((rating|int)/2)|int %}
                        {% set halfs = (rating|int)%2 %}
                        {% set grays = 5 - lights - halfs %}
                        {% for light in range(lights) %}
                            <img class="score" src="{{ url_for('static',filename='img/pic1.png') }}" alt="">
                        {% endfor %}
                        {% for half in range(halfs) %}
                            <img class="score" src="{{ url_for('static',filename='img/pic2.png') }}" alt="">
                        {% endfor %}
                        {% for gray in range(grays) %}
                            <img class="score" src="{{ url_for('static',filename='img/pic3.png') }}" alt="">
                        {% endfor %}
                        7.4
                    </p>
                </div>

重構代碼，將item-group抽取做為宏

{% macro itemGroup(thumbnail,title,rating) %}
      <div class="item-group">
            <img src={{ thumbnail }} alt="" class="thumbanail">
            <p class="item-title">{{ title }}</p>
            <p class="item-rating">
                {% set lights = ((rating|int)/2)|int %}
                {% set halfs = (rating|int)%2 %}
                {% set grays = 5 - lights - halfs %}
                {% for light in range(lights) %}
                    <img class="score" src="{{ url_for('static',filename='img/pic1.png') }}" alt="">
                {% endfor %}
                {% for half in range(halfs) %}
                    <img class="score" src="{{ url_for('static',filename='img/pic2.png') }}" alt="">
                {% endfor %}
                {% for gray in range(grays) %}
                    <img class="score" src="{{ url_for('static',filename='img/pic3.png') }}" alt="">
                {% endfor %}
                7.4
            </p>
      </div>
{% endmacro %}
....
<div class="list-group">
     {{ itemGroup('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp','死侍2',8.5) }}
</div>

使用循環，並且模擬後台傳值

由於這裡還沒學到數據庫，所以模擬後台傳數據
先創建一個content.py，傳數據到主函式

def content():
    context = [
        {
            'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp',
            'title':'死侍2',
            'rating':8.5,
        },
        {
            'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2543972440.webp',
            'title':'掠食城市',
            'rating':6.7,
        },
        {
            'thumbnail':'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2542268337.webp',
            'title':'家和萬事驚',
            'rating':7.5,
        },
        {
            'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2543631842.webp',
            'title':'密室逃生',
            'rating':7.3,
        },
        {
            'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544313786.webp',
            'title':'白蛇：緣起',
            'rating':8.0,
        },
        {
            'thumbnail':'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.webp',
            'title':'大黃蜂',
            'rating':7.1,
        },
    ]
    return context

主函式導入模塊，接收數據

from flask import Flask,render_template,url_for
import content

movies = content.content()
app = Flask(__name__)

@app.route('/')
def index(): 
    context ={   # **context只接收dict
        'movies':movies
    }
    return render_template('index.html',**context)

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

將抽取的宏用for循環輸出item

 <div class="list-group">
     {% for movie in movies[0:3] %}
     #因為首頁只需要遍歷三個所以用切片遍歷前三個
        {{ itemGroup(movie.thumbnail,movie.title,movie.rating) }}
     {% endfor %}
</div>

用同樣的方法加入tv

重構代碼，將list-group抽取做為宏

{% macro listGroup(module_title,items) %}
    <div class="item-list-top">
        <span class="module-title">{{ module_title }}</span>
        <a href="#" class="more-btn">更多</a>
    </div>
    <div class="list-group">
         {% for item in items[0:3] %}
            {{ itemGroup(item.thumbnail,item.title,item.rating) }}
         {% endfor %}
    </div>
{% endmacro %}

<div class="item-list-group">
    {{ listGroup('電影',movies) }}
    {{ listGroup('電視劇',tvs) }}
</div>

宏的繼承和導入

再做列表頁之前，觀察頁面，列表頁的搜尋框和其他標籤，都和首頁一樣，所以抽取相同的地方做宏
創建一個叫base.html的範本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}"> 
    {# 這裡把搜尋框的css抽出來做一個css文件，下面的是列表的css #}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input" placeholder="搜尋">
        </div>
        {% block body %}{% endblock %}
    </div>
</body>
</html>

然後再把之間做了listGroup和itemGroup兩個宏放到一個宏範本中叫做macrros.html

{# itemGroup的宏 #}

{% macro itemGroup(thumbnail,title,rating) %}
      <div class="item-group">
            <img src={{ thumbnail }} alt="" class="thumbanail">
            <p class="item-title">{{ title }}</p>
            <p class="item-rating">
                {% set lights = ((rating|int)/2)|int %}
                {% set halfs = (rating|int)%2 %}
                {% set grays = 5 - lights - halfs %}
                {% for light in range(lights) %}
                    <img class="score" src="{{ url_for('static',filename='img/pic1.png') }}" alt="">
                {% endfor %}
                {% for half in range(halfs) %}
                    <img class="score" src="{{ url_for('static',filename='img/pic2.png') }}" alt="">
                {% endfor %}
                {% for gray in range(grays) %}
                    <img class="score" src="{{ url_for('static',filename='img/pic3.png') }}" alt="">
                {% endfor %}
                7.4
            </p>
      </div>
{% endmacro %}

{# listGroup的宏 #}

{% macro listGroup(module_title,items,category) %} 
{# 這裡的category參數用來判斷是tv還是movies #}
    <div class="item-list-top">
        <span class="module-title">{{ module_title }}</span>
        <a href="{{ url_for('item_list',category=category) }}" class="more-btn">更多</a>
        {# 通過url_for，請求一個參數，如果是1，就返回電影，如果是2就返回tv #}
    </div>
    <div class="list-group">
         {% for item in items[0:3] %}
            {{ itemGroup(item.thumbnail,item.title,item.rating) }}
         {% endfor %}
    </div>
{% endmacro %}

根據上面的分析重構index.html

{% extends 'base.html' %}
{% from "macrros.html" import listGroup,itemGroup %}
{% block body %}
    <div class="item-list-group">
        {{ listGroup('電影',movies,1) }}
        {{ listGroup('電視劇',tvs,2) }}
    </div>
{% endblock %}

製作list頁面

這裡可以使用宏範本和繼承，快速完成list頁

{% extends 'base.html' %}
{% from 'macrros.html' import itemGroup %}

{% block body %}
    {% for item in items %}
         {{ itemGroup(item.thumbnail,item.title,item.rating) }}
    {% endfor %}
{% endblock %}

大致就這樣，第一個flask的jinja2練習,可能有遺漏的地方，建議看源碼。。。

相關文章：

  1. 「Flask筆記」 URL知識點總結：flask – 第一個flask程式。本來打算新開一篇，但是太短了，就整合到這裡了第一個flask程式。其中config文件時從配置文件中開啟debug也可以在app.run(debug=True)這樣開啟debug因為後期鏈接數據庫的配置卸載config中，所以這裡使用配置文件開啟debug。...
  2. 「Flask筆記」 jinja2範本總結：flask – jinja2範本範本導入在項目根目錄下創建一個templates目錄，flask會自動在這裡尋找範本如果不想把範本放在這個目錄下的話，那麼可以在初始化flask的時候指定template_folder來指定範本的路徑範本傳遞參數使用render_template渲染範本的時候可以傳遞關鍵字...
  3. 「Flask筆記」 jinja2範本之篩選器：「Flask筆記」 jinja2範本之篩選器。flask – jinja2範本之篩選器需要對傳入範本的變數做一些處理的時候，那麼就可以用到篩選器。語法:{{var | 篩選器名稱}},使用管道符連接常用篩選器abs(value):返回一個數值的絕對值。例如:-1|abs。...
  4. 「Flask筆記」 jinjia2 範本之控制語句：「Flask筆記」 jinjia2 範本之控制語句，flask – jinja2範本之控制語句if語句語法{% if 判斷條件 %}.....{% elif 判斷條件 %}.....{% else %}.....{% endif %}{%...
  5. 「Flask筆記」 sql基本操作：數據庫選擇mysql，先安裝相關的包 在虛擬環境下運行 pip3 install SQLAlchemy pip3 install pymysql 連接數據庫 連接數據庫 這裡使用配置文件的方法返回 #setting.py def conn(): HOSTNAME...
  6. 「Flask筆記」 藍圖：flask -- 藍圖 使用藍圖 藍圖可以用來將項目分塊，使項目結構更清晰，方便項目管理 #test/blue.py from flask import Blueprint test = Blueprint('test',__name__) @test.route('/test/') def...
聲明：本文為原創作品，版權歸作者所有。未經許可，不得轉載或用於任何商業用途。如若本站內容侵犯了原著者的合法權益，可聯繫我們進行處理。

給TA打賞
共{{data.count}}人
人已打賞
flaskPython後端編程
猜你喜歡
0 條回復 A文章作者 M管理員
    暫無討論，說說你的看法吧