vue前端和Django后端如何查询一定时间段内的数据
前言
在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据。
这样我们就需要向后端发送时间段的参数,然后在后端处理查询。
这里以Django后端和vue前端的简单例子来记录大致实现。
后端数据库
这里是一些简单的数据重要的是date,我们需要根据日期来筛选返回到前端。
models.py
classCountDownSign(models.Model): name=models.CharField(max_length=1000) date=models.DateField() sign=models.CharField(max_length=200)
serializers.py
这里引入的是drf框架,但筛选查询的思路和这个框架没有关系。
classCountDownModelSerializer(serializers.ModelSerializer): classMeta: model=CountDownSign fields='__all__' defcreate(self,validated_data): returnCountDownSign.objects.create(**validated_data) defupdate(self,instance,validated_data): instance.name=validated_data.get('name',instance.name) instance.date=validated_data.get('date',instance.date) instance.sign=validated_data.get('sign',instance.sign) instance.save() returninstance
views.py
为筛选查询提供接口。拿到前端传递的起止日期。核心代码如下
obj=models.CountDownSign.objects.filter(date__range=(start,end))
classCountDownViewSet(ModelViewSet): parser_classes=[JSONParser,FormParser] """视图集""" queryset=models.CountDownSign.objects.all() serializer_class=CountDownModelSerializer #搜索 search_fields=('id','name','sign','date') @action(methods=['post'],detail=False) defgetSE(self,request,*args,**kwargs): start=request.data.get('start',None) end=request.data.get('end',None) ifstartandend: obj=models.CountDownSign.objects.filter(date__range=(start,end)) ifobj: ser=CountDownModelSerializer(instance=obj,many=True) print(ser.data) returnJsonResponse({ 'code':'200', 'msg':'获取数据成功', 'data':ser.data }) else: returnJsonResponse({ 'code':'1002', 'msg':'获取失败', }) else: returnResponse(status=status.HTTP_204_NO_CONTENT)
前端界面
这里简略给出用于接收起止时间的两个date-picker,并且给搜索绑定事件。