Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

クラス CountDownSign(models.Model):
 名前 = models.CharField(最大長=1000) 
 日付 = models.DateField() 
 符号 = models.CharField(最大長=200) 

クラス CountDownModelSerializer(serializers.ModelSerializer):
 クラスメタ:
 モデル = カウントダウンサイン
 フィールド = '__すべて__'

 def create(self, 検証済みデータ):
 CountDownSign.objects.create(**validated_data) を返します。

 def update(self, インスタンス, 検証済みデータ):
 インスタンス名 = 検証済みデータ.get('名前', インスタンス名)
 インスタンスの日付 = 検証済みデータ.get('日付', インスタンスの日付)
 インスタンスのサイン = 検証済みデータ.get('サイン', インスタンスのサイン)
 インスタンスを保存()
 インスタンスを返す

obj = models.CountDownSign.objects.filter(date__range=(開始、終了))

クラス CountDownViewSet(ModelViewSet):
 parser_classes = [JSONParser、FormParser]
 「ビューセット」
 クエリセット = models.CountDownSign.objects.all()
 serializer_class = カウントダウンモデルシリアライザー
 # 検索 search_fields = ('id', 'name', 'sign', 'date')
 
 @action(メソッド=['post'], 詳細=False)
 def getSE(self, request, *args, **kwargs):
 開始 = request.data.get('開始', なし)
 end = request.data.get('end', なし)
 開始と終了の場合:
  obj = models.CountDownSign.objects.filter(date__range=(開始、終了))

  オブジェクトの場合:
  ser = CountDownModelSerializer(インスタンス = obj、多数 = True)
  印刷(ser.data)
  JsonResponseを返す({
   'コード': '200',
   'msg': 'データが正常に取得されました',
   'データ': ser.data
  })
  それ以外：
  JsonResponseを返す({
   'コード': '1002',
   'msg': '取得に失敗しました',
  })
 それ以外：
  レスポンスを返す(ステータス=status.HTTP_204_NO_CONTENT)

 <div class="datePicker">
 <div class="block" style="float: left">
 <el-日付ピッカー
  v-model="値1"
  タイプ="datetime"
  値の形式="yyyy-MM-dd"
  placeholder="開始日を選択してください">
 </el-date-picker>
 </div>
 <div class="block" style="float: left; margin-left: 20px;">
 <el-日付ピッカー
  v-model="値2"
  タイプ="datetime"
  値の形式="yyyy-MM-dd"
  placeholder="期限を選択してください">
 </el-date-picker>
 </div>
 <el-button round style="float: left; margin-left: 20px;" @click="searchC">検索</el-button>
 </div>

エクスポート関数 searchCountDown(start, end) {
 リクエストを返す({
 url: 'countDown/getSE/',
 メソッド: 'post'、
 データ： {
  開始: 開始、
  終了: 終了
 }
 })
}

検索C() {
 コンソールにログ出力します。
 コンソールにログ出力します。
 (this.value1 < this.value2) の場合 {
 searchCountDown(this.value1, this.value2).then(res => {
  コンソールにログ出力します。
  this.searchRes = res.data;
 })
 } それ以外 {
 this.$message.error("時間範囲エラー");
 }
 },

 <div class="article">
 <ul>
 <li v-for="(item,index) in searchRes">
  <div class="ui grid" style="幅: 100%;高さ: 60px;">
  <div class="4 列幅"><span>{{ item.name }}</span></div>
  <div class="4 列幅"><span>{{ item.date }}</span></div>
  <div class="4 列幅"><span>{{ item.sign }}</span></div>
  <div class="4 列幅">
  <el-button type="danger" icon="el-icon-delete" 円 @click="deleteC(item.id)"></el-button>
  <el-button type="primary" icon="el-icon-edit" 円></el-button>
  </div>
  </div>
  <div class="ui ディバイダー"></div>
 </li>
 </ul>