In the development process, we often encounter functions such as filtering and query, such as querying data in a certain period of time instead of all data.
In this way, we need to send the time period parameter to the backend, and then process the query on the backend.
Here is a simple example of Django backend and vue frontend to record the approximate implementation.
Backend database
Here are some simple data. The important thing is date. We need to filter based on the date and return to the front end.
models.py
class CountDownSign(models.Model):
name = models.CharField(max_length=1000)
date = models.DateField()
sign = models.CharField(max_length=200)
serializers.py
The drf framework is introduced here, but the idea of filtering and querying has nothing to do with this framework.
class CountDownModelSerializer(serializers.ModelSerializer):
class Meta:
model = CountDownSign
fields = '__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
Provide an interface for filtering queries. Get the start and end dates passed by the front end. The core code is as follows
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)
Front-end interface
Here we briefly give two date-pickers for receiving the start and end time, and bind events to the search.
<div class="datePicker">
<div class="block" style="float: left">
<el-date-picker
v-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-picker
v-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
Implemented interface function
export function searchCountDown(start, end) {
return request({
url: 'countDown/getSE/',
method: 'post',
data: {
start: start,
end: end
}
})
}
Implementation of click events
Determine the legitimacy of the input, and accept the data for data binding display
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("时间范围出错");
}
},
Data Display
<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>
operation result
It can be seen that the returned data are all within the time range. The data returned at zero hour on February 25th is February 5th. Because of the data formatting, the data on the 25th is also returned.
