利用Django和Bootstrap如何实现收藏功能？

在Django中实现一个简单的收藏功能，可以通过以下步骤来实现：

1. 创建一个模型来记录收藏项。
2. 为用户创建一个模型，并添加一个多对多关系到收藏项模型。
3. 创建一个视图来处理收藏和取消收藏的逻辑。
4. 创建相应的URL路由。
5. 在前端使用Bootstrap创建按钮来触发收藏和取消收藏的操作。

以下是一个简化的示例：

models.py:

from django.db import models
from django.contrib.auth.models import User
 
class Favorite(models.Model):
    title = models.CharField(max_length=100)
    # 其他字段...
 
class UserFavorite(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    favorites = models.ManyToManyField(Favorite)

views.py:

from django.shortcuts import render, get_object_or_404
from django.http import JsonResponse
from .models import UserFavorite, Favorite
from django.contrib.auth.decorators import login_required
 
@login_required
def toggle_favorite(request, favorite_id):
    favorite = get_object_or_404(Favorite, pk=favorite_id)
    user_favorite, created = UserFavorite.objects.get_or_create(user=request.user)
    if favorite in user_favorite.favorites.all():
        user_favorite.favorites.remove(favorite)
    else:
        user_favorite.favorites.add(favorite)
    return JsonResponse({'status': 'success'})

urls.py:

from django.urls import path
from .views import toggle_favorite
 
urlpatterns = [
    path('favorite/<int:favorite_id>/', toggle_favorite, name='toggle_favorite'),
]

在HTML模板中，使用Bootstrap按钮来触发收藏功能：

{% if user.is_authenticated %}
<button class="btn btn-primary" id="favoriteBtn" data-favorite-id="{{ favorite.id }}">
    {% if favorite in user.userfavorite.favorites.all %}
        已收藏
    {% else %}
        收藏
    {% endif %}
</button>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#favoriteBtn').click(function(){
        var favoriteId = $(this).data('favorite-id');
        $.ajax({
            url: '{% url "toggle_favorite" %}',
            type: 'POST',
            data: {
                'favorite_id': favoriteId,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(data) {
                if (data.status === 'success') {
                    // 更新按钮文本，反映收藏状态
                    if ($(this).text() === '收藏') {
                        $(this).text('已收藏');
                    } else {
                        $(this).text('收藏');
                    }
                }