Flask第37篇——模板项目实战

Posted 2021-04-12 自动化测试实战

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

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

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

moreList.html

{% 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 %}

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

@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文件中需要加上更多的链接：

<a href="{{ url_for('itemList', category=category) }}" class="more-btn">更多</a>

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