使用Bootstrap4 + Vue2实现分页查询的示例代码
发布时间：2020-12-17 02:40:03 所属栏目：百科 来源：网络整理
导读：写在前面 工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。 前端框架：Bootstrap4，Vue.js2 后台框架：spring boot，spring data JPA 开发工具：IntelliJ IDEA，Maven 实现效果：
写在前面工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。
实现效果：
如何使用Bootstrap+Vue来实现动态table，数据的新增删除等操作，请查看。交代完毕，本文主题开始。 一、使用Bootstrap搭建表格表格区 序号 |
会员号 |
姓名 |
手机号 |
办公电话 |
邮箱地址 |
状态 |
分页区 二、初始化Vue对象及数据创建Vue对象 = this.totalPages){
return false;
}
getUserByPage(pageNo);
}
}
});
初始化数据 完整js代码：
var vueApp = new Vue({
el:"#vueApp",data:{
userList:[],checkedRows:[]
},methods:{
switchToPage:function (pageNo) {
if (pageNo < 0 || pageNo >= this.totalPages){
return false;
}
getUserByPage(pageNo);
}
}
});
getUserByPage(0);
function getUserByPage(pageNow) {
$.ajax({
url:"/user/"+pageNow,error:function (res) {
console.log(res);
}
});
}
三、使用JPA实现分页查询controller接收请求 @Autowired
private UserService userService; /**
JPA分页查询 @Value("${self.louie.per-page}") @Autowired @Override 好了，至此功能完成，工程代码已在GitHub中分享，您可以 点击查看或下载 ，拥抱开源，共享让世界更美好。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
