flask實踐之“盜版豆瓣評分小程式完整版”

LCY133發表於2020-10-23

注：遠離渾身散發負能量的人，多與正能量爆棚的人交流，最近真的是找到原因了
在本文中，進行了小程式的優化，加入了一些巨集操作，加入更多選項，可以通過點選更多進入更復雜的頁面。將一個完整的程式，分為多個小的子程式，使程式的邏輯更加清晰。
一個好的方法：“ctrl+shift+r” 在載入出來網頁後，可以通過此方式清快取，但是：有些網頁一旦這樣清快取就不能再將檔案載入出來了。

關於巨集操作：
定義巨集：在本檔案中定義巨集的位置是在檔案macro.html中，

{% macro itemGroup(thumbnail, title, rating)%}
    <!--  圖片 星星  標題的巨集  -->
        <div class="item-group">
            <img src="{{ thumbnail }}" alt="" class="thumbnail">
            <p class="item-title">{{ title }}</p>
            <p class="item-rating">
                {% set lights = ((rating|int)/2)|int %}
                {% set halflight =  (rating|int)%2 %}
                {% set grays = 5 - lights - halflight %}
                {% for light in range(0, lights)%}
                <img src="{{url_for('static', filename='images/rate_light.png')}}" alt="">
                {% endfor %}
                {% for half in range(0, halflight)%}
                <img src="{{url_for('static', filename='images/rate_half.jpg')}}" alt="">
                {% endfor %}
                {% for gray in range(0, grays)%}
                <img src="{{url_for('static', filename='images/rate_gray.png')}}" alt="">
                {% endfor %}
                {{ rating }}
            </p>
        </div>
    {% endmacro %}

使用巨集：

{{ itemGroup(item.thumbnail, item.title, item.rating) }}

模板的繼承 extends block：
在基類中定義：

<title>{% block Title %}
    {% endblock %}</title>

使用該基類中的block

{% extends  'base.html' %}
{% block Title %}
    電影
{% endblock %}

完整程式碼：
定義巨集的檔案，巨集檔案macro.html顯示如下，在該檔案中定義了兩個巨集itemGroup和listGroup：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% macro itemGroup(thumbnail, title, rating)%}
    <!--  圖片 星星  標題的巨集  -->
        <div class="item-group">
            <img src="{{ thumbnail }}" alt="" class="thumbnail">
            <p class="item-title">{{ title }}</p>
            <p class="item-rating">
                {% set lights = ((rating|int)/2)|int %}
                {% set halflight =  (rating|int)%2 %}
                {% set grays = 5 - lights - halflight %}
                {% for light in range(0, lights)%}
                <img src="{{url_for('static', filename='images/rate_light.png')}}" alt="">
                {% endfor %}
                {% for half in range(0, halflight)%}
                <img src="{{url_for('static', filename='images/rate_half.jpg')}}" alt="">
                {% endfor %}
                {% for gray in range(0, grays)%}
                <img src="{{url_for('static', filename='images/rate_gray.png')}}" alt="">
                {% endfor %}
                {{ rating }}
            </p>
        </div>
    {% endmacro %}

    {% macro listGroup(module_title, items, category=category) %}
    <div class="item-list-group">
            <div class="item-list-top">
                <span class="module-title">{{ module_title }}</span>
                <a href="{{ url_for('movie_list', category=category) }}" class="more-btn">更多</a>
            </div>
            <div class="list-group">
                {% for item in items[0:3] %}
<!--        呼叫巨集itemGroup        -->
                {{ itemGroup(item.thumbnail, item.title, item.rating) }}
                {% endfor %}
            </div>
        </div>
    {% endmacro %}
</body>
</html>

基類檔案base,定義檔案頭部尾部，引入巨集檔案中的itemGroup listGroup
在body中使用content模組，

