[flask笔记] jinja2模板练习

栏目: Python · 发布时间: 5年前

内容简介：``豆瓣微信小程序

`` [flask笔记] jinja2模板练习

flask -- jinja2模板练习

豆瓣微信小程序

GitHub传送门

(可以拿这里的content.py这样不用自己构造数据了)，有建议和不足的地方拜托师傅们指出！！！

写出大致框架

from <a href="https://www.miaoroom.com/tag/flask" data-toggle="tooltip" title="查看更多关于 flask 的文章" target="_blank">flask</a> 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 <a href="https://www.miaoroom.com/tag/flask" data-toggle="tooltip" title="查看更多关于 flask 的文章" target="_blank">flask</a> 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练习,可能有遗漏的地方，建议看源码。。。


以上所述就是小编给大家介绍的《[flask笔记] jinja2模板练习》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
数字化崇拜

数字化崇拜

[加] 文森特·莫斯可 / 黄典林 / 北京大学出版社 / 2010-1 / 26.00元

与此前的许多技术发展一样，以互联网为标志的数字化时代同样为人们提供了社会根本性变革的许诺：通过电脑，我们可以超越时空和政治。在本书中，文森特·莫斯可透过技术发展和经济泡沫的迷雾，试图探明围绕数字化新技术出现了哪些迷思，以及为何人们对这些迷思坚信不疑。他认为互联网时代投资者如此狂热的动因并不是他们对经济规则的无知，而是对赛博空间开启了一个新世界这样的迷思的坚定信念。 莫斯可指出，迷思并不是一些......一起来看看 《数字化崇拜》 这本书的介绍吧!

码农工具
HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3