[flask笔记] jinja2模板练习

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

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

`` [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模板练习》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

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

码农书籍
疯狂Java讲义（第4版）

疯狂Java讲义（第4版）

李刚 / 电子工业出版社 / 2018-1 / 109

《疯狂Java讲义（第4版）》是《疯狂Java讲义》的第4版，第4版保持了前3版系统、全面、讲解浅显、细致的特性，全面新增介绍了Java 9的新特性。 《疯狂Java讲义（第4版）》深入介绍了Java编程的相关方面，《疯狂Java讲义（第4版）》内容覆盖了Java的基本语法结构、Java的面向对象特征、Java集合框架体系、Java泛型、异常处理、Java GUI编程、JDBC数据库编程、J......一起来看看 《疯狂Java讲义（第4版）》 这本书的介绍吧!

码农工具
在线进制转换器
在线进制转换器

各进制数互转换器

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

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