这次给大家带来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 < 0 || 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代码：
三、使用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分页查询
@Service
public 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);
}
} 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
聚彩手机网店系统 免费版
下载
聚彩手机商城系统，是一款专业于手机销售的独立手机网店系统，他拥有众多的手机参数选项，以及傻瓜式的设置选项，让您可以在５分钟内建立起专业而强大的手机销售网站。他拥有多套模版可以实时切换，前台拥有新闻中心、手机中心、配件中心、软件下载、手机报价、发货查询、保修查询、分店查询、产品的对比功能，代理与加盟的申请等功能，他拥有完善的会员中心，会员等级设置等，集成在线支付接口，超强ＳＥＯ，可以设置所有页面的t
立即学习“前端免费学习笔记（深入）”；
