Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

Gray-Ice

个人博客兼个人网站

这里说的关键字查询,是要实现输入 fire water这两个词,然后后台将这两个词进行模糊查询。

Vue部分,用户在搜索框输入需要查询的内容后,前端将用户输入的内容进行判断,如果有空格,那么根据空格将字符串分开;如果没有空格,那么无需分开。

1
2
3
4
5
6
7
8
9
// indexOF方法找到目标返回1,找不到目标返回-1, text是用户输入的数据
if(this.text.indexOf(' ') !== -1){
// 将数据分开, 此方法返回的是一个对象而不是列表
this.text = this.text.split(' ')
// 将数据转化,转化之后数据形如:["1", "2"]
this.text = JSON.stringify(this.text)
}
// 获取后台数据
this.get_goods();

前端的处理就这么简单,那么到后台了:

首先,获取参数:

1
2
3
4
5
text = request.GET.get('text', None)
# 判断其是否为列表
if ',' in text:
# 对字符串进行处理,将其转化为列表
text = request.GET.get('text').replace("[", '').replace("]", '').replace('"', '').split(',')

接下来就到了关键时刻,对查询出来的数据进行处理:

1
2
3
4
5
6
7
8
9
10
11
# 如果text为列表,那么进行一下判断
if type(text) == list:
# 声明一个空列表,用来容纳数据
all1 = []
# 根据关键字进行模糊查询
for i in text:
my_list = Goods.objects.filter(name__contains=i).all()
# 将查询到的数据添加进空列表
all1.extend(my_list)
# 对数据进行去重操作
all1 = list(set(all1))

这样就对数据处理好了,没有重复数据,不会出现在查询”一加手机壳”的时候将”一加”有关的所有数据查出来又将”手机壳”有关的所有数据查出来后拼接在一起可能导致的同一数据出现两次的情况(如数据名为: 一加手机壳)。

然后返回给前端数据:

1
2
3
4
5
6
# 这里我用了分页操作,若是没有分页则不用切片
goods = all1[start_data: end_data]
# 这里我使用了restframework.serializer的ModelSerializer,是一个序列化操作
goodser = GoodsSer(goods, many=True)
# page_long为页数,data为查询到的内容,item_num为内容长度
return Response({'code': 200, 'page_long': page_long, 'data': goodser.data, 'item_num': len(all1)})

评论



愿火焰指引你