Clasificación por Estrellas con Vuetify y Django

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

Denisse Avatar

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 Vuejs, 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 de 'get products' en la parte de acciones de Vuex.

frontend/src/store/index.js

Muta la data que recibimos del Django Rest Framework usando 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 almacenarse en el estado.
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 'item id' (el id del producto) y el 'item rating' ('rating' del producto pasado como 'string'). 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 'item rating' 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 estado. Esta función verificará si el valor existe en el objeto por ID del producto; si el valor existe, lo cambiará a un nuevo valor; de lo contrario, impulsará un nuevo valor.

frontend/src/store/index.js s

Vue js Devtools

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

Esta parte es opcional; debes pensar en cómo vas a enviar el objeto de calificación de estrellas al servidor. Una opción es enviarlo cuando un cliente inicie sesión en la aplicación; puedes hacer un sistema abierto, donde todos pueden calificar tus productos o hacerlo como esta integración; envía las calificaciones de estrellas cuando el cliente complete el pago.

frontend/src/store/index.js
  • Reciba el objeto 'order' a través de este 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')), ]

Esta es la última parte de la integración de clasificación por estrellas; obtenga del 'request' el 'object' e inicie un 'for loop'. Este 'for loop' obtendrá el 'item id' del producto y el valor del sistema de clasificación por estrellas; Traerá el modelo 'ratings' y aumentará la cantidad uno a uno. Consulte mi repositorio al final de esta página para ver el objeto 'order' completo; hay más que el sistema de estrellas en este serializador.

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)