Web後端學習筆記Flask（3）模板實例

豆瓣微信小程序：

在代碼調試的過程中，一般css文件不生效，可以按照以下的方法檢查：

1. 如果遇到修改的CSS文件不能生效，首先需要檢查，css文件路徑，以及css選擇器書寫是否正確

2. 設置瀏覽器，打開瀏覽器的開發者模式 (F12)，將network下的Disable cache 選項勾選上

3. 重啓服務試一下

小程序頁面如下圖所示：（首頁和詳情頁）

通過點擊首頁的更多按鈕，可以跳轉至電影頁面和電視劇詳情頁面

base_template：是父模板，首頁以及詳情頁都是繼承自父模板

index ：是首頁

item_list ：是詳情頁

macro_file：是定義的宏，用於展示電影以及電視劇，這部分定義爲宏可以實現服用

init_css.css：用於初始化css的樣式

具體的代碼如下：
1. 定義的宏

macro_file.html

<!--存放所有的宏-->
{% macro moive_item(post_path, moive_title, moive_rating) %}
    <div id="item">
        <img src="{{ post_path }}" alt="">
        <span>{{ moive_title }}</span>
        <span>
            {% set rating = moive_rating %}
            {% set light_star = ((rating|int)/2|int)|int %}
            {% set half_light = (rating|int)%2 %}
            {% set gray_star = 5-light_star - half_light %}
            {% for light in range(0,light_star) %}
                <img src="{{ url_for('static', filename='images/rate_light.png') }}" alt="" class="rating-star">
            {% endfor %}

            {% for half_light in range(0, half_light) %}
                <img src="{{ url_for('static', filename='images/rate_half.jpg') }}" alt="" class="rating-star">
            {% endfor %}

            {% for gray in range(0, gray_star) %}
                <img src="{{ url_for('static', filename='images/rate_gray.png') }}" alt="" class="rating-star">
            {% endfor %}
            <p>{{ rating }}</p>
        </span>
    </div>
{% endmacro %}

這段html代碼中，有根據電影的評分計算星的數量，一顆星代表兩分，電影評分的滿分爲10分

宏的樣式 macro_file.css文件：（宏最好以id來尋找標籤）

#item
{
    width: 110px;
    height: 190px;
    background: white;
    margin: 15px 0 0 0;
    float: left;
    cursor: pointer;
    position: relative;
    transition: 0.5s;
}

#item:hover{
    top: -3px;
    box-shadow: 0 3px 10px 3px darkgray;
}


 #item img{
    width: 100px;
    height: 140px;
    margin: 0 auto;
    margin-top: 5px;
}

 #item span:nth-of-type(1){
    display: block;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    color: black;
}

 #item span:nth-of-type(2){
    display: block;
    font-size: 8px;
    text-align: center;
    margin-top: 5px;
    color: #000;
    height: 20px;
    padding-left: 15px;
}

 #item span img.rating-star
{
    width: 10px;
    height: 10px;
    float: left;
}

 #item span p{
    display: block;
    font-size: 8px;
    line-height: 20px;
    float: left;
    color: black;
    margin-left: 5px;
}

父模板:

base_template.html文件（正父模板中留出接口）

<!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_template.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='CSS/init_css.css') }}">

    {% block head %}{% endblock %}
</head>
<body>
    <div class="container">
        <div class="search">
            <input type="text" placeholder="輸入感興趣的內容">
        </div>

        {% block content %}

        {% endblock %}

    </div>
</body>
</html>

base_template.css文件

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 16px;
    color: white;
}

img{
    display: block;
}

.container{
    width: 375px;
    height: 600px;
    background: gray;
}

.container .search{
    padding: 14px 8px;
    background: #41be57;
}

.container .search input{
    display: block;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    margin: 0 auto;
    outline: none;
    border: none;
}

init_css.css文件用於初始化css樣式：

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 16px;
    color: white;
}

img{
    display: block;
}

小程序首頁：

index.html （繼承自父模板）

{% extends "common/base_template.html" %}

{% block title %}
    豆瓣微信小程序
{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSS/index_1.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSS/macro_file.css') }}">
{% endblock %}

{% block content %}
    {% from "common/macro_file.html" import moive_item %}
    <div class="item-group">
        <div class="top-title">
            <span>電影</span>
            <a href="{{ url_for('item_list', category=1) }}">更多</a>
        </div>
        <div class="items">
            {% for movie in movies[:3] %}
                {{ moive_item(movie["thumbnail"], movie["title"], movie["rating"]) }}
            {% endfor %}
        </div>
    </div>

    <div class="item-group">
        <div class="top-title">
            <span>電視劇</span>
            <a href="{{ url_for('item_list', category=2) }}">更多</a>
        </div>
        <div class="items">
            {% for movie in tvs[:3] %}
                {{ moive_item(movie["thumbnail"], movie["title"], movie["rating"]) }}
            {% endfor %}
        </div>
    </div>
{% endblock %}

index_1.css首頁的樣式文件：

.item-group{
    width: 100%;
    border: none;
}

.item-group .top-title{
    margin-top: 15px;
    overflow: hidden;     /*清除浮動*/
    /*color: black;*/
}

.item-group .top-title span{
    float: left;
    margin-left: 15px;
    font-size: 20px;
    color: black;
}

.item-group .top-title a{
    float: right;
    margin-right: 15px;
    font-size: 20px;
    color: black;
}

.item-group .items
{
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

電影詳情頁：

item_list.html (繼承自父模板)

{% extends "common/base_template.html" %}

{% if category|int == 1  %}
    {% set page_name = "電影" %}
{% else %}
    {% set page_name = "電視劇" %}
{% endif %}

{% block title %}
    {{ page_name }}詳情頁
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='CSS/item_list.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='CSS/macro_file.css') }}">
{% endblock %}

{% block content %}
    {% from "common/macro_file.html" import moive_item %}
    <div id="item-list">
        {% for movie in para %}
            {{ moive_item(movie["thumbnail"], movie["title"], movie["rating"]) }}
        {% endfor %}
    </div>
{% endblock %}

item_list.css文件：

#item-list
{
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

完整文件下載：

鏈接：https://pan.baidu.com/s/1UJvuKqqQS6q1o0ads4f9-g
提取碼：yk09

------------------------------------------------------------------------------------------------------------------------------------

Web後端學習筆記Flask（3）模板實例

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

數據展示動態（跑分）顯示

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

Web前端筆記（3）

Web前端筆記（7）

Web前端 Javascript筆記（1）數組

Web前端JavaScript筆記（7）ECMA6新增數組方法

Web前端筆記（5）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Web後端學習筆記Flask（3）模板 實例

Web後端學習筆記Flask（3）模板實例