Django实现点击点赞按钮时逐行打印指定字符串的需求

需求说明 #

每次用户点击点赞按钮后，页面新增一行<p>like</p>，效果示例：

<p>like</p>
<p>like</p>
<p>like</p>
...

现有项目已实现点赞/点踩功能，点赞数存储在Post模型的number_of_likes字段中，需通过修改模型和模板实现需求。

修改步骤 #

1. 完善Post模型（models.py） #

在Post类中添加属性方法，根据当前点赞数生成对应数量的like列表，方便模板直接调用：

class Post(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4)
    num_post = models.IntegerField(default=0)
    image = models.ImageField(upload_to=post_images)
    caption = models.TextField(max_length=300)
    created_at = models.DateTimeField(auto_now_add=True)
    number_of_likes = models.IntegerField(default=0)
    number_of_dislikes = models.IntegerField(default=0)
    interaction_count = models.IntegerField(default=0)

    def __str__(self):
        return self.caption
    
    # 新增：生成对应点赞数的like列表
    @property
    def like_lines(self):
        return ['like'] * self.number_of_likes

class LikePost(models.Model):
    post_id = models.CharField(max_length=500)

    def __str__(self):
        return self.post_id

2. 模板中循环输出like行 #

找到点赞按钮对应的HTML区域，在合适位置（比如点赞计数下方）添加循环代码，遍历post.like_lines逐行输出：

<!-- 点赞按钮区域（参考点踩按钮结构） -->
<a href="/like-post?post_id={{ post.id }}" class="flex items-center space-x-2">
    <div class="p-2 rounded-full text-black">
        <div class="uk-width-auto"> 
            <button type="submit" class="button soft-primary -ml-2">
                like 
            </button> 
        </div>
        <!-- 原点赞计数逻辑 -->
        {% if post.number_of_likes == 0 %}
        <p>no likes</p>
        {% elif post.number_of_likes == 1 %}
        <p> {{ post.number_of_likes }} user likes this</p>
        {% else%}
        <p> {{ post.number_of_likes }} users like this</p>
        {% endif %}
        <!-- 新增：逐行输出like -->
        {% for item in post.like_lines %}
        <p>{{ item }}</p>
        {% endfor %}
    </div>
</a>

说明 #

每次点击点赞按钮，like_post视图会更新Post的number_of_likes字段，页面刷新后，post.like_lines会根据最新点赞数生成对应长度的列表，模板循环后即可显示对应数量的<p>like</p>行。现有逻辑基于页面跳转刷新实现，无需额外前端代码即可满足需求。

内容的提问来源于stack exchange，提问作者amber