【Django+Element UI】使用一个接口文件,搞定分页获取数据,模
发布时间:2020-12-15 17:09:20 所属栏目:大数据 来源:网络整理
导读:1:序列化获取数据的接口设计 1:分页获取序列化数据 2 :是个能传参数的接口 class Society(APIView): def post(self,request): keywords = str(request.data.get( " keywords " )) data = {} try : s_data = models.Society.objects.filter( name__contain
1:序列化获取数据的接口设计 1:分页获取序列化数据 2:是个能传参数的接口 2:前端代码的设计 1:创建2个关键词keywords_raw,keywords,当没有使用搜索功能时,我们传上去的是keywords,它是空值,所以接口会返回给我们所有的数据,分页请求的keywords也是空值,所以这个时候的请求数据是所有的 2:当我们在输入框上输入了关键词keywords_raw,点击时,这个时候将keywords_raw的值赋值给keywords,这样子去请求就可以做到搜索关键词后的分页点击是属于搜索关键词的数据 代码: HTML: <input type=text" class=form-control" placeholder=输入关键词查找社团" v-model=keywords_raw"> <button @click=search"> 搜索</button> JS: data:{ keywords_raw: "",keywords: // 钩子函数渲染数据 created() { 数据渲染 axios.post(/society/get/?page=1&size=6keywords: this.keywords # 上传的参数是keywords 这个时候还是空值,请求的数据是所有的 }).then(response => { this.totals = parseInt(response.data.count) response.data.data.some((item,i) => { this.society_data.unshift({ societHead: item.head,societUser: item.user,societName: item.name,societMember: item.member,societTime: item.time.substring(0,10),pk: item.id,}) }) }).catch(error => { alert(请重新登录) window.location.href = /login/ }) } // 搜索: // search search() { if ( this.keywords_raw == ) { alert(输入框不能为空) } else { this.society_data =[] // 请求的时候赋值给keywords this.keywords =this.keyword_raw # 直接同步两个参数 axios.post( { this.totals = parseInt(response.data.count) response.data.data.some((item,1)"> { this.society_data.unshift({ societHead: item.head,}) }) }).catch(error => { console.log(error) }) } } // 分页 handleSizeChange(val) { console.log(`每页 ${val} 条`); },handleCurrentChange(val) { this.society_data = [],axios.post(/society/get/?page=' + val + &size=6keywords: this.keywords # 上传的是参数是关键词 }).then(response => { console.log(error) }) }, 3:效果图 ? ? ? ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |