¿Cómo crear un sistema de clasificación por estrellas con Vue 2, Vuetify y Django?

Por:

Denisse Abreu
Mar 29, 2022 6pm ET

Eng/Spa 6-min

Hola 👋, esta es la segunda parte de nuestra guía ¿Cómo hacer un sistema de clasificación por estrellas con Django Rest Framework? Si está leyendo este artículo por primera vez, nuestro entorno de trabajo es Vue 2, Veutify y Django Rest Framework. Si no tienes un proyecto, puedes copiar el mío aquí: Django Shopping Store.

En la primera parte de esta guía, enviamos el objeto del producto al frontend; el siguiente código muestra cómo podemos obtenerlo usando la función getProducts() en la parte de acciones de Vuex.

frontend/src/store/index.js

Muta la data que recibimos del Django Rest Framework a través de la función commit() y la variable de entorno SET_PRODUCTS.

frontend/src/store/index.js

Después de la mutación, los datos están listos para ser almacenados.

frontend/src/store/index.js

1. Crea el Componente de Clasificación por Estrellas.

Ahora estamos listos para construir el sistema de clasificación por estrellas de Vuetify. Este componente recibirá dos props, el itemId (el id del producto) y el itemRating (rating actual del producto). Luego de optener estos props, hay que mutar el rating para que el template pueda usarlo en su v-model. Usa la función data() para mutar el itemRating y convertirlo en un número entero. Usa el @input="changeVal() para enviar el rating y su item id a los mutations de Vuex.

frontend/src/components/StarRating.vue

frontend/src/components/StarRating.vue

Importe el componente y colóquelo dentro del objeto del producto, este necesita acceso al product id y a su rating.

frontend/src/views/Home.vue

2. Almacenamiento del Sistema de Estrellas.

Ahora es el momento de recuperar el objeto de clasificación por estrellas enviado por el componente de clasificación por estrellas. En las mutaciones de Vuex, destruya el payload y use la función de javascript findIndex() para buscar el objeto de calificación de estrellas almacenado en el state. Esta función verificará si el valor existe en el stars array por su itemId; si el valor existe, lo cambiará a un nuevo valor de rating; de lo contrario, impulsará un nuevo objeto con el id del producto y su rating.

frontend/src/store/index.js s

Vue js Devtools

3. Envío del objeto de clasificación por estrellas al backend.

Después de que el usuario califique su producto, debe pensar en cómo desea enviar el objeto rating al servidor. Una opción es enviarlo cuando el cliente inicie sesión en la aplicación; puede crear un sistema abierto donde todos puedan calificar sus productos o enviar las calificaciones con estrellas cuando el cliente complete el proceso de pago.

frontend/src/store/index.js

Reciba el objeto order a través del siguiente URL en Django Rest Framework.

mystore/orders/urls.py

  from django.urls import path, include
  from rest_framework import routers
  from .views import OrderViewSet

  router = routers.DefaultRouter()
  router.register(r'order', OrderViewSet)

  urlpatterns = [
      path('', include(router.urls)),
      path('api-post/', include('rest_framework.urls', namespace='order')),
  ]

En la última parte del Sistema de calificación por estrellas, comience a iterar en el rating request. Extraiga el itemId y el rating value; Traiga el rating model, paree el producto con el itemId del request y aumente la cantidad en uno. Consulte mi repositorio si desea ver el order view: Django Shopping Store

mystore/orders/views.py

  class OrderViewSet(viewsets.ModelViewSet):
      queryset = Order.objects.all().order_by('-created_at')
      serializer_class = OrderSerializers

      def create(self, request):
          if request.method == 'POST':
              rating = request.data.get('order')['rating']

              if rating:
                for i in rating:
                  item_id = i.get('itemId')
                  value = i.get('value')
                  r = Rating.objects.get(product=item_id)
                  if value == 1:
                      r.one += 1
                  elif value == 2:
                      r.two += 1
                  elif value == 3:
                      r.three += 1
                  elif value == 4:
                      r.four += 1
                  elif value == 5:
                      r.five += 1
                  r.save()

              serializer = self.serializer_class(
                data=order,
                context={'request': request}
              )
              if serializer.is_valid():
                  serializer.save()
                  return Response(status=status.HTTP_200_OK)
              return Response(
                serializer.errors,
                status=status.HTTP_400_BAD_REQUEST
              )
          return Response(status=status.HTTP_405_METHOD_NOT_ALLOWED)