本篇文章主要介绍了使用bootstrap4 + vue2实现分页查询的示例代码，现在分享给大家，也给大家做个参考。
写在前面
工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。
前端框架：Bootstrap4，Vue.js2
后台框架：spring boot，spring data JPA
立即学习“前端免费学习笔记（深入）”；
开发工具：IntelliJ IDEA，Maven
实现效果：
会员信息
如何使用Bootstrap+Vue来实现动态table，数据的新增删除等操作，请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕，本文主题开始。
一、使用Bootstrap搭建表格
表格区
登录后复制登录后复制
序号
会员号
姓名
手机号
办公电话
邮箱地址
状态
{{pageNow*10 + index+1}} {{user.id}} {{user.username}} {{user.mobile}} {{user.officetel}} {{user.email}} 正常 注销
分页区
登录后复制登录后复制 {{n}}
二、初始化Vue对象及数据
创建Vue对象
- var vueApp = new Vue({ el:"#vueApp", data:{ userList:[], perPage:10, pageNow:0, totalPages:0, checkedRows:[] }, methods:{ switchToPage:function (pageNo) { if (pageNo = this.totalPages){ return false; } getUserByPage(pageNo); } } });
登录后复制
初始化数据
- function getUserByPage(pageNow) { $.ajax({ url:"/user/"+pageNow, success:function (datas) { vueApp.userList = datas.content; vueApp.totalPages = datas.totalPages; vueApp.pageNow = pageNow; }, error:function (res) { console.log(res); } }); }
登录后复制
完整js代码：
- var vueApp = new Vue({ el:"#vueApp", data:{ userList:[], perPage:10, pageNow:0, totalPages:0, checkedRows:[] }, methods:{ switchToPage:function (pageNo) { if (pageNo = this.totalPages){ return false; } getUserByPage(pageNo); } } }); getUserByPage(0); function getUserByPage(pageNow) { $.ajax({ url:"/user/"+pageNow, success:function (datas) { vueApp.userList = datas.content; vueApp.totalPages = datas.totalPages; vueApp.pageNow = pageNow; }, error:function (res) { console.log(res); } }); }
登录后复制
三、使用JPA实现分页查询
controller接收请求
- /** * 用户相关请求控制器 * @author louie * @date 2017-12-19 */@RestController@RequestMapping("/user")public class UserController { @Autowired private UserService userService; /** * 分页获取用户 * @param pageNow 当前页码 * @return 分页用户数据 */ @RequestMapping("/{pageNow}") public Page findByPage(@PathVariable Integer pageNow){ return userService.findUserPaging(pageNow); }}
登录后复制
JPA分页查询
- @Servicepublic class UserServiceImpl implements UserService { @Value("${self.louie.per-page}") private Integer perPage; @Autowired private UserRepository userRepository; @Override public Page findUserPaging(Integer pageNow) { Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id"); return userRepository.findAll(pageable); }}
登录后复制
好了，至此功能完成，工程代码已在GitHub中分享，您可以 点击查看或下载 ，拥抱开源，共享让世界更美好。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用jQuery+CSS如何实现table表格
使用jQuery+CSS如何实现table表格
使用jQuery+CSS如何实现table表格
使用jQuery+CSS如何实现table表格
使用jQuery+CSS如何实现table表格
以上就是在Bootstrap4 + Vue2中如何实现分页查询的详细内容，更多请关注【创想鸟】其它相关文章！
