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

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

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

这里以Django后端和vue前端的简单例子来记录大致实现。

后端数据库

这里是一些简单的数据重要的是date，我们需要根据日期来筛选返回到前端。

models.py

class CountDownSign(models.Model):name = models.CharField(max_length=1000)  date = models.DateField() sign = models.CharField(max_length=200)

serializers.py

这里引入的是drf框架，但筛选查询的思路和这个框架没有关系。

class CountDownModelSerializer(serializers.ModelSerializer):class Meta:model = CountDownSignfields = '__all__'def create(self, validated_data):return CountDownSign.objects.create(**validated_data)def update(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()return instance

views.py

为筛选查询提供接口。拿到前端传递的起止日期。核心代码如下

obj = models.CountDownSign.objects.filter(date__range=(start, end))

class CountDownViewSet(ModelViewSet):parser_classes = [JSONParser, FormParser]"""视图集"""queryset = models.CountDownSign.objects.all()serializer_class = CountDownModelSerializer# 搜索search_fields = ('id', 'name', 'sign', 'date')@action(methods=['post'], detail=False)def getSE(self, request, *args, **kwargs):start = request.data.get('start', None)end = request.data.get('end', None)if start and end:obj = models.CountDownSign.objects.filter(date__range=(start, end))if obj:ser = CountDownModelSerializer(instance=obj, many=True)print(ser.data)return JsonResponse({'code': '200','msg': '获取数据成功','data': ser.data})else:return JsonResponse({'code': '1002','msg': '获取失败',})else:return Response(status=status.HTTP_204_NO_CONTENT)

前端界面

这里简略给出用于接收起止时间的两个date-picker，并且给搜索绑定事件。

    <div class="datePicker"><div class="block" style="float: left"><el-date-pickerv-model="value1"type="datetime"value-format="yyyy-MM-dd"placeholder="请选择选择开始日期"></el-date-picker></div><div class="block" style="float: left;  margin-left: 20px;"><el-date-pickerv-model="value2"type="datetime"value-format="yyyy-MM-dd"placeholder="请选择截止日期"></el-date-picker></div><el-button round style="float: left;  margin-left: 20px;" @click="searchC">搜索</el-button></div>

data.js

实现的接口函数

export function searchCountDown(start, end) {return request({url: 'countDown/getSE/',method: 'post',data: {start: start,end: end}})
}

点击事件的实现

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

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

数据展示

    <div class="article"><ul><li v-for="(item,index) in searchRes"><div class="ui grid" style="width: 100%;height: 60px;"><div class="four wide column"><span>{{ item.name }}</span></div><div class="four wide column"><span>{{ item.date }}</span></div><div class="four wide column"><span>{{ item.sign }}</span></div><div class="four wide column"><el-button type="danger" icon="el-icon-delete" circle @click="deleteC(item.id)"></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button></div></div><div class="ui divider"></div></li></ul>

运行结果

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

vue前端与Django后端查询一定时间段内的数据相关推荐

mysql查询特定时间数据视频_mysql查询特定时间段内的数据
参照文章(mysql查询时间段内数据)进行了操作. 先来建表语句: [sql] view plaincopySETFOREIGN_KEY_CHECKS=0;-- ------------------- ...
vue前端与Django后端数据交互
现在接触的项目是vue作为前端,Django作为后端的.二者之间的数据交互是二者连接起来的关键,这里以get为例,vue将后端拿到的数据进行展示.万事开头难,加油~ 后端数据库这是数据库中的数据, ...
【完美解决】MyBatis中怎么查询某个时间段内的数据
1.当使用SQL语句查询某个时间段的数据时,我们很自然的会想到使用between-and..来操作,但是如果使用between...and... 这个方法来查询某个时间段的数据时是需要传入两个参数的, ...
Vue前端与Django后端实现前后端分离连接
1.前端部分前端要触发一个事件,使得前端将信息发送给后端.例如一个登录事件,用户输入账号密码,点击登录按钮,即可将前端输入的信息发送给后端.该按钮绑定了一个事件,该事件放在methods配置项里边. ...
PGSQL查询某时间段内的数据、两个时间日期的分钟差、天数
一.根据当前时间获取到三天前截止到此分秒的数据(以当前时分秒进行过滤) SELECTsubmit_date FROMcrm_work_order WHEREsubmit_date BETWEEN ( ...
MySql查询某个时间段内的数据（前一周、前三个月、前一年等）
1.使用函数DATE_SUB DATE_SUB函数在当前时间减去一定的时间 DATE_SUB(date,INTERVAL expr unit) date:合法日期,可以是当前时间now() expr: ...
bootstrap-table的使用（3）--自定义搜索功能，数据库查询一个时间段内的内容并显示为例
自定义搜索功能 bootstrap-table是自带搜索功能的,但是搜索功能比较单一,如果我们有特殊的要求,那么需要自己写一个搜索功能,主要是应用于进行数据库查询,并将结果展示. 大致流程为: 1.利 ...
mysql 近几天内_MYSQL查询一周内的数据(最近7天的)
select * from wap_content where week(created_at) = week(now) 如果你要严格要求是某一年的,那可以这样查询一天: select * from ...
Vue前端和Java后端联调使用AES 前后端加密解密
Vue前端和Java后端联调使用AES 前后端加密解密最近在项目中需要针对重要数据进行加密传输,在网上找了一大推加密方式最终采用AES 加密 Java端 package com.zk.web.u ...