前端开发-数据分页请求和删除
来源:互联网 发布:淘宝基金欠款 编辑:程序博客网 时间:2024/06/01 09:27
最近更新时间:2017年5月31日14:57:09
做前端开发的过程中,将服务器数据展现出来是常见的业务需求,这个过程中需要用到分页处理方案。本文研究的实际案例是,移动端展示用户收藏的列表项,在该列表项页面,用户可以做滑动删除操作、点击查看详情和下拉底部点击‘查看更多’。
1、数据库存储和删除数据规则
购物网站用户中心的收藏列表,用来存储用户收藏的商品目录,以时间倒叙的方式存储在数据库中,前端请求数据库资源,服务器返回每页固定量(比如10条)数据;
用户删除某条数据时,前端要做两件事情:
第一,前端会发送http请求向后台服务器,服务器让数据库执行删除该条数据操作;数据库删除数据成功向前端返回成功响应,前端在删除回调函数执行下一步操作;
第二,数据库数据删除成功,前端执行删除DOM操作,即让用户看到该条数据视觉上消失;
2、业务逻辑实现
对于用户进入用户中心的收藏列表查看和删除收藏列表信息,是一个复杂的过程:
第一,用户首次进入收藏列表
前端向服务器发送第一次请求,执行一次数据请求方法;请求成功展示10条数据;用户上拉页面会再次执行请求数据操作,前端向服务器发送第二次请求,执行一次数据请求方法;以此类推,直到数据全部请求结束;
第二,用户删除收藏列表操作,分两种情况:
第一种情况,当前展示数据只是数据库部分数据;此时用户执行删除操作,或连续非跨页删除操作,或连续跨页删除操作,需要记录用户删除数据的最小页码,从而在用户再次请求数据时保证从数据库拿到的数据是重新排列的最新数据;
第二种情况,当前展示数据是数据库全部数据;此时不需要做特殊处理,用户删除一项,向后台发送一条删除指令,前端做DOM删除即可,不需要考虑用户删除哪一项,因为此时不需要向后台发送请求数据操作;
- 前端开发-数据分页请求和删除
- 前端请求后端,后端查询完毕传到前端 ,用layui 将 数据分页
- 前端分页和后端分页
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能
- angularjs和jquery前端发送以http请求formdata数据
- 异步请求数据和Js分页控件结合使用心得
- 模拟get和post请求,获取分页数据
- 一次性加载数据,前端分页
- js实现前端数据分页
- angularjs数据请求、分页问题
- 前端开发跨域请求
- 基本分页和请求分页存储管理
- Mock.js生成随机数据,拦截 Ajax 请求,让前端独立于后端进行开发
- 解决前端Html5和Egret跨域请求Http数据的例子
- 解决前端Html5和Egret跨域请求Http数据的例子
- 微信小程序ajax请求分页加载数据
- 【iOS开发-网络】使用get请求发送和接受数据
- 前端开发模块化/解耦化异步请求
- Elasticsearch数据重新索引
- 通过Putty连接windows Bat和Linux Shell
- Java还要再学一遍基础(二)Java中的关键字
- Linux 网络性能测试工具 iperf 的安装和使用
- 计算机视觉领域的一些牛人博客,超有实力的研究机构等的网站链接
- 前端开发-数据分页请求和删除
- JPA动态查询代码封装
- HTTPS的配置
- spark mllib源码分析之随机森林(Random Forest)(五)
- PackBits算法
- linux top命令中各cpu占用率含义及案例分析
- Masonry 自动布局使用案例
- React this.state
- C#之转义符