Bootstrap4與Vue2實作分頁查詢功能（附程式碼）

這次帶給大家Bootstrap4與Vue2實作分頁查詢功能（附程式碼），Bootstrap4與Vue2實作分頁查詢功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

寫在前面

# 工程為前後端分離設計，使用Nginx為前端資源伺服器，同時實作後台服務的反向代理。後台為Java Web工程，使用Tomcat部署服務。

1. 前端框架：Bootstrap4，Vue.js2

2. 後台框架：spring boot，spring data JPA

3. ## 開發工具： IntelliJ IDEA，Maven

如何使用Bootstrap Vue來實現動態table，資料的新增刪除等操作，請查看使用Bootstrap Vue.js實作表格的動態展示、新增和刪除 。交代完畢，本文主題開始。

一、使用Bootstrap建構表格

表格區

<p>
   </p>

                                                                                                                                                 

	序号	会员号	姓名	手机号	办公电话	邮箱地址	状态
	{{pageNow*10 + index+1}}	{{user.id}}	{{user.username}}	{{user.mobile}}	{{user.officetel}}	{{user.email}}	正常	注销

   分頁區

<p>
   </p>

    
•            
    
•           
    
•      {{n}}     
    
•           
    
•           
   

  

二、初始化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程式碼：

<script>
 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);
  }
 }
 });
 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);
  }
 });
 }
</script>

三、使用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<user> findByPage(@PathVariable Integer pageNow){
 return userService.findUserPaging(pageNow);
 }
}</user>

JPA分頁查詢

@Service
public class UserServiceImpl implements UserService {
 @Value("${self.louie.per-page}")
 private Integer perPage;
 @Autowired
 private UserRepository userRepository;
 @Override
 public Page<user> findUserPaging(Integer pageNow) {
 Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id");
 return userRepository.findAll(pageable);
 }
}</user>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

webpack建立多頁面應用程式的步驟分析

axios如何為上傳圖片新增進度條

vue使用axios時this指向哪裡

以上是Bootstrap4與Vue2實作分頁查詢功能（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！