简单的模糊搜索 Vue + django

# 模糊搜索
views.py

class 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__'