使用Bootstrap4 + Vue2实现分页查询的示例代码

2019-11-19 14:40:47

字体：大中小

来源：转载

供稿：网友

写在前面

工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。

前端框架：Bootstrap4，Vue.js2
后台框架：spring boot，spring data JPA
开发工具：IntelliJ IDEA，Maven

实现效果：

会员信息

如何使用Bootstrap+Vue来实现动态table，数据的新增删除等操作，请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除。交代完毕，本文主题开始。

一、使用Bootstrap搭建表格

表格区

<div class="row">   <table class="table table-hover table-striped table-bordered table-sm">    <thead class="">    <tr>     <th><input type="checkbox"></th>     <th>序号</th>     <th>会员号</th>     <th>姓名</th>     <th>手机号</th>     <th>办公电话</th>     <th>邮箱地址</th>     <th>状态</th>    </tr>    </thead>    <tbody>    <tr v-for="(user,index) in userList">     <td><input type="checkbox" :value="index" v-model="checkedRows"></td>     <td>{{pageNow*10 + index+1}}</td>     <td>{{user.id}}</td>     <td>{{user.username}}</td>     <td>{{user.mobile}}</td>     <td>{{user.officetel}}</td>     <td>{{user.email}}</td>     <td v-if="user.disenable == 0">正常</td>     <td v-else>注销</td>    </tr>    </tbody>   </table>  </div>

分页区

<div class="row mx-auto">   <ul class="nav justify-content-center pagination-sm">    <li class="page-item">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-backward" @click="switchToPage(0)"> </i></a>    </li>    <li class="page-item">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-backward" @click="switchToPage(pageNow-1)"></i></a>    </li>    <li class="page-item" v-for="n in totalPages" :class="{active:n==pageNow+1}">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="switchToPage(n-1)" class="page-link">{{n}}</a>    </li>    <li class="page-item">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-forward" @click="switchToPage(pageNow+1)"></i></a>    </li>    <li class="page-item">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-forward" @click="switchToPage(totalPages-1)"></i></a>    </li>   </ul>  </div>

二、初始化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代码：

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

JPA分页查询

@Servicepublic 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); }}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于Vue 2.0的模块化前端 UI 组件库小结

下一篇：详解设置Webstorm 利用babel将ES6自动转码成ES5