文章
「Flask筆記」jinja2範本練習

「Flask筆記」jinja2範本練習

資源介紹參數
資源類別： Python
如遇問題： 聯繫客服/留言反饋

“「Flask筆記」jinja2範本練習

flask — jinja2範本練習

豆瓣微信小程式

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

寫出大致框架

  1. from flask import Flask,render_template,url_for
  3. app = Flask(__name__)
  5. @app.route('/')
  6. def index():
  7.     return render_template('index.html')
  9. if __name__ == '__main__':
  10.     app.run(debug=True)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ding</title>
  6. </head>
  7. <style>
  8.     *{
  9.         margin: 0;
  10.         padding: 0;
  11.         list-style:none;
  12.         text-decoration: none;
  13.     }
  14.     .container {
  15.         background: #fff;
  16.     }
  17.     .search-group{
  18.         padding: 34px 20px;
  19.         background: #41be57;
  20.     }
  21.     .search-group .search-input{
  22.         background: #fff;
  23.         display: block;
  24.         width: 100%;
  25.         height: 80px;
  26.         -webkit-border-radius: 5px;
  27.         -moz-border-radius: 5px;
  28.         border-radius: 5px;
  29.         outline: none;
  30.         border: 0;
  31.         text-align: center;
  32.         font-size: 30px;
  33.     }
  34.     /* 內容 */
  35.     .item-list-group .item-list-top{
  36.         overflow: hidden;
  37.         padding: 34px;
  38.     }
  39.     .item-list-top .module-title{
  40.         float: left;
  41.         font-size: 30px;
  42.     }
  43.     .item-list-top .more-btn{
  44.         float: right;
  45.         font-size: 30px;
  46.     }
  47.     .list-group{
  48.         overflow: hidden;
  49.         padding: 0 34px;
  50.     }
  51.    .item-group{
  52.         float: left;
  53.         margin-right: 30px;
  54.     }
  55.     .item-group{
  56.         width: 30%;
  57.     }
  58.     .item-group .thumbanail{
  59.         display: block;
  60.         width: 100%;
  61.     }
  62.     .item-group .item-title{
  63.         text-align: center;
  64.         font-size: 30px;
  65.     }
  66.     .item-group .item-rating{
  67.         text-align: center;
  68.         font-size: 30px;
  69.     }
  70. </style>
  71. <body>
  72.     <div class="container">
  73.         <div class="search-group">
  74.             <input type="text" class="search-input" placeholder="搜尋">
  75.         </div>
  76.         <div class="item-list-group">
  77.             <div class="item-list-top">
  78.                 <span class="module-title">電影</span>
  79.                 <a href="#" class="more-btn">更多</a>
  80.             </div>
  81.             <div class="list-group">
  82.                 <div class="item-group">
  83.                     <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp" alt="" class="thumbanail">
  84.                     <p class="item-title">死侍2</p>
  85.                     <p class="item-rating">7.4</p>
  86.                 </div>
  87.             </div>
  88.         </div>
  89.     </div>
  90. </body>
  91. </html>

