投稿
  1. 高性能架构探索首页
  2. C/C++

Web后端学习笔记Flask（3）模板 实例

admin • • C/C++ • 阅读 140

豆瓣微信小程序：

在代码调试的过程中，一般css文件不生效，可以按照以下的方法检查：

1. 如果遇到修改的CSS文件不能生效，首先需要检查，css文件路径，以及css选择器书写是否正确

2. 设置浏览器，打开浏览器的开发者模式 (F12)，将network下的Disable cache 选项勾选上

Web后端学习笔记Flask（3）模板 实例

3. 重启服务试一下

小程序页面如下图所示：（首页和详情页）

Web后端学习笔记Flask（3）模板 实例        Web后端学习笔记Flask（3）模板 实例      Web后端学习笔记Flask（3）模板 实例

通过点击首页的更多按钮，可以跳转至电影页面和电视剧详情页面

Web后端学习笔记Flask（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

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

原文链接: https://www.cnblogs.com/ncepubye/p/12723974.html

欢迎关注

微信关注下方公众号，第一时间获取干货硬货；公众号内回复【pdf】免费获取数百本计算机经典书籍;

也有高质量的技术群，里面有嵌入式、搜广推等BAT大佬

    Web后端学习笔记Flask（3）模板 实例

原创文章受到原创版权保护。转载请注明出处：https://www.ccppcoding.com/archives/396425

非原创文章文中已经注明原地址，如有侵权，联系删除

关注公众号【高性能架构探索】，第一时间获取最新文章

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
adminadmin
0 0
上一篇 2023年4月6日 上午11:19
下一篇 2023年4月6日 上午11:19

相关推荐