使用 python Flask 自动生成 HTML 个元素

Question

所以我使用 python flask 以及一些 HTML 和 CSS 创建一个动态网站来显示有关大学的评论。然而，我面临一个小问题，因为我有 flask 给出 HTML 评论，评论包含用户名、日期、评论评论和总体评分（满分 5 分）等属性。但是对于整体评分，我想在网站上显示它们作为开始，所以我有 5 颗星并且有 2 个不同的开始图标 1 个是填充的，1 个是空心的，所以例如如果评论被评为 3/5 我有 3 颗实心星和 2 颗空心星。目前，我必须“硬编码”，例如通过 if 语句进行评级，如果我必须添加其他评级，它看起来很乱而且效果不佳。

HTML代码

<section id="reviews">
        <div class="review-box-container">
            <!-- Get all the data from postgres database-->
            {% for review in reviews.items %}
            <div class="review-box">
                <div class="box-top">

                    <div class="profile">
                        <div class="profile-img">
                            <img src="{{ url_for('static', filename='images/Lincoln-Logo.png') }}" width="50" height="50" alt="profile">
                        </div> 
                        <div class="name-user">
                            <strong>{{ review.user_name }}</strong>
                            <span> {{ review.date.strftime('%Y-%m-%d') }}</span>
                        </div>
                    </div>
                    
                    <!--Hard coded the overall rating star display (How can I do this better?)-->
                    <div class="review-content">
                        {% if review.overall_rating == 1 %}
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i> <!-- Holo star -->
                        {% endif %}
                        {% if review.overall_rating == 2 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        {% endif %}
                        {% if review.overall_rating == 3 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        {% endif %}
                        {% if review.overall_rating == 4 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        {% endif %}
                        {% if review.overall_rating == 5 %}
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        {% endif %}
                    </div>
                </div>

                <div class="review-comment">
                    <p>{{ review.comments}}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>

所以我想知道是否有办法摆脱 1 - 5 中每个值的 if 语句，并以较少硬编码的方式进行，这样在添加其他评级时会更容易。

Answer 1

你总共可以做两个循环而不用 if 循环，第一个 for 循环打印满星 X 次（其中 X 是评级），第二个半星循环 5 - X 次。

在我的示例中，overall_rating 是值为 0 到 5 的变量：

jinja 模板：

<pre>
{% for ii in range(1, overall_rating + 1) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for ii in range(1, 5 - overall_rating + 1) %}
<i class="far fa-star"></i> <!-- Holo star -->
{% endfor %}

编辑以更适合您的情况调整模板

使用 python Flask 自动生成 HTML 个元素

Generate HTML elements automatically with python Flask

python

html

css

flask

web-site-project