张勇刚,ca1718,wogou
写在前面
工程为前后端分离设计,使用nginx为前端资源服务器,同时实现后台服务的反向代理。后台为java web工程,使用tomcat部署服务。
实现效果:
会员信息
如何使用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分页查询
@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); } }
好了,至此功能完成,工程代码已在github中分享,您可以 点击查看或下载 ,拥抱开源,共享让世界更美好。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论