# 模糊搜索views.pyclass Sousou(APIView): def post(self, request): sou = request.data.get('sou') #从前端接收的值 if not sou: return Response({'code': 10020, 'message': '输入不能为空'}) # 去表里查询 字段名加__contains(包含) = 从前端接收的值 aa = Stu.objects.filter(name__contains=sou) if not aa: #返回错误信息 return Response({'code': 10050, 'message': '输入不存在'}) #序列化 ww = ShowstuSerializers(aa, many=True) #返回结果 data是序列化里的字段 return Response({'code': 200, 'message': '', 'data': ww.data})vue 代码
<template> <div> <h1>展示学生</h1> <table border="1"> <tr> <td>学生姓名</td> <td>学生照片</td> <td>操作</td> <td>多选</td> <td>修改</td> </tr> 搜索<input v-model="sou"> <button v-on:click="sousuo">搜索</button> <h1>搜索结果</h1> <table border="1"> <tr v-for="i in alist"> <td>{{i.name}}</td> </tr> </table> </div></template><script> import showstu2 from "./showstu2"; export default { name: "showstu", components: { showstu2:showstu2 }, data:function () { return{ alist:[], //初始化列表 } }, methods:{ sousuo:function () { this.axios({ url:'/api/a/sousou/', data:{'sou':this.sou}, method:'post' }).then(res=>{ if (res.data.code==200){ //code为200 赋值 值是序列化里的字段 this.alist = res.data.data }else{ alert(res.data.message) } }).catch(err=>{ }) }, }</script><style scoped></style>
序列化 代码
class ShowstuSerializers(serializers.ModelSerializer): class Meta: model = Stu fields='__all__'