So fragen Sie Daten innerhalb eines bestimmten Zeitraums mit dem Vue-Frontend und dem Django-Backend ab

Klasse CountDownSign(Modelle.Modell):
 Name = Modelle.CharField(max_length=1000) 
 Datum = Modelle.Datumsfeld() 
 Zeichen = Modelle.CharField(max_length=200) 

Klasse CountDownModelSerializer(Serializer.ModelSerializer):
 Klasse Meta:
 Modell = CountDownSign
 Felder = '__alle__'

 def erstellen(selbst, validierte Daten):
 returniere CountDownSign.objects.create(**validierte_Daten)

 def update(selbst, Instanz, validierte Daten):
 Instanzname = validierte_Daten.get('Name', Instanzname)
 Instanz.Datum = validierte_Daten.get('Datum', Instanz.Datum)
 Instanz.Sign = validierte_Daten.get('Sign', Instanz.Sign)
 Instanz.Speichern()
 Rückgabeinstanz

obj = Modelle.CountDownSign.objects.filter(date__range=(Start, Ende))

Klasse CountDownViewSet(ModelViewSet):
 parser_classes = [JSONParser, FormParser]
 """Ansichtssatz"""
 Abfragesatz = Modelle.CountDownSign.Objekte.alle()
 serializer_class = CountDownModelSerializer
 # Suche Suchfelder = ('id', 'name', 'zeichen', 'datum')
 
 @action(Methoden=['posten'], Detail=Falsch)
 def getSE(selbst, Anfrage, *Argumente, **Kwargs):
 start = Anfrage.Daten.get('start', Keine)
 Ende = Anfrage.Daten.get('Ende', Keine)
 wenn Start und Ende:
  obj = Modelle.CountDownSign.objects.filter(date__range=(Start, Ende))

  wenn Objekt:
  ser = CountDownModelSerializer(Instanz=Objekt, viele=True)
  drucken(ser.data)
  JsonResponse zurückgeben({
   'Code': '200',
   'msg': 'Daten erfolgreich abgerufen',
   "Daten": ser.data
  })
  anders:
  JsonResponse zurückgeben({
   'Code': '1002',
   'msg': 'Get ist fehlgeschlagen',
  })
 anders:
  Antwort zurückgeben (Status = Status.HTTP_204_NO_CONTENT)

 <div Klasse="Datumsauswahl">
 <div Klasse="Block" Stil="Float: links">
 <el-Datumsauswahl
  v-Modell="Wert1"
  Typ="Datum/Uhrzeit"
  Werteformat="jjjj-MM-tt"
  Platzhalter="Bitte wählen Sie ein Startdatum">
 </el-Datumsauswahl>
 </div>
 <div Klasse = "Block" Stil = "Float: links; Rand links: 20px;">
 <el-Datumsauswahl
  v-Modell="Wert2"
  Typ="Datum/Uhrzeit"
  Werteformat="jjjj-MM-tt"
  Platzhalter="Bitte wählen Sie eine Frist">
 </el-Datumsauswahl>
 </div>
 <el-button round style="float: left; margin-left: 20px;" @click="searchC">Suchen</el-button>
 </div>

Exportfunktion searchCountDown(start, end) {
 Rückgabeanforderung({
 URL: "countDown/getSE/",
 Methode: 'post',
 Daten: {
  Anfang: Anfang,
  Ende: Ende
 }
 })
}

sucheC() {
 Konsole.log(dieser.Wert1);
 Konsole.log(dieser.Wert2);
 wenn (dieser.Wert1 < dieser.Wert2) {
 searchCountDown(dieser.Wert1, dieser.Wert2).dann(res => {
  Konsole.log(Res.Daten);
  diese.searchRes = res.data;
 })
 } anders {
 this.$message.error("Zeitbereichsfehler");
 }
 },

 <div Klasse="Artikel">
 <ul>
 <li v-for="(item,index) in searchRes">
  <div Klasse = "ui-Raster" Stil = "Breite: 100 %; Höhe: 60px;">
  <div Klasse="vier breite Spalten"><span>{{ item.name }}</span></div>
  <div Klasse="vier breite Spalten"><span>{{ item.date }}</span></div>
  <div Klasse="vier breite Spalten"><span>{{ item.sign }}</span></div>
  <div class="vier breite Spalten">
  <el-button type="danger" icon="el-icon-delete" kreis @click="deleteC(item.id)"></el-button>
  <el-button type="primary" icon="el-icon-edit" kreis></el-button>
  </div>
  </div>
  <div class="ui-Teiler"></div>
 </li>
 </ul>