关于Vue分页循环动态获取页码

在一次案例中我用到了mybatis-plus分页的插件。但是前端不知道怎么动态生成页面

  @RequestMapping("/page/{pageNumber}")public Page<UserInfo> list(@PathVariable("pageNumber") Integer pageNumber) {//先把用户传过来的每页几条和第几页进行查询，得到总共可以分几页的数据。Page<UserInfo> page2=new Page<UserInfo>(pageNumber,10);Page page1 = userInfoMapper.selectPage(page2, null);long pages = page1.getPages();if (pageNumber==null ||pageNumber>pages){pageNumber=1;}//进行判断。如果用户传过来的参数大于第一次查询的总页数就强制回到第一页if (pageNumber==null){pageNumber=1;}Page<UserInfo> userInfoPage = userInfoService.listPage(pageNumber);System.out.println(userInfoPage.getPages());//可以分几页System.out.println(userInfoPage.getTotal());//总共有几条System.out.println(userInfoPage.getSize());//每页显示几条System.out.println(userInfoPage.hasNext());//是否有上页System.out.println(userInfoPage.hasPrevious());//是否有下页System.out.println(userInfoPage.getCurrent());return userInfoPage;}

前端

var v = new Vue({el: '#app',data: {UserInfo: [],id: "",mobile: "",nickName: "",name: "",page:{pageNumber:1,pageSize:5,pagetotal:0,//总条数pages:0,//总页数}},mounted: function () { //页面加载的时候this.find()},methods: {find: function (index) {this.page.pageNumber=index||this.page.pageNumberaxios.post(`http://localhost:8080/page/${this.page.pageNumber}`).then(Response => {this.UserInfo = Response.data;this.page.pagetotal=Response.data.totalthis.page.pages=Response.data.pages})},

这里是循环获取页面

 <div><ul class="pagination" ><li v-for="index in page.pages" @click="curPage(index)"><a href="#">{{index}}</a></li></ul></div>

curPage(index){this.find(index)},

关于Vue分页循环动态获取页码相关推荐

vue v-for循环动态获取_快速、简洁讲明Vue中vfor循环key的作用
概要关于v-for中的key问题,其实这已经是个很常见的问题了,基本网上一搜一大把,面试的时候也常常会被问到,讲这个问题可能会设计DOM与虚拟DOM,还有很重要的Diff算法.传送门作用(重头戏) ...
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码重点就是:style="{background: ...
Vue分页页码栏设计
Vue分页页码栏设计效果展示 HTML 数据需要函数需要运用效果展示 HTML <div class="page_bar no-select"><ul c ...
获取表数据_大数据抽取解决方案——kettle分页循环
数据仓库开发中,ETL是主要的部分,在涉及到单表数据量比较大时(千万以上)会遇到两方面的问题: 抽取效率(时间长) 性能问题(服务器内存资源有限) 比如最近项目中要抽取一个2000万条数据的表,存储大 ...
vue 获取动态域名_vue项目接口域名动态获取操作
需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前进行接口域名获取,然后重置接口域名的配置项. 实现: 1.config/index.js 文件进行基础配置 impo ...
vue mixins（vue3 hooks）动态获取div高度
之前转载过一篇文章: https://blog.csdn.net/qq_37167049/article/details/103084927 可以动态计算div 高度,但是比较繁琐的痛点是: 需要在每 ...
ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
项目总结-vue分页组件集成
项目总结-vue分页组件集成后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...
2019独角兽企业重金招聘Python工程师标准>>> 公司让做一个app基础数据管理后台系统,前端就以layuiCMS2.0为模板,拷贝到项目resources/static目录下 ...

关于Vue分页循环动态获取页码

关于Vue分页循环动态获取页码相关推荐

最新文章

热门文章