这次给大家带来Bootstrap4与Vue2实现分页查询功能（附代码），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}} | 正常 | 注销 |
登录后复制
分页区
登录后复制
二、初始化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); }}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
webpack构建多页面应用的步骤分析
axios如何给上传图片添加进度条
立即学习“前端免费学习笔记（深入）”；
vue使用axios时this指向哪里
以上就是Bootstrap4与Vue2实现分页查询功能（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772462.html
