开发专业博客(3)之仿微信评论点赞功能

在前两篇文章中，我们已经完成了博客的基本功能，如文章列表、详情页等。然而，在现实世界中，一个完整的博客系统还需要具备评论和点赞功能，这些功能对于用户之间的互动和社区建设至关重要。在本文中，我们将对该博客做进一步改进，利用AJAX技术实现仿微信评论的点赞功能。

点赞功能需求

1. 当登录用户点击大拇指按钮时，文章总点赞次数在页面无需刷新的情况下自动加1。

2. 当用户再次点击大拇指按钮时，取消点赞，并将总点赞次数减少1。

3. 点赞记录应该保存在数据库中，以便于后续的统计和展示。

实现步骤

1. 添加模型首先，我们需要添加一个`Like`模型来存储用户对文章的点赞记录。我们可以使用Django提供的`models`模块来定义这个模型。

```python models.pyfrom django.db import modelsclass Like(models.Model):

user = models.ForeignKey(User, on_delete=models.CASCADE)

article = models.ForeignKey(Article, on_delete=models.CASCADE)

created_at = models.DateTimeField(auto_now_add=True)

def __str__(self):

return f"{self.user.username} liked {self.article.title}"

```

2. 添加视图接下来，我们需要添加一个视图来处理点赞和取消点赞的请求。我们可以使用Django提供的`views`模块来定义这个视图。

```python views.pyfrom django.shortcuts import render, redirectfrom .models import Likefrom .forms import LikeFormdef like_article(request, article_id):

article = Article.objects.get(id=article_id)

if request.method == 'POST':

form = LikeForm(request.POST)

if form.is_valid():

user = request.user like, created = Like.objects.get_or_create(user=user, article=article)

if created:

return redirect('article_detail', article_id=article.id)

else:

like.delete()

return redirect('article_detail', article_id=article.id)

else:

form = LikeForm()

return render(request, 'like_article.html', {'form': form})

```

3. 添加模板我们需要添加一个`like_article.html`模板来显示点赞和取消点赞的按钮。

```html

{% extends 'base.html' %}

{% block content %}

Like Article

{% endblock %}

```

4. 添加AJAX请求我们需要添加一个AJAX请求来处理点赞和取消点赞的逻辑。

```javascript// like_article.js$(document).ready(function() {

$('like-button').on('click', function() {

$.ajax({

type: 'POST',

url: '{% url 'like_article' article.id %}',

data: {

'csrfmiddlewaretoken': '{{ csrf_token }}'

},

success: function(data) {

// Update like count $('like-count').text(data.like_count);

}

});

});

});

```

5. 添加数据库迁移最后，我们需要添加一个数据库迁移来创建`Like`表。

```bashpython manage.py makemigrationspython manage.py migrate```

总结

在本文中，我们完成了仿微信评论的点赞功能。我们使用Django提供的`models`模块定义了`Like`模型，使用`views`模块定义了`like_article`视图，添加了`like_article.html`模板和AJAX请求，并且执行了数据库迁移。这个功能使得用户可以在不刷新页面的情况下点赞或取消点赞文章。

点赞评论功能djangoajaxbloglike