【Django+Element UI】使用一个接口文件,搞定分页获取数据,模糊查询后分页获取数据
时间:2020-05-20
本文章向大家介绍【Django+Element UI】使用一个接口文件,搞定分页获取数据,模糊查询后分页获取数据,主要包括【Django+Element UI】使用一个接口文件,搞定分页获取数据,模糊查询后分页获取数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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__contains=keywords).order_by('id') # 模糊查询 pg = PageNumberPagination() pg.max_page_size = 200 pg.page_size_query_param = "size" pager_roles = pg.paginate_queryset(queryset=s_data, request=request, view=self) ser = PagerSerialiser(instance=pager_roles, many=True) data["code"] = 200 data["count"] = len(s_data) # 获取总数量 data["data"] = ser.data return Response(data) except Exception as e: data["code"] = 444 data["message"] = "请求异常" return JsonResponse(data)
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=6', { keywords: 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('/society/get/?page=1&size=6', { keywords: this.keywords_raw }).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 => { console.log(error) }) } } // 分页 handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { this.society_data = [], axios.post('/society/get/?page=' + val + '&size=6', { keywords: this.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 => { console.log(error) }) },
3:效果图
原文地址:https://www.cnblogs.com/wanghong1994/p/12924730.html
- 使用xUnit为.net core程序进行单元测试(中)
- Asp.Net 用Jquery和一般处理程序实现无刷新上传大文件
- WCF技术剖析之十五:数据契约代理(DataContractSurrogate)在序列化中的作用
- WCF技术剖析之十四:泛型数据契约和集合数据契约(上篇)
- WCF技术剖析之十四:泛型数据契约和集合数据契约(下篇)
- WCF技术剖析(卷1)之前言
- WCF技术剖析(卷1)之目录
- WCF技术剖析(卷1)之推荐序
- 谈谈基于SQL Server 的Exception Handling[上篇]
- 谈谈WCF中的Data Contract(4):WCF Data Contract Versioning
- 如何在silverlihgt中使用右键
- WCF技术剖析之十二:数据契约(Data Contract)和数据契约序列化器(DataContractSerializer)
- silverlight向服务器post数据类
- WCF技术剖析之十三:序列化过程中的已知类型(Known Type)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅谈Python 命令行参数argparse写入图片路径操作
- 硬核干货丨游戏大世界的超远视距处理手法,建议收藏!
- python实现npy格式文件转换为txt文件操作
- 从0开始打造UI框架:动态化框架Scrollview物理学算法解析
- 基于Keras的格式化输出Loss实现方式
- PHP信号处理机制的操作代码讲解
- php防止表单重复提交实例讲解
- Python实现封装打包自己写的代码,被python import
- 创建一个 Serverless 应用,真的没有这么难!
- PHP使用mongoclient简单操作mongodb数据库示例
- 基于TensorFlow的CNN实现Mnist手写数字识别
- django rest framework 自定义返回方式
- PHP+Ajax实现的检测用户名功能简单示例
- Yii框架学习笔记之session与cookie简单操作示例
- Ajax+Jpgraph实现的动态折线图功能示例