{% from 'macro.html' import itemGroup,listGroup %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block Title %}
    {% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/item.css') }}">
</head>
<body>
    {% block header_title %}
    <h1>豆瓣小程式評分</h1>
    {% endblock %}
    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input">
        </div>
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

子程式引入基類程式中的內容，是實現頁面主要功能的程式碼：
index.html

{% extends  'base.html' %}

{% block header_title %}
    <h1>豆瓣小程式評分</h1>
{% endblock %}

{% block content %}
    {{ listGroup('電影',movies,1) }}
<hr>
    {{ listGroup('電視劇',tvs,2) }}
{% endblock %}

實現“更多”部分的程式碼： list.html

{% extends  'base.html' %}
{% block Title %}
    電影
{% endblock %}

{% block header_title %}
    <h1>電影</h1>
{% endblock %}

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

python檔案匯入引數實現功能：

#! C:\Python\Python36
# -*- coding: utf-8 -*-
# @Time : 2020/10/20 14:00
# @Author : liuchengyong
# @File : douban.py
# @Software: PyCharm
from flask import Flask,render_template,url_for,request

app = Flask(__name__)
# 電影
movies = [
    {
        'id': '11211',
        'thumbnail': 'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499792043.webp',
        'title': u'王牌特工2：黃金圈',
        'rating': u'7.3',
        'comment_count': 12000,
        'authors': u'科林·費爾斯 / 塔倫·埃格頓 / 朱麗安·摩爾'
    },
    {
        'id': '34532',
        'title': u'羞羞的鐵拳',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2499793218.webp',
        'rating': u'7.6',
        'comment_count': 39450,
        'authors': u'艾倫/馬麗/沈騰'
    },
    {
        'id': '394558',
        'title': u'情聖',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2409022364.jpg',
        'rating': u'6.3',
        'comment_count': 38409,
        'authors': u'肖央 / 閆妮 / 小瀋陽'
    },
    {
        'id': '9384089',
        'title': u'全球風暴',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501863104.webp',
        'rating': u'7.4',
        'comment_count': 4555,
        'authors': u'傑拉德·巴特勒/吉姆·斯特'
    },
    {
        'id': '26921827',
        'title': u'大衛貝肯之倒黴特工熊',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2408893200.jpg',
        'rating': u'4.3',
        'comment_count': 682,
        'authors': u'湯水雨 / 徐佳琪 / 楊默'
    },
    {
        'id': '26287884',
        'title': u'追龍',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499052494.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'查理茲·塞隆 / 阿特·帕金森 / 拉爾夫·費因斯'
    }
]
#電視劇
tvs = [
    {
        'id': '235434',
        'title': u'鬼吹燈之精絕古城',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2404604903.jpg',
        'rating': u'8.4',
        'comment_count': 49328,
        'authors': u'靳東 / 陳喬恩 / 趙達 / 付枚 / 金澤灝 /'
    },
    {
        'id': '9498327',
        'title': u'孤芳不自賞',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2407425119.jpg',
        'rating': u'3.7',
        'comment_count': 8493,
        'authors': u'鍾漢良 / 楊穎 / 甘婷婷 / 孫藝洲 / 亓航 /'
    },
    {
        'id': '26685451',
        'title': u'全球風暴',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501769525.webp',
        'rating': u'8.2',
        'comment_count': 345,
        'authors': u' 盧克·崔德威 / 瓊安·弗洛加特 / 露塔·格德米納斯 / 安東尼·海德 / 卡羅琳·古多爾 /'
    },
    {
        'id': '235434',
        'title': u'其他人',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2371503632.jpg',
        'rating': u'7.6',
        'comment_count': 25532,
        'authors': u'傑西·普萊蒙 / 莫莉·香儂 / 布萊德利·惠特福德 / Maude Apatow / 麥迪遜·貝蒂 /'
    },
    {
        'id': '48373095',
        'title': u'全員單戀',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg',
        'rating': u'6.4',
        'comment_count': 2483,
        'authors': u'伊藤沙莉 / 中川大志 / 上原實矩 / 森繪梨佳 / 櫻田通 /'
    },
    {
        'id': '292843',
        'title': u'廢紙板拳擊手',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2380194237.jpg',
        'rating': u'8.2',
        'comment_count': 23456,
        'authors': u'托馬斯·哈登·丘奇 / 泰倫斯·霍華德 / 波伊德·霍布魯克 / 瑞斯·維克菲爾德 / 馬爾洛·托馬斯 /'
    }
]

@app.route('/')
def hello():
    context = {
        'movies':movies,
        'tvs':tvs
    }
    return render_template('index.html',**context)

@app.route('/list/')
def movie_list():
    items = None
    category = int(request.args.get('category'))
    print(type(category))
    if category == 1:
        items = movies
    else:
        items = tvs
    return render_template('list.html',items = items)

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

邊做邊學入門微信小程式之仿豆瓣評分
2018-03-23
微信小程式
微信小程式實現星星評分效果
2018-12-15
微信小程式
程式設計實踐（評註版）評註者序
2011-07-22
程式設計
小程式之豆瓣電影原始碼解讀
2017-01-20
原始碼
flask實踐
2020-10-29
Flask
python爬蟲實踐: 豆瓣小組命令列客戶端
2019-02-16
Python爬蟲命令列客戶端
小程式TodoList實踐
2019-03-03
【小程式】微信小程式開發實踐
2016-11-07
微信小程式
小程式實踐小坑小結（一）
2018-08-02
小程式優化實踐
2018-11-29
優化
小程式初實踐總結
2019-12-30
小程式分屏載入實踐
2019-03-02
微信小程式實踐_1前言
2017-10-16
微信小程式
視訊：豆瓣資料架構實踐DX
2022-03-21
架構
豆瓣短評榜單短評下載
2024-08-11
【微信小程式】掃碼付小程式優化實踐
2019-03-01
微信小程式優化
《Django入門與實踐教程》完整版
2019-01-09
Django
小程式外賣專案實踐之-左右選單聯動
2018-11-09
【微信小程式專案實踐總結】30分鐘從陌生到熟悉
2018-08-13
微信小程式
小程式開發實踐總結
2018-08-22
微信小程式入門與實踐
2018-04-26
微信小程式
微信小程式的思考與實踐
2017-01-15
微信小程式
Flask——分頁
2019-08-24
Flask
京東購物小程式cookie方案實踐
2020-01-10
Cookie
小程式接入NPM包開發實踐
2019-03-17
NPM
「輕算賬」小程式實踐筆記
2018-11-28
筆記
Mpvue 小程式轉 Web 實踐總結
2018-03-26
VueWeb
微信小程式模組化開發實踐
2017-01-03
微信小程式
倉庫管理實踐之ABC分類法
2015-01-06
重寫Hexo豆瓣影評外掛
2020-12-15
Hexo
Nginx 優化與防盜鏈實踐教程
2017-03-25
Nginx優化
《Python高階程式設計（第2版）》之語法最佳實踐
2017-09-28
Python程式設計
Vue全家桶實現還原豆瓣電影wap版
2017-04-23
Vue
評書：《美團機器學習實踐》
2018-12-08
機器學習
微信小程式Video元件實踐總結
2019-01-28
微信小程式IDE元件
微信小程式授權登入最佳實踐
2018-07-22
微信小程式
Taro | 高效能小程式的最佳實踐
2023-12-21
攜程小程式內嵌webview實踐指南
2023-04-13
WebView

flask實踐之“盜版豆瓣評分小程式 完整版”

相關文章

flask實踐之“盜版豆瓣評分小程式完整版”