虚拟界面分页问题的实现

背景介绍

最近公司后台想修改现在的后台管理系统，说以前的太丑了，不好用，然后扔给我一个ant-design-pro链接，说他看这个挺好的。

当时我对自己说，之前的项目混合在你的java项目中，类似于普通的jsp页面。只是很多css和js文件，我不敢看(好吧，我承认我都不敢看)。奇怪的是它能很快装上。Ant-design最初是为react而设计的，ant-design-pro自然会使用react。不得不说这个界面看起来真的很舒服。

看蚂蚁-design-pro的官方文档，好像和不看差不多？算了，我们直接看代码，理清思路，大致了解一下。除了反应路由器，DVA还用于状态管理。解决了Redux的异步问题，或者直接开始写页面。

等等，我想我错过了什么。哦，是的，让我们先看看打包文件的大小。我一打包心就凉了。最大的js超过900 K，ant-design的源文件真的很大。React，我只会写代码，所以这个打包优化对我来说有点难。这个时候我想到公司100万的带宽和这些后台的技术能力，不然我还是放弃这个技术栈吧。你不能指望任何连请求头都看不懂的人，CORS和nginx静态服务器给我弄个静态服务器，然后顺便打开gzip。算了，找一个vue元素-ui的背景模板，不用费太大力气就能找到vue元素-admin。

Vue-element-admin工作得很好，就是界面不符合我的理想情况，所以针对ant-design-pro做了一点修改，列表页面大概如下图。列表的数据应该分页。普通列表页面只有一个页面栈，即用户点击地址栏的后地址栏时，会返回到上一个页面栈，而不是上一个页面的数据，这不符合用户的习惯。毕竟传统网站可以回到上一页。好吧，如果你不多说，让我们言归正传。

第一步：更改地址栏

假设列表页面的路径为/user/list，与分页相关的参数为{page: 1，pagesize: 10}。当从其他页面跳转时，我们的路径通常不包含任何参数，后续的列表数据会根据页面和页面的页面大小进行更改。当不使用保活缓存组件时，列表页面中的每个条目也相当于第一个条目

既然列表数据随着页面和页面大小而改变，为什么不直接从地址栏获取页面和页面大小进行分配呢？那么改变地址栏的代码是直接写在当前页面上，还是作为分页组件独立编写呢？在可重用性方面，最好是独立的。毕竟其他页面也可能用到，不能每次都复制粘贴。组件化的意义是什么？当然，并不是说分页一定要用这个自定义分页组件，只是建议在主页面需要分页的时候使用(非屏蔽层，有些页面在点击一行数据时会在屏蔽层显示子列表，此时可以使用element-ui的分页组件)。

更改地址栏时，我们不希望没有分页参数的页面栈存在，所以直接替换。

MyPagination.vue的初始结构是：

