时间戳

首页 > 解决方案 > 是否可以使用烧瓶模板在网格/表格中显示产品？

python - 是否可以使用烧瓶模板在网格/表格中显示产品？

问题描述

尝试使用 Flask 模板在网格中显示产品信息（产品名称、产品图片、产品价格）。有 10 个产品，我试图展示 5 个产品 x 2 行。

我试图让产品信息像此参考中的图像一样显示： https ://schier.co/blog/2014/12/05/html-templating-output-a-grid-in-a-single-loop .html

但是每当我使用 < div > 时，什么都没有出现，所以我又回到了使用表格。

<table style="height: 200px;" width="200">
    <tbody>
        <tr>
        {% for x in result %}
            <td style="width: 190px;">
                <a href="/get_asin/{{ x['asin'] }}" target=_blank><img src = {{ x['product_image'] }}></a>
                <a href="/get_asin/{{ x['asin'] }}" " target=_blank>{{ x['product_name'] }}</a><br>
                <a href="/get_asin/{{ x['asin'] }}" " target=_blank>{{ x['TLC'] }}</a>
                <br>
            </td>
        {% endfor %}
        </tr>
    </tbody>
</table>

我已经尝试过 SO 的其他答案，但是这些项目要么显示在一行或一列中，并且无法让它显示在网格中。

编辑：这是我希望得到的：

<table>
<tbody>
<tr>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 1 name</p>
<p>product 1 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 2 name</p>
<p>product 2 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 3 name</p>
<p>product 3 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 4 name</p>
<p>product 4 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 5 name</p>
<p>product 5 price</p>
</td>
</tr>
<tr>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 6 name</p>
<p>product 6 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 7 name</p>
<p>product 7 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 8 name</p>
<p>product 8 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 9 name</p>
<p>product 9 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 10 name</p>
<p>product 10 price</p>
</td>
</tr>
</tbody>
</table>

编辑： app.py 有以下几行：

result = list_matching(keyword)
return render_template('product_list_template.html', result=result)

“结果”变量是从另一个函数导入的产品信息列表的字典，该函数从源解析信息。

[{'product_id': 'IP4D8', 'product_name': ... etc. ... 'price': '12.03'}, 
{'product_id': 'IP4D10', 'product_name': ... etc. ... 'price': '12.03'}]

标签： pythonpython-3.xflaskjinja2

解决方案

我无法发表评论，所以我必须写下答案。但这取决于你得到的结果。如果您使用的是 flask-sqlalchemy，那么您必须获取模型对象。因此，如果您有“产品”模型，那么您的结果将是包含所有列的产品模型。您可以通过以下方式访问它们：

{% for product in result %}
<p>{{ product.productname }}</p>
<img src='{{ product.imagename}}'> //ofcourse you have to give complete path before
{% endfor %}

推荐阅读