用set實現星星評分

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

  1.   <div class="item-group">
  2.                     <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp" alt="" class="thumbanail">
  3.                     <p class="item-title">死侍2</p>
  4.                     <p class="item-rating">
  5.                         {% set rating = 7.4 %}  {# 暫時使用設置的值 #}
  6.                         {% set lights = ((rating|int)/2)|int %}
  7.                         {% set halfs = (rating|int)%2 %}
  8.                         {% set grays = 5 - lights - halfs %}
  9.                         {% for light in range(lights) %}
  10.                             <img class="score" src="{{ url_for('static',filename='img/pic1.png') }}" alt="">
  11.                         {% endfor %}
  12.                         {% for half in range(halfs) %}
  13.                             <img class="score" src="{{ url_for('static',filename='img/pic2.png') }}" alt="">
  14.                         {% endfor %}
  15.                         {% for gray in range(grays) %}
  16.                             <img class="score" src="{{ url_for('static',filename='img/pic3.png') }}" alt="">
  17.                         {% endfor %}
  18.                         7.4
  19.                     </p>
  20.                 </div>

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

  1. {% macro itemGroup(thumbnail,title,rating) %}
  2.       <div class="item-group">
  3.             <img src={{ thumbnail }} alt="" class="thumbanail">
  4.             <p class="item-title">{{ title }}</p>
  5.             <p class="item-rating">
  6.                 {% set lights = ((rating|int)/2)|int %}
  7.                 {% set halfs = (rating|int)%2 %}
  8.                 {% set grays = 5 - lights - halfs %}
  9.                 {% for light in range(lights) %}
  10.                     <img class="score" src="{{ url_for('static',filename='img/pic1.png') }}" alt="">
  11.                 {% endfor %}
  12.                 {% for half in range(halfs) %}
  13.                     <img class="score" src="{{ url_for('static',filename='img/pic2.png') }}" alt="">
  14.                 {% endfor %}
  15.                 {% for gray in range(grays) %}
  16.                     <img class="score" src="{{ url_for('static',filename='img/pic3.png') }}" alt="">
  17.                 {% endfor %}
  18.                 7.4
  19.             </p>
  20.       </div>
  21. {% endmacro %}
  22. ....
  23. <div class="list-group">
  24.      {{ itemGroup('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp','死侍2',8.5) }}
  25. </div>

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

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

  1. def content():
  2.     context = [
  3.         {
  4.             'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2545479945.webp',
  5.             'title':'死侍2',
  6.             'rating':8.5,
  7.         },
  8.         {
  9.             'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2543972440.webp',
  10.             'title':'掠食城市',
  11.             'rating':6.7,
  12.         },
  13.         {
  14.             'thumbnail':'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2542268337.webp',
  15.             'title':'家和萬事驚',
  16.             'rating':7.5,
  17.         },
  18.         {
  19.             'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2543631842.webp',
  20.             'title':'密室逃生',
  21.             'rating':7.3,
  22.         },
  23.         {
  24.             'thumbnail':'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544313786.webp',
  25.             'title':'白蛇：緣起',
  26.             'rating':8.0,
  27.         },
  28.         {
  29.             'thumbnail':'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541662397.webp',
  30.             'title':'大黃蜂',
  31.             'rating':7.1,
  32.         },
  33.     ]
  34.     return context

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

  1. from flask import Flask,render_template,url_for
  2. import content
  4. movies = content.content()
  5. app = Flask(__name__)
  7. @app.route('/')
  8. def index(): 
  9.     context ={   # **context只接收dict
  10.         'movies':movies
  11.     }
  12.     return render_template('index.html',**context)
  14. if __name__ == '__main__':
  15.     app.run(debug=True)

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

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

用同樣的方法加入tv

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

  1. {% macro listGroup(module_title,items) %}
  2.     <div class="item-list-top">
  3.         <span class="module-title">{{ module_title }}</span>
  4.         <a href="#" class="more-btn">更多</a>
  5.     </div>
  6.     <div class="list-group">
  7.          {% for item in items[0:3] %}
  8.             {{ itemGroup(item.thumbnail,item.title,item.rating) }}
  9.          {% endfor %}
  10.     </div>
  11. {% endmacro %}
  1. <div class="item-list-group">
  2.     {{ listGroup('電影',movies) }}
  3.     {{ listGroup('電視劇',tvs) }}
  4. </div>

宏的繼承和導入

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

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

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

  1. {# itemGroup的宏 #}
  3. {% macro itemGroup(thumbnail,title,rating) %}
  4.       <div class="item-group">
  5.             <img src={{ thumbnail }} alt="" class="thumbanail">
  6.             <p class="item-title">{{ title }}</p>
  7.             <p class="item-rating">
  8.                 {% set lights = ((rating|int)/2)|int %}
  9.                 {% set halfs = (rating|int)%2 %}
  10.                 {% set grays = 5 - lights - halfs %}
  11.                 {% for light in range(lights) %}
  12.                     <img class="score" src="{{ url_for('static',filename='img/pic1.png') }}" alt="">
  13.                 {% endfor %}
  14.                 {% for half in range(halfs) %}
  15.                     <img class="score" src="{{ url_for('static',filename='img/pic2.png') }}" alt="">
  16.                 {% endfor %}
  17.                 {% for gray in range(grays) %}
  18.                     <img class="score" src="{{ url_for('static',filename='img/pic3.png') }}" alt="">
  19.                 {% endfor %}
  20.                 7.4
  21.             </p>
  22.       </div>
  23. {% endmacro %}
  25. {# listGroup的宏 #}
  27. {% macro listGroup(module_title,items,category) %} 
  28. {# 這裡的category參數用來判斷是tv還是movies #}
  29.     <div class="item-list-top">
  30.         <span class="module-title">{{ module_title }}</span>
  31.         <a href="{{ url_for('item_list',category=category) }}" class="more-btn">更多</a>
  32.         {# 通過url_for，請求一個參數，如果是1，就返回電影，如果是2就返回tv #}
  33.     </div>
  34.     <div class="list-group">
  35.          {% for item in items[0:3] %}
  36.             {{ itemGroup(item.thumbnail,item.title,item.rating) }}
  37.          {% endfor %}
  38.     </div>
  39. {% endmacro %}

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

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

製作list頁面

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

  1. {% extends 'base.html' %}
  2. {% from 'macrros.html' import itemGroup %}
  4. {% block body %}
  5.     {% for item in items %}
  6.          {{ itemGroup(item.thumbnail,item.title,item.rating) }}
  7.     {% endfor %}
  8. {% 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...
聲明：本文為原創作品，版權歸作者所有。未經許可，不得轉載或用於任何商業用途。如若本站內容侵犯了原著者的合法權益，可聯繫我們進行處理。
flaskPython後端編程
猜你喜歡
0 條回復 A文章作者 M管理員
歡迎您，新朋友，感謝參與互動！
    暫無討論，說說你的看法吧

请输入验证码

请输入图片中的验证码
点击发送按钮获取验证码

取消
×
×
￥undefined
请打开手机使用微信扫码支付
「」
×

....支付确认中....

「」
×
支付金额

￥

undefined
×
积分支付
您当前的积分为0

检测到您未绑定微信账户，请先绑定微信

立刻绑定
确定
×

打开微信扫一扫

扫码并「关注我们的公众号」安全快捷登录

×

下载海报：