element ui +mybatisPlus分页插件实现分页功能
elementui pagination插件
当然这里的依赖部分就需要去创库ctrl+v了
<!--分页部分 pagination插件 @current-change="handlepagechange"当页面更改时候--><el-paginationclass="pagination"backgroundlayout="prev, pager, next,jumper,total"@current-change="handlepagechange"<!--这个方法是当切换布局控制的页号时候能够改变参数-->:total="pagination.total":page-size="pagination.pageSize":current-page="pagination.currentpage"><!--分别是前一页,当前页面,下一个,跳转布局 总数 页面大小 当前也--></el-pagination>
这种是无法选择页面大小的分页
该前端的请求处理以及切换页号的方法
<!--在created页面渲染完成时候加载这个方法 赋值给要展现数据的空数组-->getpage(){let this1=this;/*** 组织参数然后传递url*/axios.get("http://localhost:8070/facebook-data/"+this1.pagination.currentpage+'/'+this1.pagination.pageSize).then((res)=> {console.log(res.data);this1.pagination.pageSize=res.data.size;this1.pagination.total=res.data.total;//记录总数 前端loyout中展示this1.pagination.currentpage=res.data.current;//重新经行赋值this1.tableData=res.data.records;//把后端返回的记录给数组})},/*** 当页面数值修改 当前页面的数值也该修改* @param currentPage*/handlepagechange(currentPage){this.pagination.currentpage=currentPage;//传入参数变成当前页面 在调取查询操作this.getpage();},/*** 大部分调用的crud方法·都是本身mubaties框架封装和好的 所以参数名应该根据返回值决定*/data() {return {tableData: [{keyWords:'',content: '',status:'',readCount:'',shareCount:'',chineseContent:'',topSort:'',catchTime:''}],/*插件初始化参数 我这里是默认初始1页 10行*/pagination:{currentpage:1,pageSize:10,total:0,}}}
如果是功能完全的分页
应该还会多一个改变页面大小的方法
<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentpage":page-sizes="[30, 50, 100, 200]"<!--可选择页面大小-->:page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination>
对应方法
methods: {initial(){//页面加载初始化let this1=this;/*** 组织参数然后传递url*/axios.get("http://localhost:8070/recruitmentAticle+this1.pagination.currentpage+'/'+this1.pagination.pageSize).then((res)=> {console.log("输出总数"+res.data.data.total);// this1.pagination.pageSize=res.data.size;// this1.pagination.total=res.data.total;// this1.pagination.currentpage=res.data.current;// this1.tableData=res.data.records;})},handleSizeChange(pageSize) { <!--这里的参数是和选择大小组件绑定到-->console.log("页面大小改变"+pageSize)this.pageSize = pageSizeconsole.log(this.pageSize)this.initial()},handleCurrentChange(pageNum) {console.log("当前页面改变"+pageNum)this.currentpage = pageNumconsole.log(this.currentpage)this.initial()}}
``
`后端 (Mybatis plus)
首先 先进行注册拦截器
/*** 解决跨域问题 MybatiesPlus分页拦截器* 很多插件和过滤器拦截器在spring中是通过xml配置形成注册* springboot省去了这一繁琐流程所以需要在Configuration* 配置类中注册* 分页面拦截器*/@Configuration
public class MyConfiguration {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor(){/*** 上述代码第一行是创建MyBatisPlus的拦截器栈,这个时候拦截器栈中没有具体的拦截器* 第二行是初始化了分页拦截器,并添加到拦截器栈中。* 如果后期开发其他功能,需要添加全新的拦截器,按照第二行的格式继续add进去新的拦截器就可以了。* **总结*** 1. 使用IPage封装分页数据* 2. 分页操作依赖MyBatisPlus分页拦截器实现功能* 3. 借助MyBatisPlus日志查阅执行SQL语句*/MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor());return interceptor;}}
然后Controller层的使用
@Autowired
private FacebookDataService facebookDataService;
@GetMapping("/{currentpage}/{pageSize}")
@CrossOrigin(origins = "*")
public IPage getallorpage(@PathVariable("currentpage") Integer currentpage, @PathVariable("pageSize") Integer pageSzie){IPage page = new Page(currentpage,pageSzie);IPage iPage = facebookDataService.page(page, null);/*** 如果当前页面值大于了总页码数值 从新操作,使用最大页码数值作为当前页码*/if (currentpage >iPage.getPages()){page = new Page(iPage.getPages(),pageSzie);}return iPage;
}
可以看到这里我传输了俩个参数一个是当前页号 一个是页面大小,而在
在sql语句中分页是由limit X,Y完成
y表示页面大小
x代表当前页面第一个数据的索引 x=(当前页号-1)乘*y;由于Mybatis 的基础mapper中封装好了 ,所以这里传输当前页号,页面大小即可
结果以及日志如下
(这里只有一个参数因为传入的当前页号为1故省去了(1-1)**任何数为0 故省略)
其中用到的 Mapper ,service,serviceimpl使用封装好的即可
service层接口 以及实现类型
public interface FacebookDataService extends IService<FacebookData> {public IPage<FacebookData> getPage(Integer currentpage, Integer pageSize, FacebookData facebookData);
}
这里的lambda表达式处理是我用来做筛选条件的 ,IService的实现方法本质是调用了basemapper的selectpage方法
@Service
//这里的page我重写时因为有时候需要条件构造器构造条件
public class FacebookDataServiceImpl extends ServiceImpl<FacebookDataMapper, FacebookData> implements FacebookDataService {@Autowiredprivate FacebookDataMapper facebookDataMapper;@Overridepublic IPage<FacebookData> getPage(Integer currentpage, Integer pageSize, FacebookData facebookData){IPage page = new Page(currentpage,pageSize);QueryWrapper<FacebookData> lqw = new QueryWrapper<FacebookData>();lqw.like("KeyWords",facebookData.getKeyWords()).like("ChineseContent",facebookData.getChineseContent()).like("Status",facebookData.getStatus()).like("CatchTime",facebookData.getCatchTime());
// LambdaQueryWrapper<FacebookData> lqw = new LambdaQueryWrapper<FacebookData>();
//
// lqw.like(Strings.isNotEmpty(facebookData.getKeyWords()),FacebookData::getKeyWords,facebookData.getKeyWords());
// lqw.like(Strings.isNotEmpty(facebookData.getChineseContent()),FacebookData::getChineseContent,facebookData.getChineseContent());
// lqw.like(Strings.isNotEmpty(facebookData.getCatchTime().toString()),FacebookData::getCatchTime,facebookData.getCatchTime());
// lqw.like(Strings.isNotEmpty(facebookData.getStatus().toString()),FacebookData::getStatus,facebookData.getStatus());facebookDataMapper.selectPage(page, lqw);return facebookDataMapper.selectPage(page, lqw); //实际数据层处理方法 service处理逻辑 然后由数据层mapper对数据修改}}
无赛选条件时分页就简单许多,毕竟都是框架封装好的
@Overridepublic Result queryList(Integer currentPage,Integer pageSize) {IPage<TRecruitmentAticle> page = query().page(new Page<>(currentPage.longValue(),pageSize.longValue()));return Result.ok(page);}
basemapper的selectpage是mybatisplus封装好的
@Mapper
public interface FacebookDataMapper extends BaseMapper<FacebookData> {}
然后我们来看看selectpage的参数以及返回值
所以我们在调用分页的时候需要创建page对象,以及条件构造器Wrapper(可以为null)
返回值也为page对象
前端接受返回值(很容易搞混)
axios返回的数据结构是
一个相应体 ,除了有我们发给前端的数据以外还有很多请求信息,我们发送的数据res.data里面封装起来的,但是一般为了和前端统一不能直接返回数据,而是封装统一返回体,数据在返回体里的
/*** 定义返回·结果类*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {private Boolean success;private String errorMsg;private Object houduandata;private Long total;public static Result ok(){return new Result(true, null, null, null);}public static Result ok(Object data){return new Result(true, null, data, null);}public static Result ok(List<?> data, Long total){return new Result(true, null, data, total);}public static Result fail(String errorMsg){return new Result(false, errorMsg, null, null);}
}
所以这时候的数据取出是
res.data.houduandata
element ui +mybatisPlus分页插件实现分页功能相关推荐
- jquery php 分页插件,jQuery 分页插件代码
jQuery 分页插件代码 js代码 var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总 ...
- 使用PageHelper分页插件手动分页,其他查询数据出现串连问题
在一个需求中,需要在代码中进行分页,于是就选用了PageHelper分页插件进行分页,刚开始的时候忘记了PageHelper分页插件的用法于是我就用: // 设置分页查询条件 PageHelper.s ...
- spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
文章目录 前言 正文 业务场景 后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...
- Mybatis采用分页插件实现分页
前言 小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识,有兴趣的小伙伴可以关注一下! 也许一个人独行,可以走的很快,但是一群人结伴而行,才能走的更远!让我们在成长的道路上互相学习,让 ...
- java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
- 全注解怎么使用分页插件_分页插件使用的方式
分页插件使用的方式 修改 pom 文件,添加分页 jar 包依赖 修改 mybatis.xml 文件 UserDao 接口,UserMapper.xml 添加对应方法与实现 sql 对应 UserSe ...
- mybatis分页插件_MyBatis 分页插件 5.2.0 发布
时隔整整8个月,分页插件这次带来了一次大的更新. 5.2.0 - 2020-07-26 •jsqlparser升级到3.2版本,sql解析更好,对sqlserver支持更好.•修改 sqlserver ...
- [置顶]mybatis分页插件实现分页...
1.了解过程:在数据库服务器中,sql语句实现分页便要每个查询语句都要写上limit(开始,结束),并且不能灵活的随前端变化,为此使用拦截器的方法,过程:拦截器拦截请求的sql语句(根据需要拦截的ID ...
- 使用element ui 的日期插件搜索清空时报错
1.先贴上一张图,供您看一看 Error in v-on handler: "TypeError: Cannot read property '0' of null" 我这报错报了 ...
最新文章
- 今天带你们走进缓存的雪崩、击穿、穿透基本概念
- mysql 8.14 rpm安装_centos8 安装 mysql8
- 算法训练 连续正整数的和 (枚举)
- 【图像处理】纹理检测算法
- 【内网安全】域横向PTHPTKPTT哈希票据传递
- Nginx安装及配置简介
- 前端如何调用后端接口_后端开发:如何写出可靠的接口
- 前端ajax传递json格式参数,后端springboot接收
- php跨进程内存共享,进程管理与内存共享
- 升级nodejs的方法(3)
- 思科:多款主流信息传递应用程序易遭到会话劫持
- 【AD封装】DB9接口公母头(带3D)
- 使用AdventNet快速开发网管软件Agent端
- 2021蓝桥杯省赛c++A
- 流量卡之家:物联网帮助我们应对全球问题的5种方式
- 01-游戏分类与热点探索
- 内核区间树的使用Demo
- android手机红外代码HAL,手机红外遥控器发送红外信号到STM32【HAL库】
- Linux中的大于号和小于号
- linux 源码编译 ./configure 的配置和用法
热门文章
- 荣耀v6平板怎么升级鸿蒙系统,荣耀平板V6如何进行手机克隆?教你轻松导入重要数据...
- 天刀手游服务器注册不了,《天涯明月刀》手游连接服务器失败解决办法
- 增值你的C++技能,C++成为WEB后台“颜值 ”担当(一)
- ElementUI--入门教程
- @Transactional详解与使用示例
- 盘点 2011 年五款开源的 iPhone/Android 游戏
- win10 启动子系统Linux报错 Error: 0x800701bc WSL 2
- Rao Kambhapati、Tomaso Poggio、蒲慕明、邓力、林德康、李泽湘论道CCAI 2016
- unity打包后运行出错_一种Shader变体收集和打包编译优化的思路
- 辨析数字接收阵列增益分配