Использование дерева для фильтрации данных с Rest API (Vue & Django) - PullRequest
Новая
       59

Использование дерева для фильтрации данных с Rest API (Vue & Django)

0 голосов
/ 26 марта 2019

У меня есть бэкэнд Django, использующий API отдыха. Я планирую создать фильтр для моего внешнего интерфейса с помощью этого пакета. https://github.com/riophae/vue-treeselect

Мне нужно изменить мои модели, чтобы я мог фильтровать данные иерархическим образом вот так. 

 .Sport
 |
  ...Competition
  |
   ....Open date
   | 
    .....Event name
    |
     ......Market type

Что мне нужно сделать, чтобы изменить файл models.py, и как я могу вызвать получение данных для перетекания в древовидное представление при нажатии кнопки обновления в файле filter.vue? Также, как я могу опубликовать в пустой модели по нажатию кнопки добавления?

models.py 

from django.db import models

class Event(models.Model):
    sport = models.CharField(max_length=50, null=True)
    event_id = models.BigIntegerField(primary_key=True)
    event_name = models.CharField(max_length=200, null=True)
    open_date = models.CharField(null=True, max_length=50)
    market_type = models.CharField(null=True,max_length=50)
    competition = models.CharField(null=True, max_length=50)

Пустая модель для публикации отфильтрованных результатов. 

class EventMonitor(models.Model):
    sport = models.CharField(max_length=50, null=True)
    event_id = models.BigIntegerField(primary_key=True)
    event_name = models.CharField(max_length=200, null=True)
    open_date = models.CharField(null=True, max_length=50)
    market_type = models.CharField(null=True,max_length=50)
    competition = models.CharField(null=True, max_length=50)

serializers.py 

from rest_framework import serializers
from .models import  Event, EventMonitor

class EventSerializer(serializers.ModelSerializer):

   class Meta:
       model = Event
       fields = '__all__'

class EventMonitorSerializer(serializers.ModelSerializer):

   class Meta:
       model = EventMonitor
       fields = '__all__'

views.py 

from rest_framework.viewsets import GenericViewSet, ModelViewSet
from api.serializers import EventSerializer, EventMonitorSerializer
from api.models import Event, EventMonitor

class EventViewSet(ListModelMixin, RetrieveModelMixin, DestroyModelMixin, GenericViewSet):
     queryset = Event.objects.all()
     serializer_class = EventSerializer

class EventMonitorViewSet(ListModelMixin, RetrieveModelMixin, DestroyModelMixin, GenericViewSet):
     queryset = EventMonitor.objects.all()
     serializer_class = EventMonitorSerializer

urls.py 

from django.conf import settings
from django.urls import path, include
from django.contrib import admin
from django.contrib.auth import views
from rest_framework.routers import DefaultRouter
from api.views import EventViewSet, EventMonitorViewSet
from rest_framework import routers

router = routers.DefaultRouter()
router.register('event', EventViewSet)
router.register('eventmonitor', EventMonitorViewSet)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
    path('api/auth/', include('djoser.urls')),
    path('api/auth/', include('djoser.urls.authtoken')),

filter.vue 

     <template>
       <div id="app">
         <treeselect v-model="value" :multiple="true" :options="options" />
       </div>

  <div>
      <button type="button" class="btn btn-dark">update</button>
      <button type="button" class="btn btn-dark">add</button>
   </div>
     </template>

     <script>
       // import the component
       import Treeselect from '@riophae/vue-treeselect'
       // import the styles
       import '@riophae/vue-treeselect/dist/vue-treeselect.css'

       export default {
         // register the component
         components: { Treeselect },
         data() {
           return {
             // define default value
             value: null,
             // define options
             options: [ {
               id: 'a',
               label: 'a',
               children: [ {
                 id: 'aa',
                 label: 'aa',
               }, {
                 id: 'ab',
                 label: 'ab',
               } ],
             }, {
               id: 'b',
               label: 'b',
             }, {
               id: 'c',
               label: 'c',
             } ],
           }
         },
       }
     </script>
...