使用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搭建表格

表格区

分页区

{{n}}

二、初始化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);

}

}

好了，至此功能完成，工程代码已在github中分享，您可以 点击查看或下载 ，拥抱开源，共享让世界更美好。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。