Flask第37篇——模板项目实战(三)

2018-12-19 10:26:57 浏览数 (1)

今天我们来完成更多的模块,点击更多后页面显示效果如上图。

我们先来分析上面这个页面,我们发现除了搜索栏下面的图片区域有些变化以外,其余都是base.html的布局,所以我们首先想到可以继承base.html,而图片显示规则则和我们前面定义过的完全一致,我们就可以导入写好的。 所以我们先在templates文件夹下新建moreList.html文件:

我们已经在base.html中保留了block,所以页面新的布局只需要通过block进行插入即可:

moreList.html

代码语言:javascript复制
{% extends 'base.html' %}
{% from 'macros/macros.html' import itemGroup %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}">
    <style>
        .content{
            padding: 25px 10px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="content">
        {% for item in items %}
            {{ itemGroup(item) }}
        {% endfor %}
    </div>
{% endblock %}

当然,我们还要将更多加上链接,我们先定义函数:

代码语言:javascript复制
@app.route('/list/<int:category>/')
def itemList(category):
    # 如果category等于1:返回电影
    # 如果category等于2:返回电视剧
    # 否则返回空数组
    items = []
    if category == 1:
        items = movies
    elif category == 2:
        items = tvs
    else:
        items = []
    return flask.render_template('moreList.html', items=items)

这里我们新加了一个整型的category参数,方便我们对进入的页面到底是电影还是电视剧进行分辨,在macros.html文件中需要加上更多的链接:

代码语言:javascript复制
<a href="{{ url_for('itemList', category=category) }}" class="more-btn">更多</a>

这样就会完成点击`更多`后的页面跳转和跳转后的页面布局啦~~

0 人点赞