微客导航 » 文章资讯 » vue前端和Django后端如何查询一定时间段内的数据

vue前端和Django后端如何查询一定时间段内的数据

2023-07-05 00:30:03 266

前言

在开发过程中经常会遇到筛选查询之类的功能，比如查询某一个时间段内的数据而非所有数据。

这样我们就需要向后端发送时间段的参数，然后在后端处理查询。

这里以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，并且给搜索绑定事件。

搜索

data.js

实现的接口函数

exportfunctionsearchCountDown(start,end){
returnrequest({
url:'countDown/getSE/',
method:'post',
data:{
start:start,
end:end
}
})
}

点击事件的实现

判断输入的合法性，并接受数据进行数据绑定展示

searchC(){
console.log(this.value1);
console.log(this.value2);
if(this.value1{
console.log(res.data);
this.searchRes=res.data;
})
}else{
this.$message.error("时间范围出错");
}
},

数据展示





{{item.name}}

运行结果

可以看到返回的数据均是在时间范围内，这里的2月25号零时其实返回的数据是2月5号，因为进行了数据格式化，所以25号的数据也被返回了。

总结

到此这篇关于vue前端和Django后端如何查询一定时间段内数据的文章就介绍到这了,更多相关vue和Django查询数据内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue前端和Django后端如何查询一定时间段内的数据

前言

后端数据库

前端界面

总结

热门推荐

随机推荐