模板div class=' flex all-center '模板v-if=' total 0 ' El-paging : page-size=' page size ' : total=' total ' : current-page=' page '背景布局='prev，pager，next，jumper，total ' class=' my-paging ' @ current-change=' change page '/template/div/template script export default { name : ' my paging '，prop : { total : { type : }，methods : { change page(val){ this。handlepage(' push '，val，这个。页面大小)；这个$emit('change '，val，this。页面大小)；}，getCurrentPage() { var { page，pagesize }=this .$ route.queryif(！页面||!页面大小){这个。handlepage(' replace '，page || 1，page size | | this。页面大小)；返回真；}返回false}，handlePage(类型，页面，页面大小){这个.$router[type]({ path: this .$route.path，query: {.这个$route.query，page，pagesize }，})；} },}/脚本！-添加"作用域"属性以将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-仅限样式限定范围。my-paging { padding-top : 24px；}/样式父组件的关键代码：

my paging : total=' total ' : page size=' page size ' : page=' page ' : total pages=' total pages ' @ change=' change page '/methods : { change page(page，pagesize) { var _page=this.page，_ page size=this。页面大小；this.page=pagethis。页面大小=页面大小；如果（页面！==_ page pagesize | | _ pagesize！==页面大小)这个。fetch data()；//非首次进入页面时再获取分页数据，因为在创造钩子中已经获取过一次了。 },}实现效果： 首次进入该页面时，如果不含有分页参数，就会先改变分页参数，然后再获取数据，之后点击分页组件的页码也会获取分页之后的数据。

第二步： 观察路由变化

上一步的实现效果乍一看好像没什么不对劲的地方，但是如果直接改变地址栏的话，显示的当前页和当前数据都不会变化。前端路由在页面的查询参数（指的是路由器的查询参数，可不是普通页面的查询参数)变化时，默认是不会重新加载的，除非页面的键发生变化，这样是为了尽可能的防止页面重新渲染，所以就不用键的方式解决了，直接通过某视频剪辑软件的看检测$路线的变化，从而改变当前页和当前数据的显示问题。

在MyPagination.vue中新增：

watch: { '$route'(to，from) { let { page，pagesize }=to.queryif(！this.getCurrentPage()) { this .$emit('change '，page || 1，page size | | 10)；} }},第三步： 控制页面大小的大小

在上一步的效果中，当改变地址栏的页和页面大小时，列表页的数据也会随之变化。既然是根据地址栏的参数变化，那么新的问题就产生了，

如果用户输入的页大于页面总数呢？

这个时候主要就看后台怎么设计了，

返回第一页的数据。

getCurrentPage() { var { page，pagesize }=this .$ route.query/*(总页数0(页面total Pages))；满足总页数大于0且当前页大于总页数时，跳转到第一页*/if(！页面||!页面大小| |(TotalPages 0(Page TotalPages))){这。handlePage(' replace '，page || 1，这个。页面大小)；返回真；}返回false}，返回最后一页的数据（我觉得这种操作应该是比较合理的)。

getCurrentPage() { var { page，pagesize }=this .$route.query，MAX_PAGESIZE=this.max，totalPages=this.totalPagesif(！页面||!页面大小){这个。handlepage(' replace '，page || 1，page size | | this。页面大小)；返回真；} else if(TotalPages 0(page TotalPages)){ this。handlePage(' replace '，TotalPages，页面大小)；返回真；}返回false}，替换当前页面栈，返回真的作用是阻止看中的后续操作，取消本次请求。替换页面以后，请求远程数据，更新当前页和数据的显示。

返回一个空数组(可能大多数密室都是这样设计的，他们永远不应该认为页面会大于总页数)。代码与2中的相同。

以上是基于totalPages的确认情况，但如果是第一次进入页面，情况会有所不同。

如果是第一次进入页面，totalPages第一次为0，也就是地址栏的参数不会改变，那么地址栏和分页组件的显示就会不一致。此时，您可以在分页组件中观察totalPages的变化。

totalPages(newVal，old Val){ if(old Val===0 NewVal 0){ this . handlePage(' replace '，this.page，this . page size)；}}页面太大怎么办？

页面大小必须受到限制。如果太大，在后台查询数据会非常慢，还可能造成压力。解决方法其实很简单，就是给道具添加一个max属性，然后在getCurrentPage方法中进行限制。代码如下：

prop : { max : { type : Number，default: 20，}，}，methods : { GetCurrentPage(){ var { page，pagesize }=this。$route.query，MAX_PAGESIZE=this.max，totalPages=this.totalPagesif(！页面||！page size){ this . handlepage(' replace '，page || 1，page size | | this . page size)；返回真；} else if(Page size MAX _ page size){ this . handlepage(' replace '，page，MAX _ page size)；返回真；} else if(totalPages 0(page TotalPages)){ this . handlePage(' replace '，TotalPages，page size)；返回真；}返回false}，}，第四步：优化代码

单击分页组件的页码时会生成两个请求

单击分页组件时，1。监控当前变更事件并变更地址栏，向父组件发出变更事件；2.但是，地址栏更改后，会向watch $路由上的父组件发出更改事件，因此您只需要合并发出更改事件，即只更改当前-change事件中的地址栏。

change page(val){ this . handlepage(' push '，val，this . page size)；}，结果呢

至此，自定义分页组件已经实现。通过改变地址栏的参数，可以看到分页数据的变化。当您单击页码时，地址栏会相应改变，请求的数量也尽可能减少。

用户定义的分页组件： MyPagination.vue

列表页面： list.vue

完整演示：前端

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。