使用treeview使用Rest (Vue & Django)过滤数据

Question

我有一个django后端，它使用rest。我计划用这个包为我的vue前端构建一个过滤器。https://github.com/riophae/vue-treeselect

我需要修改我的模型，这样我就可以像这样以层次结构的方式过滤数据。

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

我需要做些什么来修改我的models.py，以及如何调用get数据以流到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>

Answer 1

一种方法是对搜索查询使用Q对象或直接筛选查找。对于第二个问题，您需要做的事情如下：

1. 使用查询参数将查询发送到后端。例：base_url?Sports=foo&Competition=bar
2. 使用以下方法实现事件视图集的get_queryset方法： def get_queryset(self)：get_queryset= Events.objects.all()如果self.request.method == 'GET'：query =self.request.method

请注意，这只是为了给您一个想法，而不是经过测试的代码。。