从零搭建一个django项目-12-首页模糊搜索功能

怪盗LYL

发布于 2022-06-13 13:27:10

5270

发布于 2022-06-13 13:27:10

首先找到我们的模糊搜索的输入框，<el-input class="ss-input" placeholder="模糊搜索，请输入关键字" v-model='ss_input' />,这里介绍下oninput事件对象，oninput 事件在用户输入时触发。
添加oninput="Search_act(event)"

<el-input class="ss-input" oninput="Search_act(ss_input)"  placeholder="模糊搜索，请输入关键字" v-model='ss_input' />

vue中使用@input <el-input class="ss-input" @input="Search_act($event)" placeholder="模糊搜索，请输入关键字" v-model='ss_input' />

Search_act(e) {
        alert(e);
      },

Search_act(event) {
				axios.get('http://localhost:8000/api/geturl', {					params:{						event:event
					},					headers: {						'content-type': 'application/json',						"AUTHORIZATION": 'jwt '+this.$cookies.get("login-token") //token换成从缓存获取
					}}).then((response) => {						this.v_hrefs = response.data.all_href;
					}).catch(err => {					console.log('操作失败' + err);
				})
			},

还是调用geturl接口，只是传了一个参数，现在修改下接口函数

class geturl(APIView):
    authentication_classes = [JwtAuthorizationAuthentication, ]
    def get(self, request, *args, **kwargs):
        index = request.GET.get("event",None)        if index ==None or len(index)==0:
            all_href = DB_href.objects.all().values()        else:
            all_href = DB_href.objects.filter(name__icontains=index).values()        return Response({"all_href":all_href})