Implémentation de la page de détails produit et des favoris utilisateur avec Django et Vue

La création d'une page de détails pour les produits, similaire à la vue CategoryViewSet, nécessite d'hériter de la classe mixins.RetrieveModelMixin.


from rest_framework import mixins
from rest_framework import viewsets

class GoodsDetailViewSet(mixins.RetrieveModelMixin, viewsets.GenericViewSet):
   pass
   

Gestion des Images et Sérialisation

Les carrousels d'images pour un produit sont gérés via une relation de clé étrangère. Pour les sérialiser, une approche imbriquée est utilisée.


from rest_framework import serializers
from .models import GoodsImage, Goods, Category

# Sérialiseur pour les images du carrousel
class GoodsImageSerializer(serializers.ModelSerializer):
   class Meta:
       model = GoodsImage
       fields = ("image",)

# Sérialiseur pour les produits, incluant les relations imbriquées
class GoodsSerializer(serializers.ModelSerializer):
   # Imbrication du sérialiseur de catégorie
   category = CategorySerializer()
   # Imbrication des images du carrousel (en utilisant le related_name 'images')
   images = GoodsImageSerializer(many=True)

   class Meta:
       model = Goods
       fields = '__all__'
   

Après avoir configuré le backend, il est possible de tester l'affichage des détails du produit dans le navigateur. Si les images du carrousel ne s'affichent pas, ajustez le fichier proxy.js à la racine du projet pour pointer vers votre serveur local.


module.exports = {
 "/api": "http://localhost:8000"
};
   

Intégration des Produits en Vedete

Pour afficher les produits en vedette, il suffit d'ajouter le champ is\_hot au filtre des produits.


# Dans goods/filters.py
from django_filters import rest_framework as filters
from .models import Goods

class GoodsFilter(filters.FilterSet):
   # ... autres filtres existants
   is_hot = filters.BooleanFilter(field_name='is_hot')

   class Meta:
       model = Goods
       fields = ['is_hot', 'price_min', 'price_max'] # Exemple avec prix min/max
   

Dans l'interface d'administration, marquez des produits comme "en vedette" (en mettant is\_hot à True) pour qu'ils apparaissent sur le frontend.

Gestion des Favoris Utilisateur

La fonctionnalité de favoris utilisateur requiert des ajustements dans les sérialiseurs et les vues.

Sérialiseur des Favoris


# Dans user_operation/serializers.py
from rest_framework import serializers
from rest_framework.validators import UniqueTogetherValidator
from .models import UserFav

class UserFavSerializer(serializers.ModelSerializer):
   user = serializers.HiddenField(
       default=serializers.CurrentUserDefault()
   )

   class Meta:
       model = UserFav
       fields = ("user", "goods", "id")
       validators = [
           UniqueTogetherValidator(
               queryset=UserFav.objects.all(),
               fields=('user', 'goods'),
               message="Cet article est déjà dans vos favoris."
           )
       ]
   

Vue des Favoris

La vue gère l'ajout, la liste et la suppression des favoris.


# Dans user_operation/views.py
from rest_framework import viewsets, mixins
from rest_framework.permissions import IsAuthenticated
from rest_framework_jwt.authentication import JSONWebTokenAuthentication
from .models import UserFav
from .serializers import UserFavSerializer
from utils.permissions import IsOwnerOrReadOnly # Assurez-vous que ce fichier existe

class UserFavViewset(mixins.CreateModelMixin,
                    mixins.DestroyModelMixin,
                    mixins.ListModelMixin,
                    viewsets.GenericViewSet):
   """
   API pour la gestion des favoris utilisateur.
   list: Récupère la liste des favoris de l'utilisateur connecté.
   create: Ajoute un article aux favoris.
   destroy: Supprime un article des favoris.
   """
   serializer_class = UserFavSerializer
   permission_classes = (IsAuthenticated, IsOwnerOrReadOnly)
   authentication_classes = (JSONWebTokenAuthentication,)
   lookup_field = 'goods_id' # Permet de cibler un favori par l'ID du produit

   def get_queryset(self):
       # Restreint la liste aux favoris de l'utilisateur actuellement connecté
       return UserFav.objects.filter(user=self.request.user)
   

Configuration des URLs

Ajoutez une route pour la vue des favoris.


# Dans urls.py de votre application Django
from rest_framework.routers import DefaultRouter
from user_operation.views import UserFavViewset
# ... autres imports

router = DefaultRouter()
router.register(r'userfavs', UserFavViewset, basename='userfavs')
# ...
urlpatterns = [
   # ... autres URLs
] + router.urls
   

Permissions et Authentification DRF

Pour contrôler l'accès aux fonctionnalités, notamment aux favoris, des permissions personnalisées peuvent être créées.

Permission IsOwnerOrReadOnly


# Dans utils/permissions.py
from rest_framework import permissions

class IsOwnerOrReadOnly(permissions.BasePermission):
   """
   Permission pour autoriser la modification uniquement au propriétaire de l'objet.
   Suppose que l'instance du modèle possède un attribut `user` (ou `owner`).
   """
   def has_object_permission(self, request, view, obj):
       # Les permissions de lecture sont autorisées pour toute requête
       if request.method in permissions.SAFE_METHODS:
           return True

       # Vérifie si l'utilisateur connecté est le propriétaire de l'objet
       return obj.user == request.user
   

Dans la vue UserFavViewset, appliquez ces permissions et configurez l'authentification.


# Dans user_operation/views.py (suite)
# ... imports ...
from rest_framework.authentication import SessionAuthentication
from rest_framework_jwt.authentication import JSONWebTokenAuthentication

class UserFavViewset(mixins.CreateModelMixin,
                    mixins.DestroyModelMixin,
                    mixins.ListModelMixin,
                    viewsets.GenericViewSet):
   # ... (serializer_class, lookup_field, get_queryset) ...

   permission_classes = (IsAuthenticated, IsOwnerOrReadOnly)
   authentication_classes = (JSONWebTokenAuthentication, SessionAuthentication)
   

Note : L'authentification JSONWebTokenAuthentication n'a pas besoin d'être configurée globalement dans settings.py si elle est spécifiée dans authentication\_classes au niveau de la vue.

Une fois ces étapes complétées, testez la fonctionnalité de favoris. Seuls les utilisateurs authentifiés peuvent ajouter des articles à leurs favoris, et chaque utilisateur ne peut accéder qu'à ses propres favoris.

Étiquettes: Django Vue.js REST framework API sérialisation

Publié le 30 juin à 22h23