如何使用Bootstrap4+Vue2實現(xiàn)分頁查詢
小編給大家分享一下如何使用Bootstrap4 + Vue2實現(xiàn)分頁查詢，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的潮南網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
寫在前面
工程為前后端分離設(shè)計，使用Nginx為前端資源服務(wù)器，同時實現(xiàn)后臺服務(wù)的反向代理。后臺為Java Web工程，使用Tomcat部署服務(wù)。
前端框架：Bootstrap4，Vue.js2
后臺框架：spring boot，spring data JPA
開發(fā)工具：IntelliJ IDEA，Maven
實現(xiàn)效果：
會員信息
如何使用Bootstrap+Vue來實現(xiàn)動態(tài)table，數(shù)據(jù)的新增刪除等操作，請查看使用Bootstrap + Vue.js實現(xiàn)表格的動態(tài)展示、新增和刪除 。交代完畢，本文主題開始。
一、使用Bootstrap搭建表格
表格區(qū)
|
序號 |
會員號 |
姓名 |
手機號 |
辦公電話 |
郵箱地址 |
狀態(tài) |
|
{{pageNow*10 + index+1}} |
{{user.id}} |
{{user.username}} |
{{user.mobile}} |
{{user.officetel}} |
{{user.email}} |
正常
注銷
分頁區(qū)
{{n}}
二、初始化Vue對象及數(shù)據(jù)
創(chuàng)建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);
}
}
});初始化數(shù)據(jù)
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實現(xiàn)分頁查詢
controller接收請求
/**
* 用戶相關(guān)請求控制器
* @author louie
* @date 2017-12-19
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
/**
* 分頁獲取用戶
* @param pageNow 當(dāng)前頁碼
* @return 分頁用戶數(shù)據(jù)
*/
@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);
}
}以上是“如何使用Bootstrap4 + Vue2實現(xiàn)分頁查詢”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章題目：如何使用Bootstrap4+Vue2實現(xiàn)分頁查詢
文章網(wǎng)址：
http://weahome.cn/article/jjhjoh.html
重慶分公司
重慶分公司
